Cómo Empezar a Desarrollar Extensiones de Navegador

Aunque el desarrollo de extensiones de navegador utiliza tecnologías frontend, las APIs y los métodos de trabajo son diferentes a los de las páginas web, por lo que usar frameworks de desarrollo puede mejorar significativamente la eficiencia. El desarrollo de extensiones de navegador sigue siendo un campo nicho en comparación con el desarrollo web y de aplicaciones, y la comunidad de desarrolladores es notablemente menos activa. Afortunadamente, todas las herramientas de desarrollo necesarias están disponibles. Aquí hay un resumen de lo que he usado.

Actualmente, todos los navegadores principales siguen un estándar unificado para el desarrollo de extensiones: manifest v3, por lo que el proceso de desarrollo y el stack tecnológico son similares. Puede haber algunas diferencias en los detalles, que señalaré donde las he encontrado.

Frameworks de Desarrollo

Un framework de desarrollo calificado debe al menos establecer la estructura del repositorio, soportar depuración con recarga en caliente, soportar sugerencias de tipos para interfaces de extensiones de navegador, etc. Puedes elegir uno de los siguientes stacks tecnológicos.

Plantilla de Repositorio de Código

React + typescript + vite + monorepo: https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite

Para ser precisos, es una plantilla, no un framework. Incluye todas las características que un framework de desarrollo debería tener. Para el desarrollo de extensiones de navegador donde las interfaces no son demasiado complejas, personalmente prefiero las plantillas de repositorio que muestran todos los detalles en lugar de frameworks que ocultan los detalles de implementación.

• Soporta HMR, sourcemap, etc.
• Usa pnpm + turbo para gestionar monorepo
• Proporciona implementaciones para todas las características de extensiones de Chrome, incluyendo página de inicio de pestañas, devtools, barra lateral, etc., facilitando la referencia y reemplazo
• Empaquetado para Chrome, Firefox y otros navegadores principales. Compatibilidad por defecto con Firefox
• Sin detalles ocultos, todo el código está visible para facilitar la comprensión y modificación

Plasmo

Si no te gusta la plantilla anterior, puedes considerar el framework Plasmo

• Soporta frameworks principales como React, Vue, Angular
• Soporta características de depuración como HMR
• Usa Parcel para el empaquetado, no vite
• Algunos detalles (como la generación del manifiesto, proceso de renderizado de UI de contenido) están encapsulados, lo que los hace más difíciles de entender

Depuración

• Carga de la extensión
  • Ejecuta npm dev en el repositorio
  • Abre extensiones en Chrome: chrome://extensions/
  • Activa el “Modo desarrollador” -> Haz clic en “Cargar descomprimida” -> Selecciona la carpeta de salida compilada
• La depuración se implementa a través de Chrome DevTools
  • Scripts de contenido: Selecciona “Content Scripts” en la pestaña “Fuentes” para depurar código
  • El script de fondo se ejecuta en un service worker, así que abre chrome://extensions/ -> Encuentra la extensión -> Haz clic en service worker para depurar código