Consejos útiles para iniciar la extensión Next.js para Chrome | trucos CSS
Recientemente reescribí uno de mis proyectos: Tema mínimo para Twitter - como una extensión de Chrome Next.js, porque quería usar React para la ventana emergente. Usar React me permitirá separar claramente el componente emergente de mi extensión y su lógica de aplicación de su guiones de contenidoque son los archivos CSS y JavaScript necesarios para realizar la funcionalidad de la extensión.
Como sabrá, hay varias formas de comenzar con React, desde simples agregar etiquetas de script para usar recomendado cadena de herramientas tal como Crear una aplicación Reaccionar, gatsbyo Siguiente.js. Hay algunos beneficios inmediatos obtienes de Next.js como un marco React, como la función HTML estática que obtienes next export
. Si bien las características como la precarga de JavaScript y el enrutamiento incorporado son excelentes, mi objetivo principal al reescribir mi extensión de Chrome era organizar mejor el código, y ahí es donde realmente brilla Next.js. Le brinda lo mejor de la caja por la menor cantidad de archivos y configuraciones innecesarios. Traté de lidiar con la aplicación Create React y tiene un sorprendente cantidad de código estándar que no lo necesitaba.
Pensé que podría ser fácil convertir a una extensión de Chrome Next.js, ya que es posible exportar la aplicación Next.js a HTML estático. Sin embargo, hay algunos problemas y este artículo es donde les cuento sobre ellos, para que pueda evitar algunos de los errores que cometí.
Primero, aquí el repositorio de GitHub si quieres ir directamente al código.
¿Nuevo en las extensiones de Chrome? Sarah Drasner tiene un curso para principiantes para que comiences.
Estructura de carpetas
next-export
es un paso de procesamiento posterior que compila su código Next.js, por lo que no necesita incluir el código Next.js o React real en la extensión. Esto nos permite mantener nuestra extensión en el tamaño de archivo más bajo posible, que es lo que queremos cuando la extensión es finalmente publicado en Chrome Web Store.
Así es como está organizado el código para mi extensión de Chrome Next.js. Hay dos directorios: uno para el código de extensión y otro que contiene la aplicación Next.js.
📂 extension
📄 manifest.json
📂 next-app
📂 pages
📂 public
📂 styles
📄 package.json
README.md
El guión de construcción
Usar next export
en un proyecto web normal, cambiaría el script de compilación predeterminado a Next.js package.json
a esto:
"scripts": {
"build": "next build && next export"
}
Entonces corre npm run build
(o yarn build
) genera un out
directorio.
Sin embargo, en este caso, incluida la extensión de Chrome, necesitamos exportar la salida a la nuestra. extension
directorio en su lugar out
Además, debemos cambiar el nombre de todos los archivos que comienzan con un guión bajo (_
) porque Chrome mostrará una advertencia de que "Los nombres de archivo que comienzan con '_' están reservados para que los use el sistema".
Esto nos hace tener un nuevo script de compilación como este:
"scripts": {
"build": "next build && next export && mv out/_next out/next && sed -i '' -e 's/\/_next/\.\/next/g' out/**.html && mv out/index.html ../extension && rsync -va --delete-after out/next/ ../extension/next/"
}
sed
funciona de manera diferente en MacOS que en Linux. Mac OS requiere '' -e
bandera para que funcione correctamente. Si está en Linux, puede omitir este indicador adicional.
Activos
Si utiliza algún activo en public
carpeta de su proyecto Next.js, debemos moverlo a nuestra carpeta con la extensión de Chrome. Para la organización, agregue next-assets
carpeta dentro public
asegurarse de que sus activos no se transfieran directamente a extension
directorio.
El script de creación de activos completo es este y es genial:
"scripts": {
"build": "next build && next export && mv out/_next out/next && sed -i '' -e 's/\/_next/\.\/next/g' out/**.html && mv out/index.html ../extension && rsync -va --delete-after out/next/ ../extension/next/ && rm -rf out && rsync -va --delete-after public/next-assets ../extension/"
}
Manifiesto de extensión de Chrome
El modelo de activación de extensión de Chrome más común es activar una ventana emergente cuando hace clic en una extensión. Podemos hacer esto en Manifiesto V3 mediante el uso action
palabra clave. Y en esto podemos señalar default_popup
para que apunte a un archivo HTML.
Acá hay uno index.html
de 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"
}
}
EN action
API reemplazada browserAction
y pageAction
`en el Manifiesto V3.
Funciones de Next.js no compatibles con las extensiones de Chrome
Algunas funciones de Next.js requieren un servidor web Node.js, por lo que características relacionadas con el servidortal como next/image
no es compatible con la extensión de Chrome.
Empieza a evolucionar
El último paso es probar la extensión Next.js actualizada para Chrome.Run npm build
(o yarn build
) desde next-app
directorio, asegurándose manifest.json
el archivo esta en extension
directorio.
Luego dirígete a chrome://extensions
en una nueva ventana del navegador Chrome, habilite modo desarrollador*, * y haga clic carga desempaquetada Selecciona tu botón extension
¡y debería poder comenzar a desarrollar!
resumiendo
¡Está! Como dije, nada de esto fue inmediatamente obvio para mí cuando comencé a reescribir mi extensión de Chrome. Pero esperamos que ahora vea lo relativamente fácil que es aprovechar Next.js para desarrollar una extensión de Chrome. ¡Y espero que le ahorre el tiempo que me tomó a mí descubrirlo!
Deja una respuesta