昨天我們學會了如何透過 Content Script 把程式碼注入到 GitLab Merge Request 頁面，並且成功印出一個簡單的測試訊息。接下來，我們就要來取得我們需要的文字內容啦！

怎麼抓取想要的文字?

從昨天的測試我們可以知道使用 document.querySelector 可以幫助我們取得 DOM 上我們想要的內容
但是網頁元件這麼多我們要怎麼快速取得我們想要的元件呢？
有個神奇的方法，就藏在 F12 → Elements 中！

1. 首先，打開 F12 並切到 Elements 的頁籤上
2. 點選左上角的"虛線框框箭頭"(如 )
3. 接著，滑鼠就可以移到畫面上，選取我們要抓取內容的區塊
   在可以選取的狀態下，"虛線框框箭頭"會呈現藍色，而滑鼠移動到可以選取的地方也會呈現如畫面中藍底的區塊
   
4. 點擊左鍵，可以發現 Element 會自動跳轉到該元件的 DOM 並反藍底
   
5. 我們將滑鼠移到 Element 中 DOM 的元件上，點擊滑鼠右鍵
6. 選擇 Copy > Copy JS Path
   
7. 我們就會在剪貼簿中得到這個 DOM 獨一無二的 JS 選擇器語法：document.querySelector("#content-body > div.merge-request > div.detail-page-header.gl-flex.gl-pt-5.gl-gap-3.gl-flex-wrap.gl-mb-3.\\@sm\\/panel\\:gl-flex-nowrap.\\@sm\\/panel\\:gl-mb-0.is-merge-request > h1")

抓取 MR 標題

雖然我們學會怎麼快速抓到 DOM，但這個語法太長了，而且其實很多多餘的定義我們其實不需要，所以我們來分析一下那些會是我們需要的

• 一個寫得好的網站，為了讓爬蟲機器人知道這個頁面的重點是什麼，<h1> 通常最優先一定是最重要的
• DOM 上面如果加上 data-* 這類型的 attribute，我們就可以來研究看看是不是也代表著參數的唯一性
• class 也是個很好的判斷依據

綜觀下來，我們可以得到，取得標題的方法有：

• document.querySelector("h1") → 抓第一個 <h1>。
• document.querySelector(".title") → 抓第一個 class 為 title 的元素。
• document.querySelector("[data-testid='title-content']") → 抓取 data-testid 為 title-content的元素。

※如果不確定，也可以將這個語法丟到 Console 裡面試試看，看顯示出來的結果是不是我們預期的 DOM

抓到標題後，我們就來整合到 Content Script 裡面吧！

整合至 Content Script

1. 稍微修改一下 content_script.js 檔案

   console.log("Content Script 已注入到 MR 頁面！");
   
   const titleEl = document.querySelector(".title") 
                || document.querySelector("[data-testid='title-content']") 
                || document.querySelector("h1");
   
   if (titleEl) {
     console.log("MR 標題：", titleEl.innerText.trim());
   } else {
     console.log("找不到 MR 標題元素！");
   }
   

2. 當我們會抓 MR 標題後， Reviewer 我們也一樣畫葫蘆~
   但因為 Reviewer 本身顯示名字的 <div> 沒有太多特殊的內容，讓我們可以去保它的唯一性，因此我們網上找到它的父層，帶有 data-testid 的 <div>
   

   再從它依序地往下抓到我們想要的 DOM，可以參考 [CSS] 選擇器表 (Selectors) 了解怎麼取得目標的 DOM 哦~

   const reviewerEl = document.querySelector('[data-testid='reviewer'] div') 
   
   if (reviewerEl) {
     console.log("Reviewer：", titleEl.innerText.trim());
   } else {
     console.log("找不到 Reviewer 元素！");
   }
   

   ※ 這邊可以抓的 fallback 就不多了，如果擔心抓不到的話，也可以用上面 Copy JS Path 的方式取得

實際測試

• 打開一個 GitLab Merge Request 頁面。
• 在 MR 頁面開啟 F12 → Console，你應該能看到 MR 標題
• 但 Reviewer 卻沒有成功顯示...
  

明天我們就來看是什麼原因吧！

參考來源

• MDN 文件 — Document.querySelector()
• [CSS] 選擇器表 (Selectors)