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/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要为我的电商工具开发一个Chrome扩展，用来快速抓取竞品价格，我希望用Vue 3和TypeScript来写。”，它会引导你使用WXT初始化一个项目，并生成包含Vue 3和TypeScript配置的基础代码结构。接着，你可以像开发普通Vue应用一样编写弹出窗口和后台脚本的逻辑，WXT会自动处理打包和manifest.json的生成。
介绍
chrome-extension-wxt 解决了使用传统方式开发浏览器扩展时，开发体验割裂、构建配置复杂、难以利用现代前端框架等问题。它提供了一个基于Vite的现代化开发框架，让开发者能够像开发普通Web应用一样，使用TypeScript、React、Vue或Svelte来构建Chrome扩展，并支持热重载和开箱即用的TypeScript支持。
使用上，开发者可以通过简单的命令行工具快速初始化项目，选择自己喜欢的前端框架，然后像开发普通应用一样编写代码。WXT会自动处理扩展的manifest文件生成、资源打包、多浏览器适配等繁琐工作，开发者只需关注业务逻辑的实现。
这个Skill非常适合需要开发浏览器扩展的前端开发者、全栈开发者以及任何希望将Web技术栈应用于浏览器插件开发的工程师。它降低了浏览器扩展的开发门槛，让熟悉现代前端生态的开发者能够快速上手。
建议在开发前，先熟悉目标浏览器扩展的API和权限模型。虽然WXT简化了开发流程，但扩展的核心逻辑和与浏览器交互的部分仍需开发者自行实现。同时，对于需要极致优化包体积或使用非常冷门构建配置的场景，可能需要深入WXT的配置进行定制。
核心特点
与传统的基于Webpack或手动配置的Chrome扩展开发方式相比，WXT深度集成了Vite，提供了极速的热重载和现代化的开发体验；同时，它原生支持React、Vue、Svelte和TypeScript，让开发者能直接用最熟悉的技术栈开发扩展，无需额外配置。
注意事项
不适合需要深度定制底层构建流程或使用非主流前端框架（如Angular）的浏览器扩展项目。
常见问题
WXT能开发Firefox扩展吗？
可以，WXT支持构建适用于Chrome、Firefox、Safari和Edge的跨浏览器扩展。
使用WXT需要先学习Vite吗？
不需要，WXT封装了Vite的配置，开箱即用，但了解Vite有助于深度定制。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/chrome-extension-wxt-x/raw/index.md 读取 chrome-extension-wxt 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/chrome-extension-wxt-x/raw/index.md（查看排版版本）