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-4/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我用WXT初始化一个Chrome扩展项目，使用TypeScript和React，并添加一个能在当前页面显示弹窗的按钮功能。”，它会引导你创建项目结构，并生成调用浏览器API弹出通知或侧边栏的相关组件代码。
介绍
WXT是一个现代化的浏览器扩展开发框架，它解决了传统浏览器扩展开发中配置复杂、构建流程繁琐、跨浏览器兼容性差等痛点。它基于Vite构建，集成了热重载、TypeScript开箱即用等特性，让开发者能像开发现代Web应用一样高效地开发扩展。
通过WXT，你可以使用TypeScript、React、Vue或Svelte等熟悉的现代前端技术栈来编写扩展的UI和逻辑。框架提供了统一的API来调用浏览器扩展能力，并内置了构建工具，能一键打包生成适用于Chrome、Firefox、Edge等多个浏览器的扩展包，极大简化了跨平台适配工作。
它非常适合需要开发浏览器扩展的前端开发者、全栈开发者以及希望为现有产品增加浏览器插件功能的团队。无论是开发提升效率的工具、内容拦截器，还是与网页深度交互的增强插件，WXT都能提供高效的开发体验。
使用建议是，在开始前先熟悉目标浏览器的扩展API文档。虽然WXT做了封装，但理解底层API有助于更好地设计功能。注意，WXT主要关注开发体验和构建流程，对于复杂的扩展后台服务（background service）逻辑，仍需开发者自行规划和管理其生命周期与通信机制。
核心特点
与直接使用原生Manifest V3或其它脚手架相比，WXT深度集成Vite，提供了极佳的热重载和构建体验，并原生支持多框架（React/Vue/Svelte）和多浏览器输出，将扩展开发体验提升到与现代前端应用开发一致的水平。
注意事项
不适合需要深度定制底层构建流程或仅开发单一浏览器且无需现代前端框架的极简扩展场景。
常见问题
WXT支持开发哪些浏览器的扩展？
支持Chrome、Firefox、Safari、Edge等主流浏览器。
可以用WXT开发基于Vue 3的扩展吗？
可以，WXT完美支持Vue 3作为前端UI框架。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/chrome-extension-wxt-x-4/raw/index.md 读取 chrome-extension-wxt 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/chrome-extension-wxt-x-4/raw/index.md（查看排版版本）