跳轉到主要內容
Extension.js
用一套現代工作流程為 Chrome、Edge 與 Firefox 打造瀏覽器擴充功能。Extension.js 會處理 manifest 編譯、各瀏覽器專屬輸出、重新載入行為與封裝。專注於產品功能,而不是建置工具。 使用你熟悉的 Web 工具,例如 TypeScript、React、Vue 與 Tailwind CSS。同時保留直接存取原生擴充功能 API 的能力。
正在比較工具?看看 Extension.js 與 WXT 及其他框架的比較:Extension.js vs WXT。
CLI 版本: 執行 extension --version(或 npx extension@latest --version)即可查看你正在使用的版本。extension 在 npm 上的套件頁列出最新發行。GitHub releases 以變更紀錄形式追蹤備註,讓本文件不會綁死在特定修訂號上。

​
影片導覽

​
選擇你的路徑

如果你是…從這裡開始
完全沒接觸過瀏覽器擴充功能什麼是瀏覽器擴充功能? 與建立你的第一個擴充功能
想用 AI 工具與範本快速開發範本 與立即開始
經驗豐富的 Web 開發者,但剛接觸擴充功能建立你的第一個擴充功能 與 Manifest
在除錯 Manifest V3 service workerManifest V3 疑難排解 與背景腳本
要跨瀏覽器交付正式版擴充功能跨瀏覽器相容性 與工作流程總覽

​
選擇對的指令

目標指令範例
建立專案骨架createnpx extension@latest create my-extension --template=new-react
在 watch 模式下開發devextension dev --browser=firefox
建置正式環境成品buildextension build --browser=chrome,firefox --zip
建置正式環境輸出並啟動startextension start --browser=edge
啟動既有的建置輸出previewextension preview --browser=chrome

​
開始新的擴充功能

用 create 指令建立新專案骨架,並用 --template 從特定技術棧的基準開始。 
npx extension@latest create <your-extension-name>
所有支援的範本清單請瀏覽範本頁。

​
在既有擴充功能中使用 Extension.js

如果你已經有擴充功能,只要安裝 extension 套件並一次性串接腳本即可。這讓本機開發、測試與發行建置保持一致。

​
步驟 1:把 extension 套件安裝為 devDependency

npm install extension@latest --save-dev

​
步驟 2:把 npm 腳本連結到 extension 指令

package.json
{
  "scripts": {
    "build": "extension build",
    "dev": "extension dev",
    "start": "extension start"
  },
  "devDependencies": {
    "extension": "latest"
  }
}
完成。你的擴充功能準備好可以使用。
  • 執行 npm run dev 做日常迭代與 watch 模式。
  • 執行 npm run start 做正式建置並立即啟動。
  • 執行 npm run build 產出可上架的正式環境成品。

​
最佳實務

  • 保持單一指令流程: 把 create → dev → build 當作預設循環。
  • 明確指定瀏覽器目標: 發行前以 --browser=chrome,firefox 驗證。
  • 集中預設值: 把共享的指令/瀏覽器設定放在 extension.config.js。

​
下一步

建立你的第一個擴充功能

第一次建置的引導式走查。

範本

瀏覽各種技術棧的起始範本。

Playwright E2E

為工作流程加入品質守門。

遙測與隱私

檢視隱私契約。

比較框架

Extension.js 作為瀏覽器擴充功能框架,與 WXT、CRXJS 及 Plasmo 的比較。