什麼是 Extension.js?簡介與總覽

用一套現代工作流程為 Chrome、Edge 與 Firefox 打造瀏覽器擴充功能。Extension.js 會處理 manifest 編譯、各瀏覽器專屬輸出、重新載入行為與封裝。專注於產品功能,而不是建置工具。使用你熟悉的 Web 工具,例如 TypeScript、React、Vue 與 Tailwind CSS。同時保留直接存取原生擴充功能 API 的能力。

正在比較工具?看看 Extension.js 與其他框架的比較:框架比較。

CLI 版本: 執行 extension --version(或 npx extension@latest --version)即可查看你正在使用的版本。extension 在 npm 上的套件頁列出最新發行。GitHub releases 以變更紀錄形式追蹤備註,讓本文件不會綁死在特定修訂號上。

影片導覽

選擇你的路徑

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

選擇對的指令

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

開始新的擴充功能

用 create 指令建立新專案骨架,並用 --template 從特定技術棧的基準開始。

npx extension@latest create <your-extension-name>

pnpx extension@latest create <your-extension-name>

yarn dlx extension@latest create <your-extension-name>

bunx extension@latest create <your-extension-name>

bunx extension@latest create <your-extension-name>

所有支援的範本清單請瀏覽範本頁。

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

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

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

npm install extension@latest --save-dev

pnpm add extension@latest --save-dev

yarn add extension@latest --dev

bun add --dev extension@latest

bun add --dev extension@latest

步驟 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 與其他瀏覽器擴充功能框架的比較。

什麼是瀏覽器擴充功能?

⌘I

Introduction

Browser extension fundamentals

Getting started

Compare and migrate

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

Debugging

Implementation guide

Community

什麼是 Extension.js?簡介與總覽

影片導覽

選擇你的路徑

選擇對的指令

開始新的擴充功能

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

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

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

最佳實務

下一步

建立你的第一個擴充功能

範本

Playwright E2E

遙測與隱私

比較框架

​影片導覽

​選擇你的路徑

​選擇對的指令

​開始新的擴充功能

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

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

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

​最佳實務

​下一步

建立你的第一個擴充功能

範本

Playwright E2E

遙測與隱私

比較框架

影片導覽

選擇你的路徑

選擇對的指令

開始新的擴充功能

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

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

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

最佳實務

下一步