瀏覽器擴充功能能做什麼
確切的 API 介面會依瀏覽器而異,但多數擴充功能會做下列一項或多項:- 改變頁面內容。 將 CSS 或 script 注入特定 URL(content script)。
- 新增瀏覽器 UI。 從工具列動作渲染 popup、side panel、選項頁或自訂 new-tab 頁面。
- 對瀏覽器事件做出回應。 監聽分頁更新、導航、下載、警示或來自頁面的訊息。
- 儲存資料。 讀寫跨工作階段保留的擴充功能範圍儲存。
- 呼叫特權 API。 管理 cookie、宣告式網路請求、書籤、歷史、下載或通知,受
permissions控制。
瀏覽器擴充功能的檔案
每個瀏覽器擴充功能都是一個靜態資產與程式碼組成的資料夾,經過簽署並打包以供散布:| 檔案或資料夾 | 用途 |
|---|---|
manifest.json | 宣告擴充功能的名稱、版本、權限、進入點與中繼資料。 |
| 背景腳本 | 長時間執行的事件處理。Manifest V3 在 Chromium 上採用 service worker。 |
| Content script | 注入符合網頁的程式碼。 |
| HTML 頁面 | popup、options、side panel 或 new-tab UI。 |
| 圖示與資產 | 工具列圖示、語系字串與其他靜態資源。 |
.ts、.tsx、.jsx、.vue、.svelte、CSS、Less、Sass)編譯成上述磁碟結構,並為每個瀏覽器目標產出獨立資料夾。
擴充功能中的 JavaScript、TypeScript、HTML 與 CSS
瀏覽器擴充功能使用與 Web 相同的語言來建置。JavaScript 與 TypeScript 驅動邏輯。HTML 定義擴充功能頁面。CSS(或 Less、Sass、CSS modules、Tailwind)為它們加上樣式。Extension.js 透過 Rspack 以擴充功能感知的預設值整合這些,讓你不用為每個瀏覽器設定打包工具。各副檔名的歸屬請見瀏覽器擴充功能中的 JavaScript 與 TypeScript 檔案。Chrome 擴充功能 vs Firefox 擴充功能
Chrome 與 Firefox 擴充功能共用 WebExtensions API,但有幾個差異在你每次建置時都會遇到:- 背景: Chrome(Manifest V3)需要
background.service_worker。Firefox 使用background.scripts搭配非持久化 event page。 - 執行期 API: Firefox 原生提供
browser.*。Chromium 使用chrome.*。在 Chromium 上可用--polyfill來彌平差距。 - 權限: 瀏覽器對部分
permissions與host_permissions項目的解讀不同。 - 散布: Chrome 透過 Chrome Web Store、Firefox 透過 addons.mozilla.org、Edge 透過 Edge Add-ons 商店。
Extension.js 如何協助
沒有框架時,打造瀏覽器擴充功能意味著手寫manifest.json 並為每個瀏覽器設定打包工具。你還得手動串接儲存即重新載入、為 API 加上 polyfill,並各自產出 Chrome、Firefox 與 Edge 的成品。Extension.js 替你做了這些:
- 一個專案、一份
manifest.json、各自的dist/<browser>輸出。 - TypeScript、React、Vue、Svelte、Preact 與現代 CSS 無需設定即可使用。
extension dev會在儲存時重新載入擴充功能、content script 與 HTML 頁面。extension build為每個瀏覽器目標產出可簽署上架的成品。
下一步
- 試試
extension create在數秒內建立擴充功能。 - 了解 Manifest V3 與瀏覽器之間的 API 差異。
- 建置流程請見跨瀏覽器相容性。
- 為開發選擇一個瀏覽器目標。