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

## 参数与 flag

| flag                  | 别名   | 作用              | 默认值          |
| --------------------- | ---- | --------------- | ------------ |
| `[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` 的文件夹时，才使用字面量 slug `default`。

## 共享的全局选项

也支持 [全局 flag](/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 script 与 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 / 运行时需求匹配的模板起步，减少前期设置漂移。
* 第一次跑得尽量小，等基础命令流验证完再加额外的工具。