chrome-extension-wxt
基于WXT框架，使用现代前端技术栈开发浏览器扩展。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：chrome-extension-wxt。 它的用途是：基于WXT框架，使用现代前端技术栈开发浏览器扩展。 完整的 Skill 内容见：https://321skill.com/skills/chrome-extension-wxt/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我想用 Vue 3 和 TypeScript 开发一个能高亮网页代码的 Chrome 扩展，请帮我初始化一个 WXT 项目。'，它会引导你使用 `npm create wxt@latest` 命令创建项目，并生成包含 Vue 3 组件、TypeScript 配置和基础 manifest 文件的脚手架，让你能立即开始编写高亮逻辑和弹出界面。
介绍
chrome-extension-wxt 是一个基于 WXT 框架的浏览器扩展开发工具，它解决了开发者使用现代前端技术栈（如 TypeScript、React、Vue、Svelte）高效构建 Chrome 扩展的难题。传统扩展开发往往需要复杂的配置和手动处理模块打包，而 WXT 提供了开箱即用的项目脚手架和构建流程，极大地简化了开发步骤。
使用该技能，开发者可以通过简单的命令行工具快速初始化一个扩展项目，并利用熟悉的框架和语言进行开发。WXT 会自动处理扩展的清单文件生成、资源打包、热重载以及针对不同浏览器（如 Chrome、Firefox）的构建输出，让开发者能专注于功能实现。
该技能非常适合前端开发、全栈开发以及希望涉足浏览器扩展领域的智能体开发工程师。对于需要为现有 Web 应用增加浏览器侧功能，或希望开发独立浏览器工具（如内容增强、自动化脚本、信息聚合插件）的团队和个人而言，这是一个高效的起点。
建议在开始前，确保对所选的前端框架（React/Vue/Svelte）和 TypeScript 有基本了解。由于 WXT 旨在简化跨浏览器扩展开发，在开发涉及特定浏览器高级 API 或复杂后台服务的功能时，仍需查阅相应浏览器的官方文档进行适配。
核心特点
与传统的基于 webpack 或手动配置的扩展开发方式相比，WXT 提供了零配置的现代化开发体验，深度集成了 TypeScript 和主流前端框架，并原生支持热重载和多浏览器构建，大幅提升了开发效率和体验。
注意事项
不适合需要深度定制底层构建流程或依赖非常小众前端工具链的项目。
常见问题
WXT 和 Plasmo 有什么区别？
WXT 和 Plasmo 都是现代浏览器扩展开发框架，但 WXT 在构建配置上更灵活，对 Vue 和 Svelte 的支持更原生，且不强制绑定特定的 UI 库。
能用 WXT 开发 Firefox 扩展吗？
可以，WXT 支持输出针对 Chrome、Firefox、Safari 等不同浏览器的扩展包，通过配置即可实现跨浏览器构建。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/chrome-extension-wxt/raw/index.md 读取 chrome-extension-wxt 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/chrome-extension-wxt/raw/index.md（查看排版版本）