> ## 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.

# React、Vue 等技術棧的擴充功能專案範本

> 用 Extension.js 官方範本來建立瀏覽器擴充功能，支援 React、Vue、Svelte、TypeScript 與 vanilla JS，免去從零開始的設定。

用官方範本建立擴充功能，比從零打造資料夾結構與設定來得更快。

## 範本提供的能力

* **可用的專案結構：** 從可運作的 manifest、scripts 和原始碼配置起步。
* **針對技術棧的設定：** 依框架與執行環境需求挑選範本。
* **更快上手：** 幾分鐘內就能從想法走到可執行的擴充功能。
* **一致的預設值：** 減少不同專案與團隊成員之間的設定差異。

## 快速使用

<CodeGroup>
  ```bash npm theme={null}
  npx extension@latest create my-extension --template=<slug>
  ```

  ```bash pnpm theme={null}
  pnpx extension@latest create my-extension --template=<slug>
  ```

  ```bash yarn theme={null}
  yarn dlx extension@latest create my-extension --template=<slug>
  ```

  ```bash bun theme={null}
  bunx extension@latest create my-extension --template=<slug>
  ```
</CodeGroup>

將 `<slug>` 替換成你想要的範本名稱。

## 可用的範本

挑選符合你專案的技術棧預設。每張卡片都會建立一個最小、可執行、附帶可運作 `manifest.json` 的擴充功能。

<CardGroup cols={2}>
  <Card title="JavaScript" href="/docs/getting-started/templates/javascript">
    <div className="flex items-center gap-4">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript" width="40" height="40" />

      <span className="text-sm text-gray-600 dark:text-gray-300">
        純 ES modules，不需編譯步驟。最快的起步方式。
      </span>
    </div>
  </Card>

  <Card title="TypeScript" href="/docs/getting-started/templates/typescript">
    <div className="flex items-center gap-4">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="TypeScript" width="40" height="40" />

      <span className="text-sm text-gray-600 dark:text-gray-300">
        為 popup、content 與 background script 提供嚴格型別。
      </span>
    </div>
  </Card>

  <Card title="Svelte" href="/docs/getting-started/templates/svelte">
    <div className="flex items-center gap-4">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/svelte/svelte-original.svg" alt="Svelte" width="40" height="40" />

      <span className="text-sm text-gray-600 dark:text-gray-300">
        編譯期 UI，搭配極小的 runtime，適合 content script。
      </span>
    </div>
  </Card>

  <Card title="Vue" href="/docs/getting-started/templates/vue">
    <div className="flex items-center gap-4">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg" alt="Vue" width="40" height="40" />

      <span className="text-sm text-gray-600 dark:text-gray-300">
        以單檔元件串接 popup、options 與 content script。
      </span>
    </div>
  </Card>

  <Card title="Preact" href="/docs/getting-started/templates/preact">
    <div className="flex items-center gap-4">
      <img src="https://preactjs.com/branding/symbol.svg" alt="Preact" width="40" height="40" />

      <span className="text-sm text-gray-600 dark:text-gray-300">
        以 3kB runtime 提供 React API。當打包大小重要時是合適選擇。
      </span>
    </div>
  </Card>

  <Card title="React" href="/docs/getting-started/templates/react">
    <div className="flex items-center gap-4">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React" width="40" height="40" />

      <span className="text-sm text-gray-600 dark:text-gray-300">
        以元件為核心的 UI，完整支援 Manifest V3，並為 popup 與 options 提供 hot module replacement。
      </span>
    </div>
  </Card>
</CardGroup>

想找具備驗證、付款、設計系統與完整 app shell 的正式級起始範本？到 [extension.dev](https://extension.dev) 瀏覽進階範本。

## 運作方式

當你執行 `create --template=<slug>` 時，Extension.js 會抓取所選範本、建立專案檔案，並可選擇性地安裝相依套件。

## 更多範本

在 examples 儲存庫中找到官方範本原始碼：

* [extension-js/examples](https://github.com/extension-js/examples/tree/main/examples)

範本資料夾名稱會直接對應到 `--template=<slug>`。

## 最佳實務

* 用範本快速建立你的專案結構。
* 從你已熟悉的技術棧範本開始。
* 選擇最符合專案需求的瀏覽器擴充功能情境。

## 後續步驟

* 了解[瀏覽器執行器](/docs/browsers/browsers-available)如何協助你驗證擴充功能行為。
* 了解 Extension.js 如何處理[環境變數](/docs/features/environment-variables)。

***