extension-dev

扩展开发

🚀 升级到 Premium 在 https://app.extensionbooster.net/dashboard/services/extension-ai-kit 获取 Premium 版本

检测技术栈、查找文档、实现功能、调试。不要只做解释——执行整个工作流。

工作流（执行此流程）

步骤 1：检测框架和 UI 技术栈

运行检测（参见 references/framework-detection.md）：

ls wxt.config.ts crxjs.config.ts vite.config.ts manifest.json 2>/dev/null
cat package.json | grep -E '"wxt|crxjs|crxjs|react|vue|svelte"'

找到的文件	框架
wxt.config.ts	WXT
package.json 包含 crxjs	CRXJS
vite.config 包含 @crxjs	CRXJS
根目录中有 manifest.json，且以上文件均不存在	Vanilla

步骤 2：获取框架文档和风格指南

使用 docs-seeker 技能或网页搜索，查找适用于检测到的技术栈的文档。

扩展框架文档：

• WXT：https://wxt.dev/ | CRXJS：https://docs.crxjs.com/ | CRXJS：Vite 插件文档
• Chrome API：https://developer.chrome.com/docs/extensions/reference/api
• 权限：https://developer.chrome.com/docs/extensions/reference/permissions-list

UI 框架文档（根据检测到的框架获取）：

框架	文档	风格指南
React	https://react.dev	https://react.dev/learn
Next.js	https://nextjs.org/docs	https://nextjs.org/docs/app
Vue	https://vuejs.org/guide	https://vuejs.org/style-guide
Svelte	https://svelte.dev/docs	https://svelte.dev/docs
SolidJS	https://solidjs.com/docs	https://solidjs.com/guides
Angular	https://angular.dev/guide	https://angular.dev/style-guide

代码风格指南（始终遵循）：

• TypeScript：https://google.github.io/styleguide/tsguide.html
• JavaScript：https://google.github.io/styleguide/jsguide.html

步骤 3：实现功能

遵循框架惯例：

• WXT：在 entrypoints/ 中添加入口点，配置 wxt.config.ts
• CRXJS：添加页面/标签页/内容脚本，使用 CSUI 构建内容 UI
• CRXJS：采用标准的 Vite + 基于 manifest 的配置
• Vanilla：编辑 manifest.json，直接添加 JS 文件

使用 Chrome API 时，请查阅 references/chrome-api-quick-reference.md。 如需在不同上下文之间进行消息传递，请查阅 references/message-passing-patterns.md。

步骤 4：调试

有关特定上下文的 DevTools 访问方式，请参阅 references/debugging-guide.md。

快速参考：

上下文	检查方法
Service worker	chrome://extensions →“inspect”链接
内容脚本	页面 DevTools → Console → 选择扩展程序上下文
弹出窗口	右键点击弹出窗口 → 检查
选项 / 侧边栏	打开页面 → F12

步骤 5：设置热重载

框架	命令	备注
WXT	pnpm dev	完整 HMR，自动重新加载扩展程序
CRXJS	pnpm dev	弹出窗口/内容脚本的 HMR
CRXJS	vite dev	Vite HMR
Vanilla	手动	在 chrome://extensions 中重新加载

---

Chrome API 快速参考（前 20 项）

API	用途	权限
chrome.tabs	查询、创建和更新标签页	tabs
chrome.windows	管理浏览器窗口	windows
chrome.storage.local	在本地持久化数据	storage
chrome.storage.sync	在设备间同步数据	storage
chrome.storage.session	仅限会话的数据	storage
chrome.action	工具栏图标、弹出窗口、徽章	—
chrome.contextMenus	右键菜单项	contextMenus
chrome.sidePanel	侧边栏 UI	sidePanel
chrome.notifications	桌面通知	notifications
chrome.scripting	向页面注入脚本/CSS	scripting
chrome.runtime	消息传递、生命周期、清单	—
chrome.webRequest	拦截/修改网络请求	webRequest
chrome.declarativeNetRequest	以声明方式阻止/重定向请求	declarativeNetRequest
chrome.webNavigation	跟踪页面导航事件	webNavigation
chrome.identity	OAuth2、Google 登录	identity
chrome.alarms	安排定期任务	alarms
chrome.commands	键盘快捷键	commands
chrome.cookies	读取/写入 Cookie	cookies
chrome.history	访问浏览器历史记录	history
chrome.bookmarks	读取/写入书签	bookmarks

---

消息传递（快速模式）

一次性（弹出窗口 → service worker）：

// sender
const response = await chrome.runtime.sendMessage({ type: "GET_DATA" });

// receiver (background)
chrome.runtime.onMessage.addListener((msg, sender, reply) => {
  if (msg.type === "GET_DATA") {
    reply({ data: "..." });
    return true;
  }
});

内容脚本 → service worker： 使用相同模式，异步时使用 return true。 针对特定标签页（后台 → 内容脚本）：

chrome.tabs.sendMessage(tabId, { type: "ACTION" });

完整模式请参阅 references/message-passing-patterns.md。

---

参考资料

• references/framework-detection.md — 检测 WXT/CRXJS/CRXJS/vanilla、开发命令
• references/framework-styleguides.md — UI 框架文档、风格指南、扩展框架文档
• references/chrome-api-quick-reference.md — 30 多个 API 及其权限和文档链接
• references/message-passing-patterns.md — 所有消息传递模式及 TypeScript 示例
• references/debugging-guide.md — 各上下文的 DevTools、常见错误和提示

相关技能

• extension-create — 使用 WXT 搭建新扩展的框架
• extension-manifest — 生成/验证 manifest.json
• extension-test — 编写和运行扩展测试
• extension-analyze — 分析现有扩展代码库