Agent Skills
返回列表
💻

浏览器扩展构建

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @org-02qudk26/browser-extension-builder。

技能介绍

解决什么问题

浏览器扩展开发经常卡在几个工程问题上：manifest.json 权限申请过大导致商店审核受阻；内容脚本与后台 service worker 的职责边界不清；页面选择器变化后功能悄悄失效；用户设置与状态没有可靠持久化。这个技能把这些约束整理成可执行的架构规范，帮助你从 popup、content、background 到 options 页面建立稳定结构。

如何工作

技能按 Manifest V3（MV3）给出目录与配置模板：popup/ 承载交互 UI，content/content.js 注入网页，background/service-worker.js 处理后台逻辑，options/ 管理设置。它强调用 chrome.storage.local / chrome.storage.sync 持久化数据，并用 Promise 封装 get 和 set，让异步读取更清晰。它还会把 permissions、content_scripts 与 action 的关系讲清楚：只有需要访问当前标签页时才使用 activeTab，只有跨标签页数据时才引入更宽权限，并把商店发布路径纳入考虑。针对反模式，它会提醒避免申请全部权限、避免在 worker 里做重度阻塞任务、避免依赖易变选择器，建议改用可选权限、alarms 周期任务、稳定选择器和错误处理。适用边界：它面向浏览器扩展本身，不负责完整业务后端；跨浏览器差异与商店政策仍需按目标平台核对。

使用场景

  • 启动新扩展时，按 MV3 拆分 popup、content、background、options，并收敛 manifest 权限。
  • 内容脚本注入页内 UI 时，把 content.js 的选择器、样式与错误处理放在同层维护。
  • 保存设置时，用 chrome.storage 持久化，并封装 get/set 供 popup 与 options 共享。
  • 发布前检查 MV3：后台避免长任务，权限收敛到 activeTab 或可选权限。

适合人员

  • 做 Chrome 插件的独立开发者：要快速搭好 MV3 目录、popup 和内容脚本入口，避免权限过宽被商店拒审。
  • 维护团队内部浏览器工具的工程师：要把设置页、内容脚本和后台 worker 的状态存到 chrome.storage 并保持一致。
  • 负责产品上架的开发者：要在发布前检查 manifest、后台长任务、选择器失效等常见问题，减少下架风险。
  • 做跨浏览器支持的开发者：要在不同浏览器间复用扩展结构，并明确 content script 与 background 的边界。