Agent skill
wxt-browser-extensions
WXT browser extension performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring WXT browser extension code to ensure optimal performance patterns. Triggers on tasks involving WXT, browser extensions, content scripts, service workers, messaging, and extension APIs.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/wxt-browser-extensions
SKILL.md
Community WXT Browser Extensions Best Practices
Comprehensive performance optimization guide for WXT browser extension development. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when:
- Writing new WXT browser extension code
- Implementing service worker background scripts
- Injecting content scripts into web pages
- Setting up messaging between extension contexts
- Configuring manifest permissions and resources
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Service Worker Lifecycle | CRITICAL | svc- |
| 2 | Content Script Injection | CRITICAL | inject- |
| 3 | Messaging Architecture | HIGH | msg- |
| 4 | Storage Patterns | HIGH | store- |
| 5 | Bundle Optimization | MEDIUM-HIGH | bundle- |
| 6 | Manifest Configuration | MEDIUM | manifest- |
| 7 | UI Performance | MEDIUM | ui- |
| 8 | TypeScript Patterns | LOW-MEDIUM | ts- |
Quick Reference
1. Service Worker Lifecycle (CRITICAL)
svc-register-listeners-synchronously- Register listeners synchronously to prevent missed eventssvc-avoid-global-state- Use storage instead of in-memory statesvc-keep-alive-patterns- Keep service worker alive for long operationssvc-handle-install-update- Handle install and update lifecycle eventssvc-offscreen-documents- Use offscreen documents for DOM operationssvc-declarative-net-request- Use declarative rules for network blocking
2. Content Script Injection (CRITICAL)
inject-use-main-function- Place runtime code inside main() functioninject-choose-correct-world- Select ISOLATED or MAIN world appropriatelyinject-run-at-timing- Configure appropriate runAt timinginject-use-ctx-invalidated- Handle context invalidation on updateinject-dynamic-registration- Use runtime registration for conditional injectioninject-all-frames- Configure allFrames for iframe handling
3. Messaging Architecture (HIGH)
msg-return-true-for-async- Return true for async message handlersmsg-type-safe-messaging- Define type-safe message protocolsmsg-use-tabs-sendmessage- Use tabs.sendMessage for content scriptsmsg-use-ports-for-streams- Use ports for streaming communicationmsg-handle-no-receiver- Handle missing message receiversmsg-avoid-circular-messages- Prevent circular message loops
4. Storage Patterns (HIGH)
store-use-define-item- Use storage.defineItem for type-safe accessstore-choose-storage-area- Select appropriate storage areastore-batch-operations- Batch storage operationsstore-watch-for-changes- Use watch() for reactive updatesstore-handle-quota-errors- Handle storage quota errors
5. Bundle Optimization (MEDIUM-HIGH)
bundle-split-entrypoints- Split code by entrypointbundle-analyze-size- Analyze and monitor bundle sizebundle-tree-shake-icons- Use direct imports for icon librariesbundle-externalize-wasm- Load WASM dynamicallybundle-minify-content-scripts- Minimize content script size
6. Manifest Configuration (MEDIUM)
manifest-minimal-permissions- Request minimal permissionsmanifest-use-optional-permissions- Use optional permissions progressivelymanifest-web-accessible-resources- Scope web accessible resourcesmanifest-content-security-policy- Configure CSP correctlymanifest-cross-browser-compatibility- Support multiple browsers
7. UI Performance (MEDIUM)
ui-use-shadow-dom- Use Shadow DOM for injected UIui-defer-rendering- Defer popup rendering until neededui-cleanup-on-unmount- Clean up UI on unmountui-sidepanel-persistence- Preserve sidepanel stateui-position-fixed-iframe- Use iframe for complex UIui-avoid-layout-thrashing- Batch DOM reads and writes
8. TypeScript Patterns (LOW-MEDIUM)
ts-use-browser-not-chrome- Use browser namespace over chromets-type-entrypoint-options- Type entrypoint options explicitlyts-augment-browser-types- Augment types for missing APIsts-strict-null-checks- Enable strict null checksts-import-meta-env- Use import.meta for build infots-avoid-any- Avoid any type in handlersts-path-aliases- Use path aliases for imports
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
Reference Files
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?