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-2/raw/index.md 请读取该页面内容,如果是 SKILL.md 格式直接安装,如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接,AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要开发一个Chrome扩展,用来高亮显示网页中的特定关键词,并支持自定义颜色。请帮我用WXT和Vue 3初始化项目结构。”,它会引导你执行初始化命令,生成一个包含popup、content script和options页面的Vue 3项目模板,并解释如何开始编写高亮逻辑。或者
对AI说:“我的扩展在Firefox上运行报错,如何用WXT进行跨浏览器调试?”,它会提供针对Firefox的构建配置建议和调试技巧。
介绍
该Skill解决了开发者使用传统Chrome扩展开发方式时,面临的项目结构复杂、构建流程繁琐、多框架支持不佳以及跨浏览器适配困难等问题。它通过集成WXT框架,提供了一套开箱即用的现代化开发环境,支持TypeScript、React、Vue和Svelte等主流前端框架,并内置了热重载、代码分割、自动生成manifest等高效开发功能。
使用时,开发者只需通过简单的命令初始化项目,即可获得一个结构清晰、配置完善的扩展项目模板。Skill会引导你选择偏好的前端框架,并自动配置好相关的构建和开发服务器。在开发过程中,你可以像开发普通Web应用一样编写组件和逻辑,Skill会自动处理扩展特有的manifest配置、资源打包和跨浏览器适配等底层细节。
它非常适合需要快速构建高质量浏览器扩展的前端开发、全栈开发和智能体开发者。无论是希望将现有Web应用功能封装为扩展,还是从零开始开发全新的浏览器增强工具,该Skill都能显著提升开发效率和代码质量。对于产品经理和项目经理,它也能帮助快速验证扩展功能原型。
建议在项目初期就明确扩展的核心功能和目标浏览器,以便充分利用Skill的跨浏览器构建能力。注意,虽然Skill简化了开发流程,但开发者仍需对浏览器扩展的API和安全模型有基本了解,以确保最终产出的扩展安全可靠。
核心特点
与直接使用原生Chrome扩展API或其它构建工具相比,它深度集成了WXT框架,提供了对TypeScript、React、Vue、Svelte四大现代前端框架的一等公民支持,并内置了针对浏览器扩展开发的优化构建流程和跨浏览器适配能力。
注意事项
不适合需要深度定制底层构建流程或仅支持特定老旧浏览器(如IE)的扩展开发场景。
常见问题
WXT和Vite/Webpack开发浏览器扩展有什么区别?
WXT是专为浏览器扩展优化的框架,内置了manifest生成、跨浏览器构建、内容脚本热重载等扩展开发特定功能,开箱即用,无需复杂配置。
用这个Skill开发的扩展能上架Firefox或Edge商店吗?
可以。WXT框架支持输出Chrome、Firefox、Safari、Edge等多浏览器格式的扩展包,通过配置可轻松适配不同商店的要求。
给 AI 助手的安装指引
如果你的 AI 编程助手(Claude Code、Cursor、TRAE 等)能看到这个页面,把下面这段发给它即可自动完成安装:
请访问 https://321skill.com/skills/chrome-extension-wxt-x-2/raw/index.md 读取 chrome-extension-wxt 的原始 Skill 定义(Markdown 格式),按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址:/skills/chrome-extension-wxt-x-2/raw/index.md(查看排版版本)