Este artículo detalla el proceso de creación de una extensión de Chrome usando Next.js, centrándose en aprovechar reaccionar para la ventana emergente y lograr una organización de código eficiente. El autor comparte su experiencia reescribiendo un proyecto de tema de Twitter como una extensión Next.js, destacando las ventajas de la estructura de Next.js sobre alternativas como Crear aplicación React.

El beneficio clave citado es la organización de código mejorada, minimizando la boilerplate. Mientras que las características de Next.js como la exportación de HTML estática, la precarga de JavaScript y el enrutamiento son beneficiosos, la motivación principal era el código más limpio.

El autor describe una estructura de carpeta práctica:

? extension
  ? manifest.json
? next-app
  ? pages
  ? public
  ? styles
  ? package.json
README.md

Un aspecto crucial es el script de compilación personalizado. El estándar NEXT export necesita modificación para manejar los detalles de la extensión de Chrome. El script exporta la aplicación Next.js al directorio de extensión, renombra los archivos (eliminando los subrayadores principales) y gestiona los activos de la carpeta public . Se proporciona el script de compilación final y completo, incluido el manejo de activos.

el archivo manifest.json está configurado para utilizar Action Keyword (Manifest v3) para especificar el archivo html emergente generado por next.js:

{
  "name": "Next Chrome",
  "description": "Next.js Chrome Extension starter",
  "version": "0.0.1",
  "manifest_version": 3,
  "action": {
    "default_title": "Next.js app",
    "default_popup": "index.html"
  }
}

se observan limitaciones importantes: las características del lado del servidor next.js (por ejemplo, next/image ) son incompatibles con las extensiones de Chrome.

Los pasos finales implican construir la extensión usando npm run build (o yarn build ), cargando la extensión desempaquetada en chrome ( chrome: // extensiones ) y habilitando el modo desarrollador.

En conclusión, el artículo proporciona una guía práctica para los desarrolladores que buscan aprovechar las fortalezas de Next.js para construir extensiones de Chrome, ofreciendo un proceso de desarrollo simplificado y una organización de código mejorada. Enfatiza la importancia de un proceso de construcción personalizado y resalta las posibles dificultades para evitar.