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 demo

一旦运行了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. 在 dev 模式中运行你的扩展
    sh
    pnpm dev
    sh
    bun run dev
    sh
    npm run dev
    sh
    yarn dev
    WXT 会自动打开一个浏览器窗口，显示你的扩展已安装。

下一步 ​