Plantilla Extension MV3 (Chrome)

Plantilla lista para crear extensiones de navegador con:

• Popup en React (Vite + Tailwind).
• Background service worker.
• Content script aislado en un unico archivo.
• Vitest + React Testing Library incluidos para pruebas.

Estructura clave

• public/manifest.json: manifiesto MV3 con placeholders y comentarios de campos.
• src/extension/background.ts: logica de background (fetch, storage, messaging).
• src/extension/content-script.ts: lectura/modificacion del DOM en paginas objetivo.
• src/App.tsx: UI del popup.

Scripts

• yarn dev: desarrollo del popup con Vite.
• yarn build: genera dist con popup, background y content script.

Flujo de trabajo

1. Edita public/manifest.json con tu nombre, descripcion, permisos y matches.
2. Implementa tu logica en src/extension/background.ts y src/extension/content-script.ts.
3. Crea el UI del popup en src/App.tsx.
4. Compila con yarn build.
5. Carga dist como extension descomprimida en Chrome:
   • chrome://extensions -> activar "Modo desarrollador" -> "Cargar descomprimida".

Notas

• El build genera dist/js/background.js y dist/js/content-script.js.
• Si necesitas acceso a APIs chrome.*, ya estan configurados los tipos en TypeScript.