chrome-extensions-best-practices
SKILL.md
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 |
Weekly Installs
2
Install
$ npx skills add pproenca/dot-skills --skill "chrome-extensions-best-practices"Repository
pproenca/dot-skillsInstalled on
claude-code2
kilo1
windsurf1
amp1
clawdbot1
opencode1