搞懂 Chrome Extension 必備檔案

最近因緣際會開始在使用Chrome Extensions，不說「開發」字眼是因為現在都是透過AI Agent在寫了，人都只有是下指令給方向的(還有debug)，但想說趁這個機會把相關內容給筆記起來

1. manifest.json
   • 必備檔案，整個 extension 的「設定檔」。
   • 定義套件的名稱、版本、描述、需要的權限（如 tabs, storage）、背景程式、popup 介面等。
   • 類似專案的 config，瀏覽器讀取這份檔案後才知道怎麼載入其他程式。
2. background.js
   • 背景程式（background script）。
   • 會在瀏覽器背景常駐執行（或 service worker 型態），負責處理長時間的事件，例如：
   • 監聽瀏覽器事件（如分頁切換、網址變動）。
   • 與 API 溝通。
   • 負責 message passing（popup.js、content.js 之間的訊息轉送）。
3. popup.html
   • 使用者點擊 extension icon 時，彈出的 UI 視窗。
   • 這是一個小型 HTML 頁面，類似迷你網頁。
   • 通常搭配 popup.js 控制互動。
4. popup.js
   • 控制 popup.html 的互動邏輯。
   • 負責操作 DOM、呼叫 background script 或 API。
   • 範例：
   • 使用者按下按鈕 → popup.js 把請求傳給 background.js → background 再去呼叫 API → 把結果回傳到 popup 顯示。
5. lib 資料夾
   • 通常放第三方函式庫（libraries）。
   • 例如 jQuery、chart.js、或你自己共用的 util.js。
6. 其它
   • content.js
     • 插入到網頁（DOM）裡跑的程式，可以直接讀取／修改使用者正在看的頁面內容。
   • options.html + options.js
     • 提供設定頁面（Extension 管理畫面 → 點進去的設定）。
   • icons/
     • 放套件 icon（16x16, 48x48, 128x128）。

檔案作用對照表

其實 Chrome Extension 的檔案結構沒有想像中複雜，熟悉各檔案的角色之後，就可以開始做第一個 Hello World extension 了。