chrome-ext
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 |
More from pproenca/dot-skills
zod
Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).
2.0Kclean-architecture
Clean Architecture principles and best practices from Robert C. Martin's book. This skill should be used when designing software systems, reviewing code structure, or refactoring applications to achieve better separation of concerns. Triggers on tasks involving layers, boundaries, dependency direction, entities, use cases, or system architecture.
1.4Kemilkowal-animations
Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
918vitest
Vitest testing framework patterns for test setup, async testing, mocking with vi.*, snapshots, and test performance (formerly test-vitest). This skill should be used when writing or debugging Vitest tests. This skill does NOT cover TDD methodology (use test-tdd skill), API mocking with MSW (use test-msw skill), or Jest-specific APIs.
907typescript
This skill should be used when the user asks to "optimize TypeScript performance", "speed up tsc compilation", "configure tsconfig.json", "fix type errors", "improve async patterns", or encounters TS errors (TS2322, TS2339, "is not assignable to"). Also triggers on .ts, .tsx, .d.ts file work involving type definitions, module organization, or memory management. Does NOT cover TypeScript basics, framework-specific patterns, or testing.
821nuqs
nuqs (type-safe URL query state) best practices for Next.js applications. This skill should be used when writing, reviewing, or refactoring code that uses nuqs for URL state management. Triggers on tasks involving useQueryState, useQueryStates, search params, URL state, query parameters, nuqs parsers, or Next.js routing with state.
735