ByteNoteByteNote
字

字节笔记本

2026年2月16日

WXT：下一代 Web 扩展开发框架，像 Nuxt 一样开发浏览器插件

#开源工具

本文介绍 WXT，一个下一代 Web 扩展开发框架。它提供类似 Nuxt 的开发体验，支持所有浏览器、MV2 和 MV3，具有热更新、自动导入、TypeScript 支持等现代特性，让浏览器扩展开发变得简单高效。

项目简介

WXT 是一个专为浏览器扩展开发设计的下一代框架，由 Aaron Klinker 开发维护。它借鉴了 Nuxt、Next.js 等现代前端框架的设计理念，为 Web Extension 开发提供了完整的工具链和开发体验。

截至目前，该项目在 GitHub 上已获得数千 stars，是浏览器扩展开发领域最受欢迎的工具之一。

核心特性

1. 全浏览器支持

  • ✅ 支持 Chrome、Firefox、Safari、Edge 等所有主流浏览器
  • ✅ 同时支持 Manifest V2 和 Manifest V3
  • ✅ 自动处理浏览器差异，一套代码多端运行

2. 现代开发体验

  • ⚡ 热模块替换 (HMR) - 开发模式下实时更新，无需手动刷新
  • ⚡ 快速重载 - 代码变更后自动重新加载扩展
  • 📂 基于文件的入口 - 自动识别 content.ts、background.ts 等文件
  • 🦾 自动导入 - 自动导入 WXT API，无需手动 import

3. 技术栈支持

  • 🚔 TypeScript - 完整的类型支持
  • 🎨 前端框架无关 - 支持 Vue、React、Svelte、Solid 等任意框架
  • 📦 模块系统 - 可在不同扩展间复用代码
  • ⬇️ 远程 URL 导入 - 可直接下载并打包远程模块

4. 构建与发布

  • 🤖 自动发布 - 内置命令支持自动发布到 Chrome Web Store、Firefox Add-ons 等
  • 📏 包分析 - 内置打包分析工具，优化扩展体积
  • 🖍️ 项目脚手架 - 一行命令快速创建新项目

快速开始

创建新项目

bash
# 使用 npm
npx wxt@latest init

# 使用 pnpm
pnpm dlx wxt@latest init

# 使用 bun
bunx wxt@latest init

项目结构

text
my-extension/
├── .output/              # 构建输出目录
├── assets/               # 静态资源
├── components/           # 共享组件
├── composables/          # 组合式函数
├── entrypoints/          # 扩展入口点
│   ├── background.ts     # 后台脚本
│   ├── content.ts        # 内容脚本
│   └── popup/            # 弹出页面
│       ├── index.html
│       ├── main.ts
│       └── style.css
├── public/               # 公共资源
├── wxt.config.ts         # WXT 配置文件
└── package.json

开发命令

bash
# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 构建并打包为 zip
pnpm zip

# 发布到应用商店
pnpm publish

使用示例

内容脚本 (Content Script)

typescript
// entrypoints/content.ts
import { defineContentScript } from 'wxt/sandbox';

export default defineContentScript({
  matches: ['*://*.example.com/*'],
  main() {
    console.log('Content script loaded!');
    document.body.style.backgroundColor = '#f0f0f0';
  },
});

后台脚本 (Background)

typescript
// entrypoints/background.ts
import { defineBackground } from 'wxt/sandbox';

export default defineBackground(() => {
  console.log('Background script loaded!');

  browser.runtime.onInstalled.addListener(({ reason }) => {
    if (reason === 'install') {
      console.log('Extension installed!');
    }
  });
});

弹出页面 (Popup)

vue
<!-- entrypoints/popup/App.vue -->
<template>
  <div class="popup">
    <h1>Hello WXT!</h1>
    <button @click="count++">Count: {{ count }}</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);
</script>

配置示例

typescript
// wxt.config.ts
import { defineConfig } from 'wxt';

export default defineConfig({
  manifest: {
    name: 'My Extension',
    description: 'A powerful browser extension',
    permissions: ['storage', 'tabs'],
  },
  runner: {
    disabled: false,
    chromiumBinary: '/usr/bin/google-chrome',
  },
  zip: {
    artifactTemplate: '{{name}}-{{version}}.zip',
  },
});

与 Plasmo 对比

特性WXTPlasmo
框架支持Vue, React, Svelte, Solid 等React 为主
配置方式配置文件 + 约定式配置文件
热更新✅ HMR✅ HMR
自动导入✅ 支持✅ 支持
发布工具✅ 内置✅ 内置
文档完善完善

适用场景

  • 浏览器扩展开发 - 快速构建跨浏览器扩展
  • 内容脚本注入 - 在网页中注入自定义功能
  • 浏览器自动化 - 开发自动化工具类扩展
  • 生产力工具 - 开发书签管理、笔记工具等

项目链接

总结

WXT 是目前浏览器扩展开发领域最现代化的工具之一。它解决了传统扩展开发的痛点：配置复杂、浏览器兼容性差、开发体验落后。如果你需要开发浏览器扩展，WXT 是一个值得优先考虑的框架。

开源工具
上一篇

Pindrop：原生 macOS 离线 AI 听写应用

下一篇

WXT：下一代 Web 扩展开发框架，像 Nuxt 一样开发浏览器插件

分享: