bonus new member

https://librolibre.net/

masterjp

masterjp

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 outAdemá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".

Captura de pantalla de Next.js Chrome Extension Store Chrome Extension Store con un mensaje de error emergente cuando la extensión no se carga.
Lo que necesitamos es una forma de personalizar los nombres de estos archivos para que Chrome sea menos caprichoso.

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.

Artículo Recomendado:  5 errores que cometí al iniciar mi primer proyecto React | trucos CSS

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/imageno 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.

Artículo Recomendado:  Parcel CSS: nuevo analizador de CSS, transformador y minificador, nuevo analizador de CSS trucos CSS

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!

Una captura de pantalla de Chrome abierta en la página de inicio de Google y una ventana emergente con la extensión de Chrome Next.js a la derecha.

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

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir