用途:该技能用于脚手架化并搭建生产可用的 Chrome MV3 扩展,技术栈为 WXT + React + TypeScript + shadcn-UI,适合创建新浏览器扩展或初始化扩展项目。
主要能力:按需求选择扩展组件,包括后台 Service Worker、内容脚本、侧边栏、弹窗、选项页和 DevTools 面板;生成标准项目结构(entrypoints、content、lib、components 等);提供 WXT 配置、消息协议、存储封装、原生消息适配、内容脚本插入文本、Shadow DOM UI、站点专用脚本(如 Google Docs、Overleaf 提取)等常见模式;并包含 Vitest 单元测试与 Playwright E2E 测试示例,以及构建与打包脚本。
使用方式:快速开始命令为 pnpm dlx wxt@latest init <project-name> --template react,随后 cd <project-name>、pnpm install、pnpm dev。UI 部分可执行 pnpm add -D tailwindcss postcss autoprefixer、pnpm dlx tailwindcss init -p,再用 pnpm dlx shadcn@latest init 与 pnpm dlx shadcn@latest add button card toast badge 添加组件。构建脚本包括 wxt build、wxt zip,Firefox 可用 wxt -b firefox。
适用场景:需要快速搭建 MV3 扩展骨架、在扩展中集成 React UI、处理跨上下文消息与存储、编写内容脚本或侧边栏交互时。
限制:资料未提供收费、价格、平台兼容性细节或实际效果说明;部分示例(如 Google Docs 光标上下文、标题提取)标注为实现依赖 DOM 结构,未给出完整实现。