关于 chrome-extension-developer
用于构建和维护 Chrome Extensions 的开发技能,重点关注 Manifest V3 架构与安全实践。为扩展开发者提供脚本、消息传递、权限、存储和调试方面的指导。
主要功能
- 01Manifest V3 架构指导
- 02Service worker 与内容脚本模式
- 03跨上下文消息传递
- 04最小权限实践
- 05扩展存储指导
- 06故障排查与安全检查
适用场景
- 01从头构建 Chrome Extension
- 02从 Manifest V2 迁移到 V3
- 03调试扩展消息传递
- 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 开发
说明
- 仅使用 Manifest V3:始终优先使用 Service Worker,而非后台页面。
- 区分上下文:明确区分 Service Worker(后台)、内容脚本(可访问 DOM)和 UI 上下文(弹出窗口、选项页面)。
- 消息传递:使用
chrome.runtime.sendMessage和chrome.tabs.sendMessage进行可靠通信。根据目标 Chrome 版本,使用受支持的回调或 Promise 形式;处理 runtime.lastError/Promise 拒绝,且不要混用响应机制。 - 权限:遵循最小权限原则。在可行时使用
optional_permissions。 - 存储:使用
chrome.storage.local或chrome.storage.sync存储持久数据,而非localStorage。 - 声明式 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