chrome-extension-wxt
使用现代化前端框架高效开发浏览器扩展
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：chrome-extension-wxt。 它的用途是：使用现代化前端框架高效开发浏览器扩展 完整的 Skill 内容见：https://321skill.com/skills/chrome-extension-wxt-x-5/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要开发一个浏览器扩展，用来高亮显示网页中的特定关键词，并支持自定义规则。请帮我用WXT框架和Vue 3初始化项目结构，并给出核心内容脚本和弹出窗口的代码示例。”，它会引导你设置项目，并生成使用Vue Composition API管理状态、与浏览器API交互的示例代码，快速启动开发。
介绍
这个技能解决了开发者使用传统、繁琐方式构建浏览器扩展的痛点。它基于WXT框架，允许开发者使用TypeScript、React、Vue或Svelte等现代前端技术栈来开发扩展，极大地提升了开发效率和代码质量。
使用时，开发者可以通过简单的命令行工具快速初始化项目、进行开发、构建和打包。WXT框架提供了开箱即用的热重载、TypeScript支持、以及针对不同浏览器（Chrome、Firefox、Safari等）的适配能力，让开发者可以专注于功能实现而非底层配置。
它非常适合前端开发、全栈开发以及任何需要为浏览器开发功能增强插件的开发者。无论是开发个人工具、企业级插件，还是希望将现有Web应用逻辑封装为扩展，都能从中受益。
建议在项目初期就确定好目标浏览器，并利用WXT良好的TypeScript支持来保证类型安全。对于需要复杂UI交互的扩展，结合React或Vue等框架能获得最佳开发体验。
核心特点
与传统的Chrome Extension Manifest V3开发方式相比，它提供了基于Vite的现代化构建体验和热重载，并且原生支持多框架（React/Vue/Svelte），让开发者可以用熟悉的Web技术栈高效开发扩展，无需从零搭建复杂的构建配置。
注意事项
对于只需要极简功能、无需现代前端框架或构建流程的超轻量级脚本型扩展，使用此技能可能显得过于重型。
常见问题
WXT和传统的Chrome扩展开发有什么区别？
WXT提供了基于Vite的现代化开发体验，支持热重载、TypeScript和多前端框架，简化了配置和构建流程。
用WXT开发的扩展能上架Firefox或Edge吗？
可以，WXT支持构建针对Chrome、Firefox、Safari和Edge等多个浏览器的扩展包。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/chrome-extension-wxt-x-5/raw/index.md 读取 chrome-extension-wxt 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/chrome-extension-wxt-x-5/raw/index.md（查看排版版本）