extension-dev

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Extension Dev

Chrome扩展开发

Detect the stack, find docs, implement the feature, debug. Do NOT just explain — execute the workflow.

检测技术栈、查找文档、实现功能、调试。请勿仅做解释——请执行以下工作流程。

Workflow (Execute This)

工作流程（请执行以下步骤）

Step 1: Detect framework and UI stack

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

Run detection (see

references/framework-detection.md

bash

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

File found	Framework
`wxt.config.ts`	WXT
`package.json` has `plasmo`	Plasmo
`vite.config` has `@crxjs`	CRXJS
`manifest.json` in root, none above	Vanilla

运行检测脚本（详见

references/framework-detection.md

）：

bash

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

找到的文件	框架
`wxt.config.ts`	WXT
`package.json` 中包含 `plasmo`	Plasmo
`vite.config` 中包含 `@crxjs`	CRXJS
根目录下有 `manifest.json` ，且无上述文件	原生（Vanilla）

Step 2: Fetch framework docs and style guides

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

Use

docs-seeker

skill or web search to find proper docs for the detected stack.

Extension framework docs:

WXT: https://wxt.dev/ | Plasmo: https://docs.plasmo.com/ | CRXJS: Vite plugin docs
Chrome APIs: https://developer.chrome.com/docs/extensions/reference/api
Permissions: https://developer.chrome.com/docs/extensions/reference/permissions-list

UI framework docs (fetch based on detected framework):

Framework	Docs	Style Guide
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

Code style guides (always follow):

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

使用

docs-seeker

技能或网页搜索，为检测到的技术栈查找合适的文档。

扩展框架文档：

WXT: https://wxt.dev/ | Plasmo: https://docs.plasmo.com/ | CRXJS: Vite插件文档
Chrome APIs: 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

Step 3: Implement the feature

步骤3：实现功能

Follow framework conventions:

WXT: add entrypoints in
```
entrypoints/
```
, configure
```
wxt.config.ts
```
Plasmo: add pages/tabs/contents, use CSUI for content UI
CRXJS: standard Vite + manifest-based setup
Vanilla: edit
```
manifest.json
```
, add JS files directly

For Chrome API usage, check

references/chrome-api-quick-reference.md

. For messaging between contexts, check

references/message-passing-patterns.md

遵循框架约定：

WXT: 在
```
entrypoints/
```
目录下添加入口文件，配置
```
wxt.config.ts
```
Plasmo: 添加pages/tabs/contents，使用CSUI构建内容UI
CRXJS: 标准Vite + 基于manifest的配置
原生（Vanilla）: 编辑
```
manifest.json
```
，直接添加JS文件

关于Chrome API的使用，请查看

references/chrome-api-quick-reference.md

。关于上下文间的消息传递，请查看

references/message-passing-patterns.md

。

Step 4: Debug

步骤4：调试

See

references/debugging-guide.md

for context-specific DevTools access.

Quick map:

Context	How to inspect
Service worker	`chrome://extensions` → "inspect" link
Content script	Page DevTools → Console → select extension context
Popup	Right-click popup → Inspect
Options / Side panel	Open page → F12

查看

references/debugging-guide.md

获取各上下文环境的DevTools访问方法。

快速指南：

上下文环境	检查方法
Service worker	`chrome://extensions` → 点击“inspect”链接
Content script	页面DevTools → 控制台 → 选择扩展上下文
Popup	右键点击popup → 检查
选项 / 侧边栏	打开页面 → 按F12

Step 5: Hot reload setup

步骤5：热重载配置

Framework	Command	Notes
WXT	`pnpm dev`	Full HMR, auto-reloads extension
Plasmo	`pnpm dev`	HMR for popup/content
CRXJS	`vite dev`	Vite HMR
Vanilla	Manual	Reload at `chrome://extensions`

框架	命令	说明
WXT	`pnpm dev`	完整HMR，自动重载扩展
Plasmo	`pnpm dev`	支持popup/content的HMR
CRXJS	`vite dev`	Vite HMR
原生（Vanilla）	手动操作	在 `chrome://extensions` 页面重载

Chrome API Quick Reference (Top 20)

Chrome API速查（Top 20）

API	Purpose	Permission
`chrome.tabs`	Query, create, update tabs	`tabs`
`chrome.windows`	Manage browser windows	`windows`
`chrome.storage.local`	Persist data locally	`storage`
`chrome.storage.sync`	Sync data across devices	`storage`
`chrome.storage.session`	Session-only data	`storage`
`chrome.action`	Toolbar icon, popup, badge	—
`chrome.contextMenus`	Right-click menu items	`contextMenus`
`chrome.sidePanel`	Side panel UI	`sidePanel`
`chrome.notifications`	Desktop notifications	`notifications`
`chrome.scripting`	Inject scripts/CSS into pages	`scripting`
`chrome.runtime`	Messaging, lifecycle, manifest	—
`chrome.webRequest`	Intercept/modify network requests	`webRequest`
`chrome.declarativeNetRequest`	Block/redirect requests declaratively	`declarativeNetRequest`
`chrome.webNavigation`	Track page navigation events	`webNavigation`
`chrome.identity`	OAuth2, Google Sign-In	`identity`
`chrome.alarms`	Schedule periodic tasks	`alarms`
`chrome.commands`	Keyboard shortcuts	`commands`
`chrome.cookies`	Read/write cookies	`cookies`
`chrome.history`	Browser history access	`history`
`chrome.bookmarks`	Read/write bookmarks	`bookmarks`

API	用途	权限
`chrome.tabs`	查询、创建、更新标签页	`tabs`
`chrome.windows`	管理浏览器窗口	`windows`
`chrome.storage.local`	本地持久化存储数据	`storage`
`chrome.storage.sync`	跨设备同步数据	`storage`
`chrome.storage.session`	会话级临时数据存储	`storage`
`chrome.action`	工具栏图标、popup、徽章	—
`chrome.contextMenus`	右键菜单项	`contextMenus`
`chrome.sidePanel`	侧边栏UI	`sidePanel`
`chrome.notifications`	桌面通知	`notifications`
`chrome.scripting`	向页面注入脚本/CSS	`scripting`
`chrome.runtime`	消息传递、生命周期、manifest	—
`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`

Message Passing (Quick Pattern)

消息传递（快速模式）

One-time (popup → 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; }
});

Content script → service worker: same pattern,

return true

for async. Tab-targeted (background → content):

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

Full patterns in

references/message-passing-patterns.md

一次性消息（popup → service worker）：

// 发送方
const response = await chrome.runtime.sendMessage({ type: 'GET_DATA' });

// 接收方（后台）
chrome.runtime.onMessage.addListener((msg, sender, reply) => {
  if (msg.type === 'GET_DATA') { reply({ data: '...' }); return true; }
});

Content script → service worker： 模式相同，异步场景需

return true

。 定向标签页（后台 → content）：

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

完整模式请查看

references/message-passing-patterns.md

。

References

参考资料

```
references/framework-detection.md
```
— detect WXT/Plasmo/CRXJS/vanilla, dev commands
```
references/framework-styleguides.md
```
— UI framework docs, style guides, extension framework docs
```
references/chrome-api-quick-reference.md
```
— 30+ APIs with permissions and doc links
```
references/message-passing-patterns.md
```
— all messaging patterns with TypeScript examples
```
references/debugging-guide.md
```
— DevTools per context, common errors, tips

```
references/framework-detection.md
```
— 检测WXT/Plasmo/CRXJS/原生扩展，开发命令
```
references/framework-styleguides.md
```
— UI框架文档、风格指南、扩展框架文档
```
references/chrome-api-quick-reference.md
```
— 30+个API，包含权限与文档链接
```
references/message-passing-patterns.md
```
— 所有消息传递模式，附TypeScript示例
```
references/debugging-guide.md
```
— 各上下文环境的DevTools使用、常见错误与技巧