WXT框架从零开始：打造你的第一个Chrome浏览器插件
什么是WXT框架？
WXT是一个现代化的Chrome浏览器插件开发框架，它简化了传统插件开发的复杂度，让开发者可以用更少的代码快速构建功能完整的浏览器扩展。与传统的manifest.json配置相比，WXT提供了：
- 🚀 零配置快速启动 - 开箱即用的项目模板
- 📦 自动化构建流程 - 内置打包和热更新
- 🎯 现代开发体验 - 支持Vue、React等前端框架
- 🔧 智能文件组织 - 基于约定优于配置的目录结构
环境准备
系统要求
- Node.js >= 16.x
- npm 或 yarn 或 pnpm
- Chrome浏览器（或基于Chromium的浏览器）
验证环境
bash
node -v
npm -v快速上手：5分钟创建第一个插件
步骤1：使用create-wxt创建项目
bash
npm create wxt@latest my-first-extension按照提示选择你的配置：
bash
✔ 选择框架？ › vanilla (或 vue/react)
✔ 添加TypeScript？ › yes
✔ 是否安装依赖？ › yes步骤2：项目结构概览
进入项目目录后，你会看到这样的结构：
csharp
my-first-extension/
├── entrypoints/
│ ├── content.ts # 内容脚本
│ ├── background.ts # 后台脚本
│ ├── popup/
│ │ ├── index.html
│ │ └── App.vue # 弹窗UI组件
│ └── options/ # 选项页面
├── public/
│ └── icon.png # 插件图标
├── wxt.config.ts # WXT配置文件
├── package.json
└── README.md步骤3：启动开发服务器
bash
npm run dev你会看到输出信息，包括扩展的加载路径。
在Chrome中加载插件
- 打开 Chrome，访问
chrome://extensions/ - 启用右上角的 "开发者模式"
- 点击 "加载已解压的扩展程序"
- 选择项目中的
dist目录
恭喜！你的第一个插件已经加载成功！
编写你的第一个功能
创建一个简单的弹窗应用
编辑 entrypoints/popup/App.vue：
vue
<template>
<div class="container">
<h1>🎉 我的第一个插件</h1>
<p>当前页面URL: {{ currentUrl }}</p>
<button @click="copyUrl">复制URL</button>
<p v-if="copied" class="success">✓ 已复制!</p>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const currentUrl = ref('')
const copied = ref(false)
onMounted(async () => {
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
currentUrl.value = tab.url || ''
})
const copyUrl = async () => {
await navigator.clipboard.writeText(currentUrl.value)
copied.value = true
setTimeout(() => {
copied.value = false
}, 2000)
}
</script>
<style scoped>
.container {
width: 300px;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
text-align: center;
}
button {
padding: 8px 16px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
button:hover {
background: #0056b3;
}
.success {
color: #28a745;
margin-top: 10px;
}
</style>创建内容脚本
编辑 entrypoints/content.ts：
typescript
// 在页面加载时注入一条消息
console.log('✨ WXT内容脚本已加载！')
// 监听来自弹窗的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === 'getPageInfo') {
sendResponse({
title: document.title,
url: window.location.href,
lang: document.documentElement.lang
})
}
})
// 页面加载完成后，获取所有链接数量
window.addEventListener('load', () => {
const linkCount = document.querySelectorAll('a').length
console.log(`页面包含 ${linkCount} 个链接`)
})后台脚本处理事件
编辑 entrypoints/background.ts：
typescript
// 监听插件安装事件
chrome.runtime.onInstalled.addListener(() => {
console.log('WXT插件已安装！')
})
// 监听标签页更新
chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
if (changeInfo.status === 'complete') {
console.log(`标签页 ${tabId} 加载完成`)
}
})常用的Chrome API
1. 获取当前标签页信息
typescript
const [tab] = await chrome.tabs.query({
active: true,
currentWindow: true
})
console.log(tab.url, tab.title)2. 注入脚本到页面
typescript
chrome.tabs.executeScript(tabId, {
code: "console.log('从后台注入的代码')"
})3. 存储数据
typescript
// 保存数据
await chrome.storage.sync.set({ key: 'value' })
// 读取数据
const data = await chrome.storage.sync.get('key')4. 发送消息
typescript
// 从弹窗发送消息到内容脚本
chrome.tabs.sendMessage(tabId, { action: 'hello' })
// 内容脚本监听消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === 'hello') {
sendResponse({ message: '收到了！' })
}
})打包和发布
生成生产版本
bash
npm run build生成的 dist 目录就是你的插件包，可以上传到 Chrome Web Store。
测试打包后的插件
bash
# 在Chrome中加载 dist 目录（开发者模式）
# 或压缩成 .zip 文件用于提交常见问题解答
Q: 修改代码后插件没有更新？ A: 在 chrome://extensions/ 中点击你的插件下方的刷新按钮。
Q: 如何调试插件？ A:
- 弹窗调试：右键 → 检查
- 后台脚本：在扩展程序页面点击"背景页面"链接
- 内容脚本：打开页面的开发者工具，直接在控制台调试
Q: 可以在Firefox上使用吗？ A: WXT也支持Firefox，只需在配置中启用manifest v3兼容性即可。
下一步学习
- 📚 官方文档：wxt.dev
- 🎓 构建更复杂的UI界面
- 🔐 理解内容安全策略（CSP）
- 📦 发布到Chrome Web Store
总结
WXT框架通过简洁的项目结构和自动化的构建流程，大幅降低了浏览器插件开发的入门门槛。只需5分钟，你就可以拥有一个可工作的插件项目，然后根据需求扩展功能即可。
赶快开始你的插件开发之旅吧！🚀