关于 arch-webext-vue
这组技能面向使用 Vitesse WebExt 创建和维护浏览器扩展的开发者，该脚手架基于 Vite、Vue 3 和 TypeScript。内容涵盖扩展结构、构建发布流程、存储、消息传递与测试。
主要功能
- 01项目结构与 manifest 指南
- 02多配置 Vite 构建
- 03弹出窗口、选项页和侧边栏视图
- 04存储与跨上下文消息传递
- 05测试与打包流程
适用场景
- 01使用 Vitesse WebExt 启动扩展项目
- 02构建弹出窗口和内容脚本视图
- 03在扩展上下文间共享数据
- 04测试和打包扩展
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/arch-webext-vue确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
GENERATION.mdassets/ci.ymlreferences/best-practices-setup-patterns.mdbest-practices-type-safe-messaging.mdcore-ci.mdcore-manifest.mdcore-overview.mdcore-project-structure.mdfeatures-background.mdfeatures-components-icons.mdfeatures-content-script.mdfeatures-cross-context.mdfeatures-dev-workflow.mdfeatures-pack-release.mdfeatures-storage.mdfeatures-testing.mdfeatures-types-and-env.mdfeatures-views.mdfeatures-vite-build.md详细介绍
arch-webext-vue 技能涵盖 Vitesse WebExt：一个由 Vite 驱动的 WebExtension 起步模板，使用 Vue 3、TypeScript、UnoCSS 和 webext-bridge。它使用多入口 Vite 处理 popup/options/sidepanel，为 background 和 content script 使用独立配置，动态生成 manifest，并采用共享的 setup 和存储模式。在使用此技术栈创建或维护浏览器扩展时，可使用这些技能。
该技能基于 vitesse-webext（antfu-collective/vitesse-webext），生成于 2026-01-30。
核心参考
| 主题 | 描述 | 参考 |
|---|---|---|
| 概述 | 特性、技术栈、适用场景 | core-overview |
| 项目结构 | 文件夹、入口点、脚本 | core-project-structure |
| Manifest | 动态 manifest、MV3、Firefox 与 Chrome | core-manifest |
| CI | GitHub Actions — lint、typecheck、build、test、可选 E2E | core-ci |
特性
| 主题 | 描述 | 参考 |
|---|---|---|
| Vite 构建 | 多配置、共享配置、background/content、开发 stub | features-vite-build |
| Background | 入口、webext-bridge、侧边栏、content script HMR | features-background |
| Content script | 入口、shadow DOM 中的 Vue、样式 | features-content-script |
| 视图 | Popup、options、sidepanel——入口模式、setupApp | features-views |
| 存储 | useWebExtensionStorage、共享逻辑 | features-storage |
| 跨上下文 | 上下文之间的 webext-bridge 消息传递 | features-cross-context |
| 开发工作流 | pnpm dev 与 dev-firefox、加载扩展、stub HTML | features-dev-workflow |
| 打包与发布 | pack:zip、crx、xpi、clear、start:chromium/firefox | features-pack-release |
| 测试 | Vitest 单元测试、Playwright E2E、fixtures、extensionId | features-testing |
| 类型与环境 | DEV、NAME、global/shim/modules.d.ts、env.ts | features-types-and-env |
| 组件与图标 | 自动导入组件和图标、Iconify | features-components-icons |
最佳实践
| 主题 | 描述 | 参考 |
|---|---|---|
| Setup 模式 | setupApp、common-setup、共享组件/样式 | best-practices-setup-patterns |
| 类型安全的消息传递 | shim.d.ts 中用于 webext-bridge 的 ProtocolMap | best-practices-type-safe-messaging |
评论
支持 Markdown