> ## Documentation Index
> Fetch the complete documentation index at: https://extension.js.org/llms.txt
> Use this file to discover all available pages before exploring further.

# 瀏覽器擴充功能框架比較

> 比較瀏覽器擴充功能框架 Extension.js、WXT、CRXJS 與 Plasmo:各框架的 manifest 模型、打包工具、跨瀏覽器輸出、開發體驗、HMR 熱更新行為、CLI 工作流,以及從各個框架遷移到 Extension.js 的步驟、設定差異與適用場景。

瀏覽器擴充功能框架負責瀏覽器不會處理的工作：為每個擴充功能介面編譯 TypeScript 與現代 JavaScript、把 manifest 連結到實際的輸出檔案、在開發期間重新載入 service worker 與 content script，並產出各瀏覽器專屬的建置結果。本頁會比較目前活躍的選項，讓你在資訊充足的情況下做出選擇。

## 各個框架

| 維度       | Extension.js                 | WXT                   | CRXJS                     | Plasmo                       |
| -------- | ---------------------------- | --------------------- | ------------------------- | ---------------------------- |
| 模型       | `manifest.json` 為唯一來源        | 檔案慣例 + 設定             | 讀取 manifest 的 Vite plugin | 檔案慣例                         |
| 打包工具     | Rspack（內建，零設定）               | Vite                  | Vite（plugin 層）            | Parcel                       |
| 跨瀏覽器     | 同一份原始碼支援 Chrome、Edge、Firefox | Chrome、Firefox、支援 MV2 | 聚焦 Chromium               | 鎖定 Chrome、Firefox            |
| 設定       | 無需任何設定                       | `wxt.config.ts`       | `vite.config.ts` + plugin | `package.json` 的 manifest 欄位 |
| 與打包工具耦合度 | 內部細節                         | 須跟著 Vite 主版本          | 打包工具升級可能造成中斷              | 綁定 Parcel                    |

有兩項結構性的差異，比任何單一功能列都更值得關注：

* **manifest 放在哪裡。** Extension.js 讀取你的 `manifest.json`，並編譯它所宣告的所有內容。WXT 與 Plasmo 則是從檔案慣例與設定產生 manifest。CRXJS 雖然會讀取 manifest，但會透過 Vite 的 plugin API 解析，這也是為什麼打包工具升級可能讓它中斷（參見 [Vite 8 的 fileName 錯誤](/docs/migrate/crxjs-content-script-filename-undefined)）。
* **由誰掌控打包工具。** 包裝通用打包工具的框架，就會繼承該打包工具的破壞性變更。Extension.js 把打包工具視為內部細節：你永遠不會去設定它，升級的問題由框架負責，而不是你。

## 詳細比較與遷移指南

* [Extension.js vs WXT](/docs/compare/extension-js-vs-wxt)：最相近的比較，按維度逐項分析。
* [從 CRXJS 遷移](/docs/migrate/from-crxjs)：一般專案約十分鐘完成的逐步流程。
* [修正：Content script fileName 為 undefined](/docs/migrate/crxjs-content-script-filename-undefined)：CRXJS + Vite 8 的建置錯誤與解法。
* [從 Plasmo 遷移](/docs/migrate/from-plasmo)：慣例對應到 manifest、環境變數與 CSUI。

## 不需投入即可試用

只要一行指令，就能執行任何擴充功能範本，或 GitHub 上任何擴充功能的儲存庫：

```bash theme={null}
npx extension@latest dev
```

你的元件、`chrome.*` 呼叫與樣式都能從任何這些框架延續過來；[遷移指南](/docs/migrate/from-crxjs) 涵蓋需要調整的串接細節。