WXT 中文文档

Appearance

安装 ​

创建一个新项目、从零开始，或者迁移现有项目。

创建新项目 ​

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

sh
pnpm dlx wxt@latest init
sh
bunx wxt@latest init
sh
npx wxt@latest init
sh
# 先使用 NPM，在提示时选择 Yarn
npx wxt@latest init

入门模板：

TypeScript LogoVanilla
Vue LogoVue
React LogoReact
Svelte LogoSvelte
Solid LogoSolid

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

演示 ​

wxt init 演示

运行 dev 命令后，继续阅读下一步！

从零开始 ​

  1. 创建一个新项目

    sh
    cd my-project
pnpm init
    sh
    cd my-project
bun init
    sh
    cd my-project
npm init
    sh
    cd my-project
yarn init

  2. 安装 WXT：

    sh
    pnpm i -D wxt
    sh
    bun i -D wxt
    sh
    npm i -D wxt
    sh
    yarn add --dev wxt

  3. 添加一个入口文件 my-project/entrypoints/background.ts：

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

  4. 在 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"
  }
}

  5. 以开发模式运行你的扩展

    sh
    pnpm dev
    sh
    bun run dev
    sh
    npm run dev
    sh
    yarn dev

    WXT 会自动打开一个已安装你的扩展的浏览器窗口。

下一步 ​