跨瀏覽器擴充功能框架
用一套現代工作流程，為所有主流瀏覽器打造擴充功能。Extension.js 會處理 manifest 編譯、瀏覽器專屬的輸出與封裝。
npx extension@latest create my-extension“manifest_version”:3,“name”:“My Extension”,“version”:“1.0.0”,“action”: “default_popup”:“popup.html”,“chrome:background”: “service_worker”:“sw.ts”,“firefox:background”: “scripts”:[“sw.ts”]為什麼要使用瀏覽器擴充功能框架？
瀏覽器擴充功能會用到與一般 web app 不同的檔案、瀏覽器 API、manifest 格式、權限與建置輸出。 一個瀏覽器擴充功能框架能去除那些黏合用的程式碼：以單一工作流程處理 Chrome、Edge 與 Firefox 的擴充功能開發、依目標過濾 manifest、針對 service worker 與 content script 調校的重新載入行為，以及為 Chrome Web Store、addons.mozilla.org 與 Edge Add-ons store 準備好的封裝。
Extension.js 就是這樣的工作流程：一個 JavaScript 或 TypeScript 專案、一份manifest.json、分開的dist/<browser>輸出，以及一個不擋路的 CLI，讓你能毫不費力地以同一份程式碼推出跨瀏覽器擴充功能。
看看完整的開發者工作流程
從建立專案骨架到擴充功能執行，全程使用一套現代工具鏈。
涵蓋 擴充功能完整生命週期 的核心功能
用一套現代擴充功能工作流程，為每個瀏覽器建置、測試與發佈。
把一個擴充功能編譯為各瀏覽器專屬輸出
為 Chrome、Edge、Firefox，以及自訂的 Chromium 或 Gecko 目標一次建置。 在開發、測試與發佈建置之間，瀏覽器專屬的輸出都維持可預期。
讓擴充功能結構維持明確
擴充功能成長時，manifest、路徑與輸出資源都會維持同步。
用設定檔微調行為
透過 extension.config.js 覆寫預設值，打造客製化建置。
帶上你偏好的技術棧
從 React、Vue、Svelte、TypeScript 或 JavaScript 開始。維持同一套工作流程，讓團隊可以選擇合適的 UI 模型，而不必更換擴充功能工具鏈。
乾淨地注入環境變數
依瀏覽器與模式載入環境值，並在 JavaScript、JSON 與 HTML 中替換它們。開發期密鑰絕對不會洩漏到正式 bundle 中。
建置、預覽、封裝
從本機檢查到各瀏覽器可上架產物，採用同一條流程。
選擇你的 框架，沿用相同工作流程。
從可上線的範本開始：React、Preact、Vue、Svelte、TypeScript 或 JavaScript。
React
以元件為基礎、完整相容 Manifest V3（MV3）的 UI。包含可立即發佈的 popup、options 與 content script。
Preact
相同的 React API，僅 3kB 的執行期，特別適合 bundle 大小敏感的 content script。
Vue
漸進式框架搭配單一檔案元件，且已串接好擴充功能情境的設定。
Svelte
編譯時期的 UI，執行期更小。當 content script 每一 KB 都重要時，是理想選擇。
TypeScript
為 popup、content 與 background script 加上靜態型別，在編譯期就攔截 manifest 與訊息傳遞的錯誤。
JavaScript
純 ES module，不需編譯步驟。快速起步，等需要時再加入工具。
從其他框架轉過來？
大多數 React、Vue 與 Svelte 的原始檔可以直接搬過來，不必重寫。實際工作集中在替換打包工具設定，並把產生的 manifest 還原為真正的 manifest.json。
支援開源核心
贊助者協助專案推出更快的版本、更好的開發者體驗（DX），並為擴充功能團隊提供長期穩定性。
常見問題
什麼是瀏覽器擴充功能？
什麼是瀏覽器擴充功能？
Extension.js 是 Chrome 擴充功能框架嗎？
Extension.js 是 Chrome 擴充功能框架嗎？
--browser=chrome、--browser=firefox 或 --browser=edge 選擇目標。請見 可用的瀏覽器。Extension.js 在開發階段如何處理 hot module replacement？
Extension.js 在開發階段如何處理 hot module replacement？
npx extension dev 後，CLI 會監看你的專案變動。對 popup、content script、service worker 與 options 頁面的編輯會觸發最快且安全的更新路徑。CLI 在支援時使用 hot module replacement（HMR），否則就採用針對性的重新載入。它會自動解決常見痛點，例如過期的 service worker 與遺漏的 content script 更新。如何為 Chrome、Edge 與 Firefox 建置同一個擴充功能？
如何為 Chrome、Edge 與 Firefox 建置同一個擴充功能？
我能使用 React、Preact、Vue、Svelte 或 TypeScript 嗎？
我能使用 React、Preact、Vue、Svelte 或 TypeScript 嗎？
Extension.js 支援 Manifest V3 嗎？
Extension.js 支援 Manifest V3 嗎？
如何排查 Manifest V3 的 service worker 與權限問題？
如何排查 Manifest V3 的 service worker 與權限問題？
type: "module"、新的 web_accessible_resources 結構、permissions 與 host_permissions 的拆分，以及 Firefox 在 declarative_net_request 上的差異。修正方式請見 Manifest V3 疑難排解。如何從自訂的 webpack 或 Vite 設定遷移？
如何從自訂的 webpack 或 Vite 設定遷移？
Extension.js 支援 monorepo 與環境變數嗎？
Extension.js 支援 monorepo 與環境變數嗎？
Extension.js 可以免費使用嗎？
Extension.js 可以免費使用嗎？
Extension.js 支援 Safari 嗎？
Extension.js 支援 Safari 嗎？
--browser=safari 還不是 CLI 的目標。你仍可以用共用的 web 程式碼撰寫 Safari 擴充功能，並在這個工作流程之外加入 Safari 專屬的建置步驟。目前範圍請見 可用的瀏覽器。Extension.js 會為我的 bundle 加上什麼？
Extension.js 會為我的 bundle 加上什麼？
extension build）只會輸出你的擴充功能參照到的程式碼，加上一小段在正式版本中會移除的 reload runtime。Dev 建置會包含額外的 HMR 與 reload 連結邏輯。輸出位於 dist/<browser> 之下，方便你比較各瀏覽器的大小。Content script 的 bundle 大小，會接近你的原始碼加上所選 UI 框架的水準。如何從 CRXJS、WXT 或 Plasmo 遷移？
如何從 CRXJS、WXT 或 Plasmo 遷移？
manifest.json，以及更新 package.json 的 scripts。逐步指南請見 從 CRXJS 遷移。