chrome-extension-wxt
使用WXT框架快速构建浏览器扩展，支持主流前端框架。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：chrome-extension-wxt。 它的用途是：使用WXT框架快速构建浏览器扩展，支持主流前端框架。 完整的 Skill 内容见：https://321skill.com/skills/chrome-extension-wxt-x-6/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我想用Vue 3开发一个拦截网页广告的浏览器扩展，请帮我用WXT初始化项目并说明核心文件结构。’，它会提供创建项目的具体命令，并解释background scripts、content scripts和popup页面在WXT项目中的组织方式，以及如何开始编写你的广告拦截逻辑。
介绍
这个Skill旨在解决开发者在构建Chrome浏览器扩展时面临的复杂配置和跨浏览器兼容性问题。它基于WXT框架，将现代前端开发体验引入浏览器扩展开发，让开发者可以像开发普通Web应用一样，使用TypeScript、React、Vue或Svelte等熟悉的技术栈来构建扩展。
使用方式非常直观。开发者只需通过Skill获取初始化命令，即可快速创建一个结构清晰、配置完善的扩展项目脚手架。在开发过程中，Skill可以提供框架API的使用指导、构建配置优化建议以及针对不同前端框架的特定开发模式。
它非常适合需要开发浏览器扩展的前端开发者和全栈开发者，特别是那些希望利用现有前端技术栈、追求高效开发和现代化工具链的团队。对于希望扩展产品功能、开发跨浏览器插件的产品团队也同样适用。
建议在使用前对目标浏览器扩展的API有基本了解。虽然WXT简化了构建过程，但扩展的核心功能逻辑和与浏览器交互的部分仍需开发者实现。此外，对于需要支持非常古老浏览器版本的项目，可能需要额外关注polyfill和兼容性处理。
核心特点
与直接使用原生Chrome扩展API或Manifest V3手动配置相比，它通过WXT框架提供了开箱即用的现代化前端开发体验和构建流程，显著降低了配置复杂度。相比于其他扩展开发脚手架，WXT对Vue 3和Svelte等框架的支持更原生、更完善，且内置了热重载和优化构建。
注意事项
不适合需要深度定制底层浏览器API交互逻辑或必须完全遵循特定、非标准构建流程的项目。
常见问题
WXT和Vite插件开发浏览器扩展有什么区别？
WXT是专为浏览器扩展设计的完整框架，内置了扩展特有的构建优化和多浏览器适配，而Vite插件通常只处理基础构建，需要更多手动配置。
用这个Skill开发的扩展能上架Firefox吗？
可以，WXT支持输出跨浏览器兼容的扩展包，但上架前仍需根据各商店规范进行微调和测试。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/chrome-extension-wxt-x-6/raw/index.md 读取 chrome-extension-wxt 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/chrome-extension-wxt-x-6/raw/index.md（查看排版版本）