面向 React、Vue 及更多框架的扩展项目模板

通过从官方模板脚手架生成扩展，跳过手动搭建目录结构与配置，更快地起步。

模板能力

就绪的项目结构： 从一份可用的 manifest、脚本与源码布局开始。
针对技术栈的设置： 按照框架与运行时需求选择模板。
更快的上手： 几分钟之内从想法到可运行的扩展。
一致的默认配置： 减少项目之间和团队成员之间的设置漂移。

快速使用

npx extension@latest create my-extension --template=<slug>

pnpx extension@latest create my-extension --template=<slug>

yarn dlx extension@latest create my-extension --template=<slug>

bunx extension@latest create my-extension --template=<slug>

deno run -A npm:extension@latest create my-extension --template=<slug>

把 <slug> 替换为你想要的模板名。

可用模板

每个模板都会生成一个最小可运行的扩展，并带有可用的 manifest.json。展开任意一个即可看到它提供的内容、具体命令与讲解视频。

JavaScript

一份干净的 ES 模块基线，没有编译步骤。模板接好了 manifest.json、popup 与 content script 入口，让你可以直接运行 extension dev 并立即开始迭代。当你想要尽量小的初始设置时，选择这个模板。

npx extension@latest create my-extension --template=javascript

在 GitHub 上浏览完整源码: extension-js/examples/javascript

TypeScript

跨 sidebar 面板、content 与 background 脚本的静态类型，并配置好 chrome 与 browser API 类型定义。把 manifest、消息和权限相关的错误在编译期捕获，而不是在浏览器控制台里才发现。省略 --template 时就使用它。

npx extension@latest create my-extension --template=typescript

在 GitHub 上浏览完整源码: extension-js/examples/typescript

Svelte

编译时 UI，配合单文件 .svelte 组件和极小的运行时占用。模板已包含在扩展上下文中以 HMR 友好的方式编写 Svelte 所需的构建配置。

npx extension@latest create my-extension --template=svelte

在 GitHub 上浏览完整源码: extension-js/examples/svelte

Vue

一份渐进式的设置，使用 .vue 单文件组件，脚手架生成一个 sidebar 面板加上一个 content script。模板会处理 SFC 编译与重载行为，让你可以专注在 UI 上。

npx extension@latest create my-extension --template=vue

在 GitHub 上浏览完整源码: extension-js/examples/vue

Preact

与 React 相同的组件模型，但只有 3kB 的运行时，并配置了标准的 preact/compat 别名，让大多数 React 库可以继续工作。当你关心打包体积时，这是一个不错的选择。

npx extension@latest create my-extension --template=preact

在 GitHub 上浏览完整源码: extension-js/examples/preact

React

一个完全兼容 Manifest V3（MV3）的基于组件的 UI 基线。侧边栏面板与 content script 都作为 React 入口提供，并接好了热模块替换（HMR）。编辑组件后即可看到更新，无需手动重新加载扩展。

npx extension@latest create my-extension --template=react

在 GitHub 上浏览完整源码: extension-js/examples/react

工作原理

当你运行 create --template=<slug> 时，Extension.js 会拉取所选模板，脚手架生成项目文件，并可选地安装依赖。只有 javascript 模板随 CLI 一起分发，所以它可以离线脚手架生成，不需要任何网络请求。省略 --template 时的默认模板是 typescript，它和其他名称一样会在创建时下载。当这次下载失败时，create 会回退到内置的 javascript 模板并给出网络错误。该目录包含 6 个分组、大约 50 个模板：starters、sidebar、content scripts、new tab、toolbar action 与特殊目录。运行 extension create --help 可以查看全部名称。不在目录中的名称会以 E_TEMPLATE_NOT_FOUND 失败，并且什么也不会创建。下载失败则会报告为下载错误，所以网络问题绝不会看起来像拼写错误。

可复现的脚手架

模板语料库固定在 examples 仓库的一个不可变提交上。同一个模板两次脚手架生成的文件总是一致的，已发布的 CLI 也绝不会跟随一个会移动的分支。你可以指向另一份语料库：

# A branch, tag, or commit SHA of extension-js/examples
EXTENSION_CREATE_TEMPLATE_REF=main extension create my-extension --template=react

# Override the archive URL entirely
EXTENSION_CREATE_TEMPLATE_URL=https://example.com/examples.zip extension create my-extension --template=react

EXTENSION_CREATE_TEMPLATE_REF 接受分支、tag 或提交 SHA。把它设为 main 就会恢复跟随浮动分支的行为。

从 URL 脚手架生成

--template 也接受用 GitHub URL 或 ZIP URL 代替目录中的模板名：

extension create my-extension --template=https://github.com/extension-js/examples/tree/main/examples/content

从 4.1.19 起，模板 URL 与 EXTENSION_CREATE_TEMPLATE_URL 必须使用 https://。除非设置 EXTENSION_ALLOW_HTTP_TEMPLATE=true，否则 create 会拒绝 http://。

最佳实践

使用模板快速搭建项目。
从你已经熟悉的技术栈对应的模板开始。
根据项目需求，选择最契合的浏览器扩展上下文。

下一步

了解浏览器运行器如何帮助你验证扩展行为。
了解 Extension.js 如何处理环境变量。

Introduction

Browser extension fundamentals

Getting started

模板

Compare and migrate

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

Machine contracts

Publish to the stores

Debugging

Implementation guide

Community

面向 React、Vue 及更多框架的扩展项目模板

模板能力

快速使用

可用模板

工作原理

可复现的脚手架

从 URL 脚手架生成

更多模板

最佳实践

下一步

​模板能力

​快速使用

​可用模板

​工作原理

​可复现的脚手架

​从 URL 脚手架生成

​更多模板

​最佳实践

​下一步

模板能力

快速使用

可用模板

工作原理

可复现的脚手架

从 URL 脚手架生成

更多模板

最佳实践

下一步