WXT浏览器开发中文教程(1)----安装WXT

前言

大家好，我是倔强青铜三 。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

欢迎来到 WXT！

WXT 是一个现代的、开源的框架，用于构建网页扩展。它受到 Nuxt 的启发，其目标是：

提供卓越的开发者体验 (DX)
为所有主流浏览器提供一流的开发支持

查看比较以了解 WXT 与其他用于构建网页扩展的工具的对比。

前提条件

这些文档假设您对网页扩展的结构以及如何访问扩展 API 有一定的了解。

如果您是扩展开发的新手？

如果您从未编写过扩展，请先按照 Chrome 的 Hello World 教程 创建一个不使用 WXT 的扩展，然后再回到这里。

您还应该熟悉 Chrome 的扩展文档和 Mozilla 的扩展文档。WXT 并不改变您使用扩展 API 的方式，因此在使用特定 API 时，您需要经常参考这些文档。

如果您已经对网页扩展的结构有了基本的了解，并且知道如何访问扩展 API，那么让我们安装WXT来创建您的第一个 WXT 扩展。

安装

启动一个新项目，从头开始，或迁移现有项目。

启动项目

运行init命令，并按照说明进行操作。

如果您使用pnpm，那么如下命令可以初始化wxt项目：

sh 复制代码

pnpm dlx wxt@latest init

如果您使用Bun，那么如下命令可以初始化wxt项目：

sh 复制代码

bunx wxt@latest init

如果您使用npm，那么如下命令可以初始化wxt项目：

sh 复制代码

npx wxt@latest init

如果您使用yarn，那么如下命令可以初始化wxt项目：

sh 复制代码

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

启动模板：

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

演示

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

从头开始

创建一个新项目

如果您使用pnpm，那么如下命令可以创建一个新项目：
sh 复制代码
```
cd my-project
pnpm init
```
如果您使用bun，那么如下命令可以创建一个新项目：
sh 复制代码
```
cd my-project
bun init
```
如果您使用npm，那么如下命令可以创建一个新项目：
sh 复制代码
```
cd my-project
npm init
```
如果您使用yarn，那么如下命令可以创建一个新项目：
sh 复制代码
```
cd my-project
yarn init
```
安装 WXT：

如果您使用pnpm，那么如下命令可以安装WXT：
sh 复制代码
```
pnpm i -D wxt
```
如果您使用bun，那么如下命令可以安装WXT：
sh 复制代码
```
bun i -D wxt
```
如果您使用npm，那么如下命令可以安装WXT：
sh 复制代码
```
npm i -D wxt
```
如果您使用yarn，那么如下命令可以安装WXT：
sh 复制代码
```
yarn add --dev wxt
```

添加入口文件，my-project/entrypoints/background.ts：

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"
  }
}

以开发模式运行你的扩展

如果您使用pnpm，那么如下命令可以开发模式运行你的扩展：
sh 复制代码
```
pnpm dev
```
如果您使用bun，那么如下命令可以开发模式运行你的扩展：
sh 复制代码
```
bun run dev
```
如果您使用npm，那么如下命令可以开发模式运行你的扩展：
sh 复制代码
```
npm run dev
```
如果您使用yarn，那么如下命令可以开发模式运行你的扩展：
sh 复制代码
```
yarn dev
```
WXT 将自动打开一个浏览器窗口，并且自动安装了你的扩展。

最后感谢阅读！欢迎关注我，微信公众号 ：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！