chrome-extensions-best-practices
4
总安装量
3
周安装量
#52420
全站排名
安装命令
npx skills add https://github.com/pproenca/dot-skills --skill chrome-extensions-best-practices
Agent 安装分布
antigravity
3
gemini-cli
3
opencode
2
roo
2
claude-code
2
Skill 文档
Chrome Developer Relations Chrome Extensions Best Practices
Comprehensive performance optimization guide for Chrome Extensions (Manifest V3), maintained by Chrome Developer Relations. Contains 40+ rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when:
- Writing new Chrome extension code
- Migrating from Manifest V2 to Manifest V3
- Optimizing service worker lifecycle and state management
- Implementing content scripts for page interaction
- Debugging performance issues in extensions
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Service Worker Lifecycle | CRITICAL | sw- |
| 2 | Content Script Optimization | CRITICAL | content- |
| 3 | Message Passing Efficiency | HIGH | msg- |
| 4 | Storage Operations | HIGH | storage- |
| 5 | Network & Permissions | MEDIUM-HIGH | net- |
| 6 | Memory Management | MEDIUM | mem- |
| 7 | UI Performance | MEDIUM | ui- |
| 8 | API Usage Patterns | LOW-MEDIUM | api- |
Quick Reference
1. Service Worker Lifecycle (CRITICAL)
sw-persist-state-storage– Persist state with chrome.storage instead of global variablessw-avoid-keepalive– Avoid artificial service worker keep-alive patternssw-use-alarms-api– Use chrome.alarms instead of setTimeout/setIntervalsw-return-true-async– Return true from message listeners for async responsessw-register-listeners-toplevel– Register event listeners at top levelsw-use-offscreen-for-dom– Use offscreen documents for DOM APIs
2. Content Script Optimization (CRITICAL)
content-use-specific-matches– Use specific URL match patternscontent-use-document-idle– Use document_idle for content script injectioncontent-programmatic-injection– Prefer programmatic injection over manifest declarationcontent-minimize-script-size– Minimize content script bundle sizecontent-batch-dom-operations– Batch DOM operations to minimize reflowscontent-use-mutation-observer– Use MutationObserver instead of polling
3. Message Passing Efficiency (HIGH)
msg-use-ports-for-frequent– Use port connections for frequent message exchangemsg-minimize-payload-size– Minimize message payload sizemsg-debounce-frequent-events– Debounce high-frequency events before messagingmsg-check-lasterror– Always check chrome.runtime.lastErrormsg-avoid-broadcast-to-all-tabs– Avoid broadcasting messages to all tabs
4. Storage Operations (HIGH)
storage-batch-operations– Batch storage operations instead of individual callsstorage-choose-correct-type– Choose the correct storage type for your use casestorage-cache-frequently-accessed– Cache frequently accessed storage valuesstorage-use-session-for-temp– Use storage.session for temporary runtime datastorage-avoid-storing-large-blobs– Avoid storing large binary blobs
5. Network & Permissions (MEDIUM-HIGH)
net-use-declarativenetrequest– Use declarativeNetRequest instead of webRequestnet-request-minimal-permissions– Request minimal required permissionsnet-use-activetab– Use activeTab permission instead of broad host permissionsnet-limit-csp-modifications– Avoid modifying Content Security Policy headers
6. Memory Management (MEDIUM)
mem-cleanup-event-listeners– Clean up event listeners when content script unloadsmem-avoid-detached-dom– Avoid holding references to detached DOM nodesmem-avoid-closure-leaks– Avoid accidental closure memory leaksmem-clear-intervals-timeouts– Clear intervals and timeouts on cleanupmem-use-weak-collections– Use WeakMap and WeakSet for DOM element references
7. UI Performance (MEDIUM)
ui-minimize-popup-bundle– Minimize popup bundle size for fast startupui-render-with-cached-data– Render popup UI with cached data firstui-batch-badge-updates– Batch badge updates to avoid flickerui-use-options-page-lazy– Lazy load options page sections
8. API Usage Patterns (LOW-MEDIUM)
api-use-promises-over-callbacks– Use promise-based API calls over callbacksapi-query-tabs-efficiently– Query tabs with specific filtersapi-avoid-redundant-api-calls– Avoid redundant API calls in loopsapi-use-alarms-minperiod– Respect alarms API minimum periodapi-handle-context-invalidated– Handle extension context invalidated errorsapi-use-declarative-content– Use declarative content API for page actions
How to Use
Read individual reference files for detailed explanations and code examples:
- Section definitions – Category structure and impact levels
- Rule template – Template for adding new rules
Full Compiled Document
For a complete guide with all rules in a single document, see AGENTS.md.
Reference Files
| File | Description |
|---|---|
| AGENTS.md | Complete compiled guide with all rules |
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |