> ## 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`）查看你正在使用的版本。[npm 上的 extension
  包](https://www.npmjs.com/package/extension) 列出了最新发布版本。
  [GitHub releases](https://github.com/extension-js/extension.js/releases) 以
  changelog 形式记录变更说明，而不会把本文档绑定到某个具体补丁号上。
</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"
  }
}
```

完成。你的扩展已经可以使用了。

* 日常迭代和 watch 模式运行 `npm run dev`。
* 生产构建 + 立即启动运行 `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>