安装

引导一个新项目、从头开始，或迁移现有项目。

引导项目

运行init命令，并按照提示操作。

PNPMBunNPMYarn

pnpm dlx wxt@latest init

bunx wxt@latest init

npx wxt@latest init

# 初始使用 NPM，但提示时选择 Yarn
npx wxt@latest init

入门模板：

原生开发
 Vue
React
Svelte
Solid

所有模板默认使用 TypeScript。如需使用 JavaScript，请更改文件扩展名。

演示

wxt init 演示

运行 dev 命令后，继续后续步骤！

从头开始

创建新项目

PNPMBunNPMYarn

cd my-project
pnpm init

cd my-project
bun init

cd my-project
npm init

cd my-project
yarn init

安装 WXT：

PNPMBunNPMYarn

pnpm i -D wxt

bun i -D wxt

npm i -D wxt

yarn add --dev wxt

添加入口点 my-project/entrypoints/background.ts：

export default defineBackground(() => {
  console.log('Hello world!');
});

在 package.json 中添加脚本：

package.json

json

{
  "scripts": {
    "dev": "wxt", 
    "dev:firefox": "wxt -b firefox", 
    "build": "wxt build", 
    "build:firefox": "wxt build -b firefox", 
    "zip": "wxt zip", 
    "zip:firefox": "wxt zip -b firefox", 
    "postinstall": "wxt prepare"
  }
}

在开发模式下运行扩展
PNPMBunNPMYarn
sh
```
pnpm dev
```
sh
```
bun run dev
```
sh
```
npm run dev
```
sh
```
yarn dev
```
WXT 将自动打开已安装您扩展的浏览器窗口。

后续步骤

继续阅读 WXT 的项目结构和其他核心概念
配置开发模式下浏览器自动启动
探索 WXT 示例库了解特定 API 的使用方法或常见任务
查看社区资源页获取社区制作的资源列表！

安装 ​

引导项目 ​

演示 ​

从头开始 ​

后续步骤 ​

安装

引导项目

演示

从头开始

后续步骤