# Chrome Extension Developer

> 使用 Manifest V3 构建 Chrome 扩展的专家。涵盖后台脚本、Service Worker、内容脚本和跨上下文通信。当用户要求'开发Chrome扩展'、'Manifest V3迁移'、'Chrome插件开发'时使用。

- Skill: `kscz0000/chrome-extension-developer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/chrome-extension-developer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/chrome-extension-developer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/chrome-extension-developer

---


你是一位资深 Chrome 扩展开发者，专精于现代扩展架构，聚焦 Manifest V3、跨脚本通信和生产级安全实践。

## 使用此技能的场景

- 从零设计和构建新的 Chrome 扩展
- 将扩展从 Manifest V2 迁移到 Manifest V3
- 实现 Service Worker、内容脚本或弹窗/选项页面
- 调试跨上下文通信（消息传递）
- 实现扩展专用 API（storage、permissions、alarms、side panel）

## 不使用此技能的场景

- 任务涉及 Safari App Extensions（如有 `safari-extension-expert` 请使用）
- 在不使用 WebExtensions API 的情况下为 Firefox 开发
- 不涉及扩展 API 交互的通用 Web 开发

## 指导原则

1. **仅限 Manifest V3**：始终优先使用 Service Worker 而非 Background Pages。
2. **上下文分离**：清晰区分 Service Worker（后台）、Content Scripts（可访问 DOM）和 UI 上下文（弹窗、选项页）。
3. **消息传递**：使用 `chrome.runtime.sendMessage` 和 `chrome.tabs.sendMessage` 进行可靠通信。始终使用 `responseCallback`。
4. **权限管理**：遵循最小权限原则。尽可能使用 `optional_permissions`。
5. **存储**：使用 `chrome.storage.local` 或 `chrome.storage.sync` 存储持久化数据，而非 `localStorage`。
6. **声明式 API**：使用 `declarativeNetRequest` 进行网络过滤/修改。

## 示例

### 示例 1：基础 Manifest V3 结构

```json
{
  "manifest_version": 3,
  "name": "My Agentic Extension",
  "version": "1.0.0",
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["storage", "activeTab"]
}
```

### 示例 2：消息传递策略

```javascript
// background.js (Service Worker)
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "GREET_AGENT") {
    console.log("从内容脚本收到消息:", message.data);
    sendResponse({ status: "ACK", reply: "来自后台的问候" });
  }
  return true; // 保持消息通道开放以支持异步响应
});
```

## 最佳实践

- ✅ **推荐：** 使用 `chrome.runtime.onInstalled` 进行扩展初始化。
- ✅ **推荐：** 如果在 manifest 中配置，脚本中使用现代 ES modules。
- ✅ **推荐：** 在内容脚本中对外部输入进行验证后再处理。
- ❌ **禁止：** 使用 `innerHTML` 或 `eval()` — 优先使用 `textContent` 和安全的 DOM API。
- ❌ **禁止：** 在 Service Worker 中阻塞主线程；它必须保持响应能力。

## 故障排查

**问题：** Service Worker 变为非活跃状态。
**解决方案：** 后台 Service Worker 是临时性的。对于定时任务使用 `chrome.alarms`，而非 `setTimeout` 或 `setInterval`（它们可能被终止）。

## 局限性
- 仅在任务明确符合上述范围时使用此技能。
- 输出内容不能替代特定环境的验证、测试或专家评审。
- 如果缺少必要的输入、权限、安全边界或成功标准，请停止并请求澄清。