> ## 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?簡介與總覽

> 了解 Extension.js 做什麼、如何選擇對的 CLI 指令,以及依照你的瀏覽器擴充功能開發工作流程從何處開始。

<Frame>
  <img src="https://mintcdn.com/extensionjs/CP7lDr-8nGcTS-q3/images/BANNER.png?fit=max&auto=format&n=CP7lDr-8nGcTS-q3&q=85&s=875121cda069d4df7546619056a29887" alt="Extension.js" width="1280" height="640" data-path="images/BANNER.png" />
</Frame>

用一套現代工作流程為 Chrome、Edge 與 Firefox 打造瀏覽器擴充功能。Extension.js 會處理 manifest 編譯、各瀏覽器專屬輸出、重新載入行為與封裝。專注於產品功能,而不是建置工具。

使用你熟悉的 Web 工具,例如 [TypeScript](/docs/languages-and-frameworks/typescript)、[React](/docs/languages-and-frameworks/react)、[Vue](/docs/languages-and-frameworks/vue) 與 [Tailwind CSS](/docs/integrations/tailwindcss)。同時保留直接存取原生擴充功能 API 的能力。

<Note>
  正在比較工具?看看 Extension.js 與其他框架的比較:[框架比較](/docs/compare)。
</Note>

<Info>
  **CLI 版本:** 執行 `extension --version`(或 `npx extension@latest --version`)即可查看你正在使用的版本。[extension 在 npm 上的套件頁](https://www.npmjs.com/package/extension)列出最新發行。[GitHub releases](https://github.com/extension-js/extension.js/releases) 以變更紀錄形式追蹤備註,讓本文件不會綁死在特定修訂號上。
</Info>

## 影片導覽

<Frame>
  <iframe className="w-full aspect-video rounded-xl" src="https://www.loom.com/embed/58e21900d693417db1e0e59c0a96c4b3?sid=80cf1003-7ed1-4f9d-a3fb-01c7876983ad" title="Extension.js developer workflow" loading="lazy" referrerPolicy="no-referrer-when-downgrade" allow="clipboard-write; encrypted-media; fullscreen" allowFullScreen />
</Frame>

## 選擇你的路徑

| 如果你是…                          | 從這裡開始                                                                                                                       |
| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
| 完全沒接觸過瀏覽器擴充功能                  | [什麼是瀏覽器擴充功能?](/docs/concepts/what-is-a-browser-extension) 與[建立你的第一個擴充功能](/docs/getting-started/create-your-first-extension) |
| 想用 AI 工具與範本快速開發                | [範本](/docs/getting-started/templates) 與[立即開始](/docs/getting-started/immediately)                                            |
| 經驗豐富的 Web 開發者,但剛接觸擴充功能         | [建立你的第一個擴充功能](/docs/getting-started/create-your-first-extension) 與 [Manifest](/docs/implementation-guide/manifest-json)     |
| 在除錯 Manifest V3 service worker | [Manifest V3 疑難排解](/docs/concepts/manifest-v3) 與[背景腳本](/docs/implementation-guide/background)                               |
| 要跨瀏覽器交付正式版擴充功能                 | [跨瀏覽器相容性](/docs/features/cross-browser-compatibility) 與[工作流程總覽](/docs/workflows/index)                                      |

## 選擇對的指令

| 目標            | 指令        | 範例                                                              |
| ------------- | --------- | --------------------------------------------------------------- |
| 建立專案骨架        | `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`                            |

## 開始新的擴充功能

<Frame>
  <iframe className="w-full aspect-video rounded-xl" src="https://www.loom.com/embed/58e21900d693417db1e0e59c0a96c4b3?sid=80cf1003-7ed1-4f9d-a3fb-01c7876983ad" title="Create a new Extension.js project" loading="lazy" referrerPolicy="no-referrer-when-downgrade" allow="clipboard-write; encrypted-media; fullscreen" allowFullScreen />
</Frame>

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

<CodeGroup>
  ```bash npm theme={null}
  npx extension@latest create <your-extension-name>
  ```

  ```bash pnpm theme={null}
  pnpx extension@latest create <your-extension-name>
  ```

  ```bash yarn theme={null}
  yarn dlx extension@latest create <your-extension-name>
  ```

  ```bash bun theme={null}
  bunx extension@latest create <your-extension-name>
  ```

  ```bash bun theme={null}
  bunx extension@latest create <your-extension-name>
  ```
</CodeGroup>

所有支援的範本清單請瀏覽[範本](/docs/getting-started/templates)頁。

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

<Frame>
  <iframe className="w-full aspect-video rounded-xl" src="https://www.loom.com/embed/c7ae4fc7cdfc47c39334c7efe3175dd9?sid=035792a7-aec9-4f1a-852b-47ca7166a539" title="Add Extension.js to an existing extension" loading="lazy" referrerPolicy="no-referrer-when-downgrade" allow="clipboard-write; encrypted-media; fullscreen" allowFullScreen />
</Frame>

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

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

<CodeGroup>
  ```bash npm theme={null}
  npm install extension@latest --save-dev
  ```

  ```bash pnpm theme={null}
  pnpm add extension@latest --save-dev
  ```

  ```bash yarn theme={null}
  yarn add extension@latest --dev
  ```

  ```bash bun theme={null}
  bun add --dev extension@latest
  ```

  ```bash bun theme={null}
  bun add --dev extension@latest
  ```
</CodeGroup>

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

```json package.json theme={null}
{
  "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`。

## 下一步

<CardGroup cols={2}>
  <Card title="建立你的第一個擴充功能" icon="rocket" href="/docs/getting-started/create-your-first-extension">
    第一次建置的引導式走查。
  </Card>

  <Card title="範本" icon="grid" href="/docs/getting-started/templates">
    瀏覽各種技術棧的起始範本。
  </Card>

  <Card title="Playwright E2E" icon="check-double" href="/docs/workflows/playwright-e2e">
    為工作流程加入品質守門。
  </Card>

  <Card title="遙測與隱私" icon="shield" href="/docs/features/telemetry-and-privacy">
    檢視隱私契約。
  </Card>

  <Card title="比較框架" icon="scale-balanced" href="/docs/compare">
    Extension.js 與其他瀏覽器擴充功能框架的比較。
  </Card>
</CardGroup>