核心架構
一個 Chrome Extension 通常由好幾個各自獨立的執行環境組成，彼此透過訊息傳遞溝通。理解這個架構，是看懂任何一份擴充功能原始碼的關鍵。
四個核心元件
- Background Service Worker：擴充功能的「大腦」，沒有畫面，負責監聽瀏覽器事件、協調其他元件。
- Content Scripts：注入到網頁裡執行的程式碼，能讀取與修改該頁面的 DOM。
- Popup 與 Options 頁面：使用者看得到、點得到的介面，分別對應工具列彈出視窗與設定頁。
- 訊息傳遞：串起以上元件的溝通機制，因為它們各自執行在獨立的環境中，無法直接呼叫彼此的函式。
元件如何協同運作
以「網頁筆記小幫手」為例：使用者在網頁上選取文字並點擊右鍵選單（由 Background Service Worker 監聽 chrome.contextMenus）→ Background 送訊息給該分頁的 Content Script，取得選取的文字 → Content Script 把文字傳回 Background → Background 呼叫 chrome.storage 把筆記存起來 → 使用者點擊工具列圖示，Popup 頁面讀取 chrome.storage 顯示所有筆記。
四個元件各司其職，沒有任何一個元件單獨就能完成整個功能——這正是 Chrome Extension 架構設計的核心精神。接下來依序閱讀各元件的詳細說明。