SuperAPI AI 工具集

chrome-extension

编程与开发

查看项目

更新于 10-15 15:23

技能介绍

用途

Chrome Extension Best Practices 是一份针对 Chrome 扩展(Manifest V3)的性能与代码质量指南,包含 67 条规则,分为 12 个类别,并按影响程度排定优先级,用于指导自动化重构与代码生成。

何时适用

在以下情况可参考这些规则:

  • 编写新的 Chrome 扩展代码
  • 从 Manifest V2 迁移到 Manifest V3
  • 优化 Service Worker 生命周期与状态管理
  • 实现用于页面交互的内容脚本
  • 调试扩展中的性能问题

规则类别与优先级

优先级 类别 影响 前缀
1 Service Worker 生命周期 CRITICAL sw-
2 内容脚本优化 CRITICAL content-
3 消息传递效率 HIGH msg-
4 存储操作 HIGH storage-
5 网络与权限 MEDIUM-HIGH net-
6 内存管理 MEDIUM mem-
7 UI 性能 MEDIUM ui-
8 API 使用模式 LOW-MEDIUM api-
9 代码风格与命名 MEDIUM style-
10 组件模式 MEDIUM comp-
11 错误处理 HIGH err-
12 测试模式 MEDIUM test-

快速参考

1. Service Worker 生命周期(CRITICAL)

  • sw-persist-state-storage - 使用 chrome.storage 持久化状态,而非全局变量
  • sw-avoid-keepalive - 避免人为的 Service Worker 保活模式
  • sw-use-alarms-api - 使用 chrome.alarms 代替 setTimeout/setInterval
  • sw-return-true-async - 在消息监听器中返回 true 以进行异步响应
  • sw-register-listeners-toplevel - 在顶层注册事件监听器
  • sw-use-offscreen-for-dom - 使用 offscreen 文档处理 DOM API

2. 内容脚本优化(CRITICAL)

  • content-use-specific-matches - 使用具体的 URL 匹配模式
  • content-use-document-idle - 使用 document_idle 注入内容脚本
  • content-programmatic-injection - 优先使用以编程方式注入,而非 manifest 声明
  • content-minimize-script-size - 最小化内容脚本包体积
  • content-batch-dom-operations - 批量执行 DOM 操作以减少重排
  • content-use-mutation-observer - 使用 MutationObserver 代替轮询

3. 消息传递效率(HIGH)

  • msg-use-ports-for-frequent - 频繁消息交换使用端口连接
  • msg-minimize-payload-size - 最小化消息负载大小
  • msg-debounce-frequent-events - 对高频事件在发消息前进行防抖
  • msg-check-lasterror - 始终检查 chrome.runtime.lastError
  • msg-avoid-broadcast-to-all-tabs - 避免向所有标签页广播消息

4. 存储操作(HIGH)

  • storage-batch-operations - 批量执行存储操作,而非逐次调用
  • storage-choose-correct-type - 根据用例选择正确的存储类型
  • storage-cache-frequently-accessed - 缓存频繁访问的存储值
  • storage-use-session-for-temp - 临时运行时数据使用 storage.session
  • storage-avoid-storing-large-blobs - 避免存储大型二进制块

5. 网络与权限(MEDIUM-HIGH)

  • net-use-declarativenetrequest - 使用 declarativeNetRequest 代替 webRequest
  • net-request-minimal-permissions - 请求最小必要权限
  • net-use-activetab - 使用 activeTab 权限代替宽泛的主机权限
  • net-limit-csp-modifications - 避免修改内容安全策略(CSP)响应头

6. 内存管理(MEDIUM)

  • mem-cleanup-event-listeners - 内容脚本卸载时清理事件监听器
  • mem-avoid-detached-dom - 避免持有已分离 DOM 节点的引用
  • mem-avoid-closure-leaks - 避免意外的闭包内存泄漏
  • mem-clear-intervals-timeouts - 在清理时清除 interval 与 timeout
  • mem-use-weak-collections - 对 DOM 元素引用使用 WeakMap 与 WeakSet

7. UI 性能(MEDIUM)

  • ui-minimize-popup-bundle - 最小化 popup 包体积以加快启动
  • ui-render-with-cached-data - 优先使用缓存数据渲染 popup UI
  • ui-batch-badge-updates - 批量更新徽章以避免闪烁
  • ui-use-options-page-lazy - 延迟加载选项页面分区

8. API 使用模式(LOW-MEDIUM)

  • api-use-promises-over-callbacks - 使用基于 Promise 的 API 调用替代回调
  • api-query-tabs-efficiently - 使用具体过滤器查询标签页
  • api-avoid-redundant-api-calls - 避免在循环中重复调用 API
  • api-use-alarms-minperiod - 遵守 alarms API 的最小周期
  • api-handle-context-invalidated - 处理扩展上下文失效错误
  • api-use-declarative-content - 对页面操作使用 declarative content API

9. 代码风格与命名(MEDIUM)

  • style-boolean-naming - 布尔变量使用 is/has/should 前缀
  • style-cache-naming - 使用一致的缓存变量命名
  • style-constants - 为魔法值定义常量
  • style-directory-structure - 按功能/分层组织代码
  • style-file-naming - 使用一致的文件命名约定
  • style-function-naming - 使用描述性函数名
  • style-import-type - 对类型使用 type-only 导入
  • style-index-entry-points - 使用 index 文件作为模块入口
  • style-message-enums - 消息类型使用枚举
  • style-type-naming - 类型与接口使用 PascalCase

10. 组件模式(MEDIUM)

  • comp-adapter-interface - 对浏览器 API 使用适配器模式
  • comp-content-script-structure - 一致地组织内容脚本结构
  • comp-css-class-patterns - 使用 BEM 或带前缀的 CSS 类
  • comp-manager-class - 复杂状态使用管理器类
  • comp-type-guards - 使用类型守卫进行运行时校验
  • comp-ui-components - 创建可复用的 UI 组件

11. 错误处理(HIGH)

  • err-context-invalidation - 处理扩展上下文失效
  • err-early-return - 使用提前返回进行错误处理
  • err-null-coalescing - 使用空值合并提供默认值
  • err-promise-barrier - 使用 promise barrier 进行协调
  • err-storage-operations - 处理存储操作失败
  • err-url-parsing - 使用 try/catch 安全解析 URL
  • err-validation-pattern - 在边界处校验输入

12. 测试模式(MEDIUM)

  • test-browser-api-mocking - 在测试中 mock chrome API
  • test-organization - 按功能组织测试
  • test-validation-functions - 彻底测试校验函数

如何使用

阅读各个参考文件以获取详细说明与代码示例:

  • Section definitions - 类别结构与影响级别
  • Rule template - 添加新规则的模板

完整汇编文档

如需包含所有规则的单一完整指南,请参见 AGENTS.md。

参考文件

文件 说明
AGENTS.md 包含所有规则的完整汇编指南
references/_sections.md 类别定义与排序
assets/templates/_template.md 新规则模板
metadata.json 版本与参考信息

限制

关于该技能的具体安装方式、收费模式、价格、平台支持范围与许可信息,资料中暂未提供。