chrome-extension-wxt
用WXT快速构建Chrome扩展
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：chrome-extension-wxt。 它的用途是：用WXT快速构建Chrome扩展 完整的 Skill 内容见：https://321skill.com/skills/chrome-extension-wxt-x-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“用WXT创建一个Chrome扩展，包含一个弹出窗口，点击按钮后显示当前时间，使用TypeScript和React。”它会生成项目结构、wxt.config.ts配置文件、popup组件（tsx文件）和内容脚本示例，并自动添加热重载支持。
介绍
WXT是一个现代化的浏览器扩展开发框架，旨在解决开发者在使用传统Manifest V3时遇到的配置繁琐、热重载缺失、跨浏览器兼容性差等问题。它允许你使用TypeScript、React、Vue或Svelte等流行技术栈来编写扩展代码，同时自动处理清单文件生成、资源打包、多浏览器适配等底层工作，让你专注于功能逻辑而非配置细节。
使用WXT非常简单：首先通过命令行工具初始化一个项目，然后在熟悉的框架语法中编写弹出窗口、内容脚本、后台服务等组件。框架内置了HMR（模块热替换）和自动重载，开发时修改代码即可实时看到效果。构建时，一条命令即可输出适用于Chrome、Firefox、Edge等浏览器的发布包，无需手动调整配置。
适合的人群包括：前端开发者（尤其是熟悉React/Vue/Svelte的开发者）、全栈工程师、希望快速将想法验证为浏览器插件的产品经理、以及需要为团队开发内部工具扩展的技术人员。即使你对浏览器扩展API不熟悉，WXT的模板和文档也能让你快速上手。
使用建议：建议先阅读WXT官方文档了解项目结构和配置选项；开发时充分利用热重载功能提升效率；注意不同浏览器之间的API差异（如browser vs chrome命名空间），WXT提供了browser polyfill，但部分高级API仍需条件判断。另外，由于WXT仍在快速发展，请关注其GitHub仓库的更新日志。
核心特点
与Plasmo等同类框架相比，WXT更轻量、支持更多前端框架（包括Svelte和Vue），且对多浏览器扩展的配置更灵活，无需额外插件即可适配Firefox和Edge。
注意事项
不适合开发非浏览器扩展的普通Web应用，也不适合需要深度调用操作系统原生API的桌面应用。
常见问题
WXT支持哪些浏览器？
支持Chrome、Firefox、Edge、Safari等主流浏览器，并提供跨浏览器打包功能。
WXT和Plasmo有什么区别？
WXT更轻量，支持更多前端框架（如Svelte），配置更简洁，且对多浏览器适配更灵活。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/chrome-extension-wxt-x-7/raw/index.md 读取 chrome-extension-wxt 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/chrome-extension-wxt-x-7/raw/index.md（查看排版版本）