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

# 用於建立擴充功能專案的 Create 指令

> 用一個 CLI 指令從官方範本建立全新的瀏覽器擴充功能專案。可選 React、Vue、Svelte、TypeScript 或原生 JS。

`create` 會根據所選範本建立檔案、設定與初始腳本,並可選擇性安裝相依套件。

## 何時使用 `create`

* 從零開始建立新擴充功能。
* 快速建立多個概念驗證(PoC)。
* 以一致的範本預設值,為團隊成員標準化專案上手流程。

## Create 指令功能

| 功能     | 你可以得到的能力            |
| ------ | ------------------- |
| 範本建立   | 以官方範本和就緒的專案結構作為起點   |
| 安裝相依套件 | 建立後可選擇安裝所需套件        |
| 路徑彈性   | 以專案名稱或明確的資料夾路徑建立    |
| 快速上手   | 從空資料夾到可執行的擴充功能,只需幾步 |

## 用法

<CodeGroup>
  ```bash npm theme={null}
  npx extension@latest create <extension-name|extension-path> [options]
  ```

  ```bash pnpm theme={null}
  pnpx extension@latest create <extension-name|extension-path> [options]
  ```

  ```bash yarn theme={null}
  yarn dlx extension@latest create <extension-name|extension-path> [options]
  ```

  ```bash bun theme={null}
  bunx extension@latest create <extension-name|extension-path> [options]
  ```

  ```bash bun theme={null}
  bunx extension@latest create <extension-name|extension-path> [options]
  ```
</CodeGroup>

## 引數與旗標

| 旗標                    | 別名   | 用途            | 預設值          |
| --------------------- | ---- | ------------- | ------------ |
| `[path or name]`      | -    | 要建立的專案資料夾/名稱。 | 必填           |
| `--template <name>`   | `-t` | 設定範本 slug。    | `javascript` |
| `--install [boolean]` | -    | 建立後安裝相依套件。    | `false`      |

當你想使用預設的 JavaScript 起始範本時,完全不需指定 `--template`。只有在你想用 [官方範例](https://github.com/extension-js/examples/tree/main/examples) 中的其他技術棧時,才加上 `--template=<slug>`。

slug `init` 是同一份預設起始範本的別名。只有當 examples 儲存庫中真的存在名為 `default` 的資料夾時,才使用字面上的 `default`。

## 共用全域選項

也支援 [全域旗標](/docs/workflows/global-flags)。

## 指令範例

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

  ```bash pnpm theme={null}
  pnpx extension@latest create my-extension --template=new-react
  ```

  ```bash yarn theme={null}
  yarn dlx extension@latest create my-extension --template=new-react
  ```

  ```bash bun theme={null}
  bunx extension@latest create my-extension --template=new-react
  ```

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

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

  ```bash pnpm theme={null}
  pnpx extension@latest create my-extension --install
  ```

  ```bash yarn theme={null}
  yarn dlx extension@latest create my-extension --install
  ```

  ```bash bun theme={null}
  bunx extension@latest create my-extension --install
  ```

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

## 可用範本

<Tip>
  範本的完整與持續更新清單,請瀏覽 [examples
  儲存庫](https://github.com/extension-js/examples/tree/main/examples)。
</Tip>

<CardGroup cols={2}>
  <Card title="JavaScript(預設)" icon="js" href="https://github.com/extension-js/examples/tree/main/examples/init">
    最精簡的起始範本。需要乾淨基線時使用。
  </Card>

  <Card title="TypeScript" icon="typescript" href="https://github.com/extension-js/examples/tree/main/examples/new-typescript">
    預先設好 `tsconfig.json` 的型別化起始範本。
  </Card>

  <Card title="React" icon="react" href="https://github.com/extension-js/examples/tree/main/examples/new-react">
    為 content scripts 與 popup 視圖串接好的 React UI。
  </Card>

  <Card title="Vue" icon="vuejs" href="https://github.com/extension-js/examples/tree/main/examples/new-vue">
    內建單一檔案元件(SFC)支援的 Vue UI。
  </Card>
</CardGroup>

## 最佳實務

* 從符合你 UI/執行階段需求的範本開始,可減少後續設定上的偏移。
* 第一次執行時保持簡單,確認基本指令流程後再加入額外工具。
