前幾天我們已經成功取得 Merge Review 的標題、 Reviewer 的名字和範本文字了。
今天就來把它們組起來吧！

組合文字的工程，我們就回到 Content Script 中處理

回顧 Content Script

1. 目前我們的 Content Script 中有一個注入提示的 console.log

   console.log("Content Script 已注入到 MR 頁面！");
   

   (可有可無，主要是提醒自己 Content Script 已經運作了，不需要可以刪掉)

2. 搭配 MutationObserver 監聽已取得 標題 及 Reviewer

   const targetNode = document.body;
   const config = { childList: true, subtree: true };
   
   const callback = (mutationsList, observer) => {
       const titleEl = document.querySelector(".title")
           || document.querySelector("[data-testid='title-content']")
           || document.querySelector("h1");
       const reviewerEl = document.querySelector("[data-testid='reviewer'] div");
       if (titleEl && reviewerEl) {
           console.log("MR 標題：", titleEl.innerText.trim());
           console.log("Reviewer：", reviewerEl.innerText.trim());
           observer.disconnect(); // 抓到就停止監聽，避免浪費效能
       }
   };
   
   const observer = new MutationObserver(callback);
   observer.observe(targetNode, config);
   

所以接下來我們需要寫一個 function 讓它在取得所有資訊後，把文字組合起來！

實作

1. 建立一個 function

   async function generateReviewContent(title, reviewer) {
       const {
           reviewTemplate
       } = await chrome.storage.sync.get(['reviewTemplate']);
   
       const reviewerNameSymbol = "{REVIEWER_NAME}";
       const mrLinkSymbol = "{MR_LINK}";
   
       const textContent = reviewTemplate
           .replace(reviewerNameSymbol, reviewer)
           .replace(mrLinkSymbol, title)
   
       console.log(textContent);
   }
   

   說明：

   • 使用 chrome.storage.sync 取得目前的範本文字
   • 將範本文字中動態變動的區塊用參數定義出來
   • 使用 replace 分別取代要被取代的文字

2. 接著將 function 放到先前文字的後面，讓標題和 Reviewer 文字可以丟到 function 中

   const targetNode = document.body;
   const config = { childList: true, subtree: true };
   
   const callback = (mutationsList, observer) => {
       const titleEl = document.querySelector(".title")
           || document.querySelector("[data-testid='title-content']")
           || document.querySelector("h1");
       const reviewerEl = document.querySelector("[data-testid='reviewer'] div");
       if (titleEl && reviewerEl) {
           const title = titleEl.innerText.trim() //新增
           const reviewer = reviewerEl.innerText.trim() //新增
           generateReviewContent(title, reviewer) //新增
           observer.disconnect();
       }
   };
   
   const observer = new MutationObserver(callback);
   observer.observe(targetNode, config);
   

完成後，我們就可以在抓取到需要的文字後產出要的文字囉~

實際測試

• 打開一個 GitLab Merge Request 頁面。
• 在 MR 頁面開啟 F12 → Console
• 就可以看到我們組合好的文字囉！
  

但我們不能每次要複製文字都要切 F12 複製對吧? 太不貼心了!
明天我們就來做個"按鈕"，讓複製文字變得簡單~