chrome-extension-wxt
用WXT框架构建Chrome扩展的AI助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：chrome-extension-wxt。 它的用途是：用WXT框架构建Chrome扩展的AI助手 完整的 Skill 内容见：https://321skill.com/skills/chrome-extension-wxt-x-3/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'用WXT框架创建一个Chrome扩展，popup中有一个输入框和一个按钮，点击按钮将输入内容保存到storage，并在content script中显示到当前页面。' 它会自动生成manifest.json、popup组件（React/Vue/Svelte可选）、content script代码，以及读取/写入storage的逻辑，并配置好对应的权限。
介绍
这个Skill解决的是浏览器扩展开发中的重复性工作，比如项目初始化、多框架配置、跨浏览器兼容性适配等。你无需手动搭建Webpack或Vite配置，也不用反复编写扩展的manifest文件，它可以根据你的需求快速生成完整的扩展骨架。
使用时，只需用自然语言描述你的扩展功能（例如“创建一个点击后保存当前页面链接的Chrome扩展”），Skill会自动生成基于WXT框架的项目结构，并默认集成TypeScript、CSS模块以及你选择的UI框架（React/Vue/Svelte）。它还会帮你处理popup、content script、background script等核心模块的代码模板。
适合前端开发者、全栈开发者以及需要快速验证浏览器扩展产品想法的产品经理。尤其推荐给那些熟悉React/Vue但没写过Chrome扩展的开发者，它可以抹平知识门槛，让你专注于业务逻辑而非构建工具。
使用建议：最好先了解WXT的基本概念（如入口文件、权限声明），这样生成的代码你能快速上手修改。如果扩展需要特殊权限（如tabs、storage），在描述功能时明确提及，Skill会自动在manifest中配置。注意它不处理复杂的原生API调用（如直接操作USB设备），这类需求建议手动编码。
核心特点
相比其他浏览器扩展生成工具，本Skill深度集成WXT框架，支持TypeScript/React/Vue/Svelte多种前端栈，且自动生成跨浏览器兼容的manifest v3配置，无需手动适配Chrome/Firefox/Edge。
注意事项
不适合需要大量原生系统API（如串口、蓝牙）或非浏览器扩展场景（如Node.js插件、桌面应用）。
常见问题
WXT框架支持哪些浏览器？
WXT支持Chrome、Firefox、Edge、Safari等主流浏览器，生成时自动处理manifest差异。
我可以用Vue或Svelte开发扩展吗？
可以，本Skill支持React、Vue、Svelte三种框架，生成时按需选择即可。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/chrome-extension-wxt-x-3/raw/index.md 读取 chrome-extension-wxt 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/chrome-extension-wxt-x-3/raw/index.md（查看排版版本）