Extension Dev 是一个浏览器扩展开发技能,核心目标是“检测技术栈、查找文档、实现功能、调试”,并强调直接执行工作流,而不是仅仅给出解释。
用途 它面向 Chrome 扩展的开发与调试场景,帮助开发者识别当前项目使用的扩展框架和 UI 技术栈,找到对应的官方文档与代码风格指南,按框架约定实现功能,并在 service worker、content script、popup、options、side panel 等不同上下文中定位和排查问题。
主要能力
- 框架检测:通过检查 wxt.config.ts、crxjs.config.ts、vite.config.ts、manifest.json 以及 package.json 中的依赖,判断项目使用 WXT、CRXJS、CRXJS(Vite 插件)还是原生(Vanilla)方案。
- 文档检索:针对检测到的扩展框架和 UI 框架(React、Next.js、Vue、Svelte、SolidJS、Angular)获取官方文档与风格指南,并遵循 TypeScript、JavaScript 的 Google 代码风格指南。
- 功能实现:按框架约定添加入口点、页面、内容脚本或直接编辑 manifest.json,并参考 Chrome API 速查与消息传递模式。
- 调试:提供各上下文对应的 DevTools 访问方式,例如 service worker 通过 chrome://extensions 的 inspect 链接,content script 通过页面 DevTools 控制台选择扩展上下文,popup 通过右键检查,options/side panel 通过 F12。
- 热重载:列出 WXT、CRXJS、CRXJS(Vite)和原生方案对应的开发命令与说明。
使用方式 该技能以工作流形式执行:先运行检测命令识别框架,再获取框架文档与风格指南,然后按框架约定实现功能,最后进行调试并配置热重载。它附带多个参考文件,包括框架检测、框架风格指南、Chrome API 速查(30+ API 及权限与文档链接)、消息传递模式(含 TypeScript 示例)和调试指南。
适用场景 适用于需要开发、扩展或调试 Chrome 扩展的开发者,尤其是使用 WXT、CRXJS、Vite 或原生 manifest 的项目,以及需要在多个扩展上下文之间进行消息传递、调用 Chrome API 或排查上下文相关问题的场景。
限制 资料中未提供该技能的具体安装方式、收费模式、价格、平台支持范围或实际效果数据,这些信息暂未提供。资料中提到的 Premium 版本链接属于原文内容,其具体功能与收费情况暂未提供。