WXT：下一代前端 Web 扩展框架强势来袭！

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

1.什么是 WXT

WXT 是一个免费的开源框架，用于以传统、直观且安全的方式为所有浏览器构建 Web 扩展。WXT 基于 Nuxt，旨在通过 TypeScript、自动导入和完整的项目结构提供同样出色的 DX。

An open source tool that makes Chrome Extension development faster than ever .

WXT 具有以下特征：

WXT 将开发者体验放在首位。通过提供压缩和发布工具、一流的开发模式、完整的项目结构等，简化了 chrome 扩展开发过程。 WXT 使得迭代速度更快，开发功能而不是构建脚本，并支持使用 JS 生态系统提供的一切。

目前 WXT 在 Github 通过 MIT 协议开源，有超过 1.6k 的 star，是一个值得关注的前端开源项目。

2.如何使用 WXT2.1 WXT 基础使用

首先需要安装相应的依赖：

pnpx wxt@latest init 
// pnpm
npx wxt@latest init 
// npm

WXT 支持开发者选择 vanilla、Vue、React、Svelte、Solid 等诸多开发模板。所有模板默认为 TypeScript，开发者可以将文件扩展名重命名为 .js 以改用 JavaScript。

WXT 的行为可以通过 wxt.config.ts 文件进行配置。在此文件中，开发者可以添加 Vite 插件、更改项目的目录结构以及在 manifest.json 上设置字段。

import {defineConfig} from 'wxt';
export default defineConfig({
  // My WXT config
});

同时，WXT 允许开发者根据自己的喜好编辑多个目录：

比如，如果希望 src/ 目录包含所有源代码，并且希望重命名 entrypoints 为 entries，可以按照下面的方式进行配置：

// 目录结构

├─ src/
│  └─ entries/
│     ├─ background.ts
│     └─ ...
└─ wxt.config.ts

// 文件配置
import {defineConfig} from 'wxt';
export default defineConfig({
  srcDir: 'src',
  entrypointsDir: 'entries',
});

在 WXT 开发浏览器扩展时，添加 Vue、React 或 Svelte 等框架非常简单。只需要在 wxt.config.ts 文件中，安装框架的 Vite 插件并将其添加到配置中即可。

// 支持 Vue
import {defineConfig} from 'wxt';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
  vite: () => ({
    plugins: [vue()],
  }),
});

以下配置添加对 React 支持：

import {defineConfig} from 'wxt';
import react from '@vitejs/plugin-react';
// 添加 React 插件
export default defineConfig({
  vite: () => ({
    plugins: [react()],
  }),
});

以下配置添加对 Svelte 支持：

import {defineConfig} from 'wxt';
import {svelte} from '@sveltejs/vite-plugin-svelte';
// 添加 Svelte 插件
export default defineConfig({
  vite: () => ({
    plugins: [svelte()],
  }),
});

在内部，WXT 在单个构建期间多次运行 vite build。但是，WXT 无法在每个构建之间共享某些插件的相同实例，因此使用一个函数为每个构建返回每个插件的全新实例。

2.2 支持 Storage API

WXT 提供了一个简化的 API 来替换 browser.storage.* API，可以使用从 wxt/storage 自动导入的 storage 或手动导入：

import {storage} from 'wxt/storage';

所有存储键都必须以其存储区域为前缀，比如下面的代码：

// ❌ 抛出错误
await storage.getItem('installDate');
// ✅ This is good
await storage.getItem('local:installDate');

还可以使用 local:、session:、sync: 或 Managed:。 如果使用 TypeScript，则可以向大多数方法添加类型参数来指定键值的预期类型：

await storage.getItem('local:installDate');
await storage.watch(
  'local:installDate',
  (newInstallDate, oldInstallDate) => {
    // ...
  },
);
await storage.getMeta('local:installDate');

2.3 支持远程代码

WXT 将自动下载并打包带有 url: 前缀的导入，因此扩展不依赖于远程代码，这是 Google 对 MV3 的要求。比如下面是使用 Google Analytics 代码示例：

// utils/google-analytics.ts
import 'url:https://www.googletagmanager.com/gtag/js?id=G-XXXXXX';
window.dataLayer = window.dataLayer || [];
// NOTE: 这一行和 google 的文档有差异
window.gtag = function () {
  dataLayer.push(arguments);
};
gtag('js', new Date());
gtag('config', 'G-XXXXXX');

然后可以将其导入 HTML 文件以启用 Google Analytics：

// popup/main.ts
import '~/utils/google-analytics';
gtag('event', 'event_name', {
  key: 'value',
});

更多关于 WXT 的用法可以参考文末资料，本文不再过多展开。

3.本文总结

本文主要和大家介绍 WXT， 其是一个免费的开源框架，用于以传统、直观且安全的方式为所有浏览器构建 Web 扩展。WXT 基于 Nuxt，旨在通过 TypeScript、自动导入和完整的项目结构提供同样出色的 DX。因为篇幅问题，关于 WXT 只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

参考资料