跨瀏覽器擴充功能框架
用一套現代工作流程，為所有主流瀏覽器打造擴充功能。Extension.js 會處理 manifest 編譯、瀏覽器專屬的輸出與封裝。
npx extension\@latest create my-extension
{"{"}
{"\n"}
{" "}
"manifest\_version"
:{" "}
3
,
{"\n"}
{" "}
"name"
:{" "}
"My Extension"
,
{"\n"}
{" "}
"version"
:{" "}
"1.0.0"
,
{"\n"}
{" "}
"action"
:{" "}
{"{"}
"default\_popup"
:{" "}
"popup.html"{" "}
{"}"}
,
{"\n"}
{" "}
"chrome:background"
:{" "}
{"{"}
"service\_worker"
:{" "}
"sw\.ts"{" "}
{"}"}
,
{"\n"}
{" "}
"firefox:background"
:{" "}
{"{"}
"scripts"
:{" "}
\[
"sw\.ts"
]{" "}
{"}"}
{"\n"}
{"}"}
為什麼要使用瀏覽器擴充功能框架？
瀏覽器擴充功能會用到與一般 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/\
{" "}
輸出，以及一個不擋路的 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），並為擴充功能團隊提供長期穩定性。
常見問題
npx extension\@latest create my-extension
MIT (c) Cezar Augusto 與{" "} Extension.js authors。