昨天我們了解了 navigator.clipboard 和 new ClipboardItem 的差別，今天我們就來幫我的組合的文字加上連結，成為一位貼心的同事吧！

實作

1. 抓取 MR 的網址
   在 Content Script 中，可以直接透過 window.location.href 取得目前的頁面 URL

   const mrUrl = window.location.href;
   

2. generateReviewContent 改寫
   1. 新增包括連結的複製內容

       // 準備 HTML 內容（包含連結）
       const htmlContent = reviewTemplate
           .replace(reviewerNameSymbol, reviewer)
           .replace(mrLinkSymbol, `<a href="${mrUrl}">${title}</a>`)
      

   2. 使用 ClipboardItem 建立複製內容
      • 包二種 type 的內容以防止貼上的地方無法使用包含連結的文字時使用
      • (這邊使用之前寫好的純文字內容)

       const clipboardItem = new ClipboardItem({
           "text/plain": new Blob(
               [
                   textContent
               ],
               { type: "text/plain" }
           ),
           "text/html": new Blob(
               [
                   htmlContent
               ],
               { type: "text/html" }
           ),
       });
      
       return clipboardItem
      

3.addCopyBtn 改寫複製到剪貼簿

const clipboardItem = await generateReviewContent(title, reviewer);

navigator.clipboard.write([clipboardItem]).then(() => {
    alert('MR 通知文字已複製！');
});

比較前後寫法：

• navigator.clipboard.writeText(message)
  • 專門設計來處理「單純的文字」
  • 參數是 string
• navigator.clipboard.write([clipboardItem])
  • 允許一次寫入多個不同格式的內容
  • 參數是 陣列，裡面放一個或多個 ClipboardItem。

實際測試

• 打開一個 GitLab Merge Request 頁面
• 等待畫面是否有出現按鈕
  
• 點選按鈕是否有跳出複製成功文字
  
• 檢查剪貼簿是否有複製成功
  
• 貼上能解析包含連結的平台(例：Slack、Gmail)，檢查是否有複製成功
  

到今天為止，我們已經完成我們的需求囉~
接下來我們就來看看能再做什麼優化吧！
那我們明天見~