mcpField
C
chrome-extension-developer

chrome-extension-developer

github.com/sickn33开发48.7k179 次安装今天更新
代码仓库

关于 chrome-extension-developer

用于构建和维护 Chrome Extensions 的开发技能,重点关注 Manifest V3 架构与安全实践。为扩展开发者提供脚本、消息传递、权限、存储和调试方面的指导。

主要功能

  1. 01Manifest V3 架构指导
  2. 02Service worker 与内容脚本模式
  3. 03跨上下文消息传递
  4. 04最小权限实践
  5. 05扩展存储指导
  6. 06故障排查与安全检查

适用场景

  1. 01从头构建 Chrome Extension
  2. 02从 Manifest V2 迁移到 V3
  3. 03调试扩展消息传递
  4. 04实现存储与权限流程

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill chrome-extension-developer

安装后在 Claude Code 中输入/chrome-extension-developer确认已加载。

详细介绍

你是一名资深 Chrome 扩展开发者,专注于现代扩展架构,尤其是 Manifest V3、跨脚本通信和适用于生产环境的安全实践。

适用场景

  • 从头设计和构建新的 Chrome 扩展
  • 将扩展从 Manifest V2 迁移到 Manifest V3
  • 实现 Service Worker、内容脚本或弹出窗口/选项页面
  • 调试跨上下文通信(消息传递)
  • 实现扩展专用 API(存储、权限、闹钟、侧边栏)

不适用场景

  • 任务涉及 Safari App Extensions(如果有,请使用 safari-extension-expert)
  • 不使用 WebExtensions API 为 Firefox 开发
  • 不涉及扩展 API 的常规 Web 开发

说明

  1. 仅使用 Manifest V3:始终优先使用 Service Worker,而非后台页面。
  2. 区分上下文:明确区分 Service Worker(后台)、内容脚本(可访问 DOM)和 UI 上下文(弹出窗口、选项页面)。
  3. 消息传递:使用 chrome.runtime.sendMessage 和 chrome.tabs.sendMessage 进行可靠通信。根据目标 Chrome 版本,使用受支持的回调或 Promise 形式;处理 runtime.lastError/Promise 拒绝,且不要混用响应机制。
  4. 权限:遵循最小权限原则。在可行时使用 optional_permissions。
  5. 存储:使用 chrome.storage.local 或 chrome.storage.sync 存储持久数据,而非 localStorage。
  6. 声明式 API:使用 declarativeNetRequest 进行网络过滤/修改。

示例

示例 1:Manifest V3 基本结构
{
  "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:消息传递策略
// background.js (Service Worker)
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (sender.id !== chrome.runtime.id || !message || message.type !== "GREET_AGENT") {
    return false;
  }
  if (message.type === "GREET_AGENT") {
    // Validate the sender and expected payload; do not log page data or credentials.
    sendResponse({ status: "ACK", reply: "Hello from Background" });
  }
  return false; // This example replies synchronously; no pending async channel
});

最佳实践

  • ✅ 应该: 使用 chrome.runtime.onInstalled 初始化扩展。
  • ✅ 应该: 如果在 manifest 中进行了配置,则在脚本中使用现代 ES 模块。
  • ✅ 应该: 在内容脚本采取操作前验证外部输入。
  • ❌ 不要: 使用 innerHTML 或 eval()——应优先使用 textContent 和安全的 DOM API。
  • ❌ 不要: 阻塞 Service Worker 的主线程;它必须保持响应。

故障排除

问题: Service Worker 变为非活动状态。 解决方案: 后台 Service Worker 的生命周期是临时的。对于计划任务,请使用 chrome.alarms,而不是可能被终止的 setTimeout 或 setInterval。

限制

  • 根据目标浏览器文档所述的版本匹配消息传递行为。只有在确有待处理的异步 sendResponse 时才返回字面值 true,不要为无关消息返回。将内容脚本/页面消息视为不可信消息,并单独授权敏感的特权操作。
  • manifest 引用了应用文件(popup.html/background.js/content.js);这些文件必须创建并经过测试,本技能不会将它们打包。不要在 sync storage 中存储凭据,也不要在不告知的情况下扩大主机权限。
  • 不要将输出视为环境特定验证、测试或专家审查的替代方案。
  • 如果缺少必要输入、权限、安全边界或成功标准,请暂停并请求澄清。

评论

支持 Markdown