好啦！現在我們有基本的環境了，可以開始來抓資料了~
我們目標是希望 Extension 可以自動抓網頁的資料，產生必要的連結和文字，因此我們需要 Content Script 來幫我們抓取網頁上的內容。

什麼是 Content Script？

Content Script 是 Extension 注入到指定網頁裡執行的 JavaScript 程式碼，它可以：

• 讀取或修改網頁的 DOM（像是在 MR 頁面抓標題、作者資訊）。
• 傳送訊息給背景程式（Background/Service Worker）或 Popup 頁面。

如果沒有使用 Content Script，我們的 Extension 就只能待在自己的「小視窗」裡，完全碰不到網頁上的內容。

怎麼設定 Content Script？

Content Script 有幾種設定方式

1. 使用靜態宣告進行注入(在 manifest.json 設定)
2. 使用動態宣告進行注入(使用 chrome api 在程式執行後注入)
3. 以程式輔助方式注入(針對需要在事件發生或特定情況下執行的內容指令碼，使用程式輔助插入功能)

我們這次使用到的是靜態宣告注入。

在先前的 manifest.json 裡，我們已經定義了：

    "content_scripts": [
        {
            "matches": [
                "https://gitlab.com/*/merge_requests/*"
            ],
            "js": [
                "content_script.js"
            ]
        }
    ]

這邊我們有使用到的參數：

• matches：必填。定義要注入的頁面，例如這裡限定在 GitLab 的 Merge Request 頁面。可以設定 符合 或 排除 的網址規則。
• js：選填。指定要注入的腳本檔案。

這樣一來，當我們打開符合條件的頁面（例如 GitLab 的 MR 頁面），Chrome 就會自動把 content.js 注入到該頁面。

建立 Content Script

我們之前已經建立好 content_script.js 的檔案，現在我們來嘗試寫一些程式碼看看是不是能如預期執行。

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

// 簡單測試：抓取 MR 標題
const titleEl = document.querySelector('h1');
if (titleEl) {
  console.log("MR 標題：", titleEl.innerText);
}

儲存後，按下 F12 → Console，如果有顯示 Content Script 訊息和抓到的標題文字，那就是成功囉。

Note: GitLab 有 Demo 頁面可以測試哦~

參考來源

• Chrome 官方文件：Content Scripts