browser-extension

Crea extensiones de navegador cross-browser usando WXT framework. Cubre scaffold, desarrollo, testing y distribución (stores y local/interna).

Triggers

Frases que activan el skill
“crear extensión”
“browser extension”
“extensión Chrome”
“extensión Firefox”
“content script”
“popup extension”
“addon”
“extensión de navegador”

Prerequisitos

  • Node.js >= 18
  • npm (WXT scaffold via npx wxt@latest init)

Workflow

  1. Entrevista — Propósito, features, browsers target, UI framework, modo distribución, uso interno
  2. Scaffold — npx wxt@latest init, wxt.config.ts, CLAUDE.md del proyecto
  3. Desarrollo — Popup, content scripts, background, options, storage, messaging
  4. Testing — Vitest con WxtVitest plugin y fakeBrowser
  5. Build & Distribución — Bifurca según modo:
    • Local/interna: wxt build → load unpacked, ZIP, enterprise policies
    • Stores: wxt zip → Chrome Web Store, Firefox AMO, Edge, Safari, Opera

Framework

WXT (wxt.dev) — Framework de extensiones con:

  • HMR en desarrollo
  • Entrypoints basados en archivos (entrypoints/popup/, entrypoints/content.ts, etc.)
  • Build cross-browser desde un solo codebase (Chrome MV3, Firefox MV2, Edge, Safari)
  • wxt submit para publicación automatizada
  • TypeScript first-class

Browsers Soportados

Browser Manifest Store Fee
Chrome MV3 Chrome Web Store $5 (una vez)
Firefox MV2 AMO (addons.mozilla.org) Gratis
Edge MV3 Microsoft Partner Center Gratis
Safari MV3 App Store (Xcode) $99/año
Opera MV3 Opera Add-ons (opcional) Gratis

Distribución Local/Interna

Para extensiones corporativas o de equipo que no van a stores públicos:

  • Load unpacked para desarrollo
  • ZIP compartido por canales seguros
  • Enterprise policies para deploy masivo (Chrome/Firefox)
  • Checklist de seguridad para datos sensibles

Estructura del Skill 

skills/browser-extension/
├── SKILL.md                              # Workflow principal
└── references/
    ├── wxt-reference.md                  # CLI, estructura, config, testing
    ├── extension-patterns.md             # Código: popup, content, background, storage
    ├── manifest-permissions.md           # Tabla de permisos y best practices
    ├── store-publishing-guide.md         # Checklist por store, assets, automation
    └── local-distribution-guide.md       # Load unpacked, enterprise, seguridad