在我們的 Chrome Extension 中，複製 Merge Request 通知文字的寫法是：

navigator.clipboard.writeText(message);

不過查過 Clipboard API 發現還有一個比較進階的 ClipboardItem。今天就來比較這兩者的用途與差異。

1. navigator.clipboard.writeText(message)

   • 用途：快速將純文字寫入剪貼簿。
   • 優點：
     • 簡單好用，只需要一行程式碼。
   • 缺點：
     • 只能處理純文字（text/plain）。
     • 無法支援 HTML 格式、圖片等。
   • 範例

     navigator.clipboard.writeText("這是一段 MR 通知文字")
       .then(() => console.log("已複製！"))
       .catch(err => console.error("複製失敗", err));
     

2. new ClipboardItem

   • 用途：建立更豐富的剪貼簿內容（支援多種 MIME type，例如文字、HTML、圖片）。
   • 優點：
     • 可以同時寫入純文字 + HTML 格式。
     • 可以複製圖片（Blob 資料）。
   • 缺點：
     • 瀏覽器支援度比 writeText 更有限。
   • 範例（同時寫入純文字與 HTML）：

     const text = "這是一段 MR 通知文字";
     const html = `<strong>${text}</strong>`;
     
     const clipboardItem = new ClipboardItem({
       "text/plain": new Blob([text], { type: "text/plain" }),
       "text/html": new Blob([html], { type: "text/html" })
     });
     
     navigator.clipboard.write([clipboardItem])
       .then(() => console.log("已複製純文字 + HTML"))
       .catch(err => console.error("複製失敗", err));
     

適合情境

• 只要文字 → 用 writeText()
• 要同時有文字 + HTML / 圖片 → 用 ClipboardItem。

參考來源

• MDN：ClipboardItem
• Navigator:clipboard property
• MDN：Clipboard API