Explorando la Construcción de Extensiones de Chrome con Esbuild

En esta ocasión, quería aprender cómo funciona Esbuild para extensiones de Chrome, así que hice una búsqueda rápida en Google y encontré un repositorio interesante creado por alguien llamado Mark Martin. Decidí clonar este repositorio y ver qué sucedía al ejecutarlo. Aquí comparto mi experiencia y algunos aprendizajes clave.

⁠https://github.com/martonlederer/esbuild-react-chrome-extension

Primero, cloné el repositorio usando el comando git clone. Una vez que el repositorio estuvo en mi máquina, ejecuté yarn install para instalar todas las dependencias necesarias. Después, cargué la extensión en el navegador para ver cómo funcionaba.

Estructura del Proyecto

Hay una carpeta pública que contiene el archivo popup.html y manifest.json. Al cargar la extensión, inicialmente apareció un error que decía "could not load content scripts". Después de investigar, descubrí que había un script de contenido que no era necesario para esta demostración, así que lo eliminé y volví a cargar la extensión.

Proceso de Construcción.

Para construir la extensión, utilicé el comando yarn build, que genera los archivos necesarios en la carpeta de compilación. Luego, cargué estos archivos no empaquetados en Chrome a través de la página de extensiones (chrome://extensions/). La extensión se cargó correctamente y pude ver un pop-up que decía "React Pop-up".

Explorando el Código

El archivo package.json incluye dependencias como Babel, Esbuild, Prettier, React y TypeScript. También hay una dependencia llamada Yorkie, similar a Husky, que se utiliza para ejecutar comandos de pre-commit y mantener el código limpio.

El punto de entrada para Esbuild incluye archivos como background.ts, content_script.ts, popup.ts, e injected.ts. En la carpeta pública, el archivo manifest.json define los recursos accesibles y las URLs a las que se aplica la extensión.

Configuración de Esbuild

En el archivo de configuración de Esbuild, se especifican varias opciones importantes como bundle, minify, y sourcemap. Además, se define el entorno de ejecución y el directorio de salida para los archivos compilados.

Aquí un ejemplo de configuración de Esbuild:

const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/background.ts', 'src/content_script.ts', 'src/popup.ts', 'src/injected.ts'],
  bundle: true,
  minify: true,
  sourcemap: process.env.NODE_ENV !== 'production',
  target: ['chrome58'],
  outdir: 'public/build',
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
  },
}).catch(() => process.exit(1));

Conclusión

Aprender a usar Esbuild para construir extensiones de Chrome puede ser un proceso enriquecedor y bastante eficiente en comparación con otras herramientas de construcción. Este repositorio en particular ofrece una buena base para empezar y explorar más a fondo las capacidades de Esbuild.

Quiero agradecer a Mark Martin por compartir su trabajo. Si te interesa aprender más sobre cómo construir extensiones de Chrome con Esbuild, te recomiendo revisar su repositorio. ⁠https://github.com/martonlederer/esbuild-react-chrome-extension

Espero que hayas encontrado útil esta exploración y que te motive a experimentar con Esbuild en tus propios proyectos. ¡Hasta la próxima!

Explorando la Construcción de Extensiones de Chrome con Esbuild