Crear una extensión de Chrome puede resultar abrumador. Es diferente a crear una aplicación web en el sentido de que no desea poner demasiada sobrecarga de JavaScript en el navegador, ya que su extensión se ejecutará junto con el sitio web que está visitando. Por lo general, tampoco obtiene el beneficio de empaquetar y depurar que están disponibles con los paquetes y marcos de hoy.
Cuando decidí crear una extensión de Chrome, descubrí que la cantidad de publicaciones de blog y artículos sobre la creación de una es bastante pequeña. Y hay incluso menos información cuando desea utilizar una de las tecnologías más nuevas como TailwindCSS.
En este tutorial, descubriremos cómo crear una extensión de Chrome usando Parcel.js para empaquetar y mirar y TailwindCSS para diseñar. También hablaremos sobre cómo separar su estilo del sitio web para evitar la colisión de CSS, pero más sobre eso más adelante.
Hay algunos tipos de extensiones de Chrome que vale la pena mencionar:
- Scripts de contenido : el primer tipo de extensión de Chrome es el más común. Se ejecuta en el contexto de una página web y se puede utilizar para modificar su contenido. Este es el tipo de extensión que crearemos.
- Ventana emergente : las extensiones basadas en ventanas emergentes utilizan el icono de extensión a la derecha de la barra de direcciones para abrir una ventana emergente que puede contener cualquier contenido HTML que desee.
- Interfaz de usuario de opciones : ¡Lo has adivinado! Esta es una interfaz de usuario para personalizar opciones como una extensión. Es accesible haciendo clic con el botón derecho en el ícono de la extensión y seleccionando "opciones" o navegando a la página de la extensión desde la lista de extensiones de Chrome.
chrome://extensions - Extensión de DevTools : "Una extensión de DevTools agrega funcionalidad a Chrome DevTools. Puede agregar nuevos paneles de IU y barras laterales, interactuar con la página inspeccionada, obtener información sobre solicitudes de red y más". -Documentación de Google Chrome
En este tutorial, crearemos una extensión de Chrome utilizando solo scripts de contenido mostrando contenido en la página web e interactuando con el DOM.
Cómo agrupar su extensión de Chrome usando Parcel.js V2
Parcel.js es un paquete de aplicaciones web sin configuración. Puede utilizar cualquier tipo de archivo como punto de entrada. Es fácil de usar y funcionará para cualquier tipo de aplicación, incluidas las extensiones de Chrome.
Primero cree una nueva carpeta llamada demo-extension(asegúrese de tener yarno npminstalado, que voy a usar yarnpara esta publicación):
$ mkdir demo-extension && cd demo-extension && yarn init -y
A continuación, instalaremos Parcel como una dependencia local:
$ yarn add -D [email protected]
Ahora cree un nuevo directorio llamado src:
$ mkdir src
Agregar un archivo de manifiesto
Cada extensión de navegador necesita un archivo de manifiesto. Aquí es donde definimos la versión y los metadatos sobre nuestra extensión, pero también los scripts que se utilizan (contenido, fondo, ventana emergente, .etc) y los permisos si los hay.
Puede encontrar el esquema completo en la documentación de Chrome: //developer.chrome.com/extensions/manifest
Sigamos adelante y agreguemos un nuevo archivo srcllamado manifest.jsoncon este contenido:
Ahora, antes de entrar en más detalles sobre cómo funcionan las extensiones de Chrome y el tipo de cosas que puede hacer con ellas, vamos a configurar TailwindCSS
Cómo utilizar TailwindCSS con su extensión de Chrome
TailwindCSS es un marco CSS que utiliza clases de utilidad de nivel inferior para crear componentes de interfaz de usuario visual reutilizables pero también personalizables.
Tailwind se puede instalar de dos maneras, pero la forma más común de usarlo es a través de su paquete NPM:
$ yarn add tailwindcss
Además, continúe y agregue autoprefixery postcss-import:
$ yarn add -D autoprefixer postcss-import
Los necesita para agregar prefijos de proveedor a sus estilos y poder escribir sintaxis como @import "tailwindcss/base"para importar archivos Tailwind directamente desde node_modules, respectivamente.
Ahora que lo tenemos instalado, creemos un nuevo archivo dentro de nuestro directorio raíz y llamémoslo postcss.config.js. Este es el archivo de configuración de PostCSS y contendrá, por ahora, estas líneas:
¡El orden de los complementos importa aquí!
¡Eso es! Eso es todo lo que necesita para comenzar a usar TailwindCSS dentro de su extensión de Chrome.
Cree un archivo llamado style.cssdentro de su srccarpeta e incluya los archivos Tailwind:
Elimine CSS no utilizado usando PurgeCSS
También asegurémonos de importar solo los estilos que usamos habilitando la capacidad de purga de Tailwind.
Cree un nuevo archivo de configuración de Tailwind ejecutando:
$ npx tailwindcss init: esto creará un nuevo tailwind.config.jsarchivo.
Para eliminar CSS no utilizado, agregaremos nuestros archivos fuente al campo de purga de esta manera:
Ahora nuestro CSS se purgará y los estilos no utilizados se eliminarán cuando compile para producción.
Cómo habilitar la recarga en caliente dentro de su extensión de Chrome
Una cosa más antes de agregar contenido a nuestra extensión: habilitemos la recarga en caliente.
Chrome no recarga los archivos de origen cuando realiza nuevos cambios; debe presionar el botón "Recargar" en la página de extensiones. Afortunadamente, hay un paquete de NPM que realiza una recarga en caliente por nosotros.
$ yarn add crx-hotreload
Para usarlo, crearemos un nuevo archivo llamado background.jsdentro de nuestra srccarpeta e importaremoscrx-hotreload
Finalmente, apunte hacia background.jsadentro manifest.jsonpara que pueda ser servido con nuestra extensión (la recarga en caliente está deshabilitada en producción por defecto):
Basta de configuración. Construyamos un pequeño formulario de script dentro de nuestra extensión.
Tipos de scripts en una extensión de Chrome
Como se mencionó al comienzo de esta publicación, en las extensiones de Chrome hay algunos tipos de scripts que puede usar.
Los scripts de contenido son scripts que se ejecutan en el contexto de la página web visitada. Puede ejecutar cualquier código JavaScript que esté disponible de otro modo en cualquier página web normal (incluido el acceso / manipulación del DOM).
Un script en segundo plano, por otro lado, es donde puede reaccionar a los eventos del navegador y tiene acceso a las API de extensión de Chrome.
Agregar una secuencia de comandos de contenido
Cree un nuevo archivo llamado content-script.jsdebajo de la srccarpeta.
Agreguemos este formulario HTML a nuestro archivo recién creado:
Diseñar una extensión de navegador no es tan sencillo como podría pensar porque debe asegurarse de que los estilos del sitio web no se vean afectados por sus propios estilos.
Para separarlos, usaremos algo llamado Shadow DOM . Shadow DOM es una poderosa técnica de encapsulación de estilos. Esto significa que el estilo tiene como alcance el árbol de sombras. Por lo tanto, no se filtra nada a la página web visitada. Además, los estilos externos no anulan el contenido de Shadow DOM, aunque las variables CSS aún pueden ser accesibles.
Un host de sombra es cualquier elemento DOM al que nos gustaría adjuntar nuestro árbol de sombra. Una raíz de sombra es lo que se devuelve attachShadowy su contenido es lo que se procesa.
Tenga cuidado , la única forma de diseñar el contenido de un árbol de sombras es mediante estilos integrados. Parcel V2 tiene una nueva función incorporada en la que puede importar el contenido de un paquete y usarlo como texto compilado dentro de sus archivos JavaScript. Entonces Parcel lo reemplazará en el momento del embalaje.
Hicimos exactamente eso con nuestro style.csspaquete. Ahora podemos incorporar el CSS automáticamente al Shadow DOM en el momento de la compilación.
Ahora tenemos que informarle al navegador sobre este nuevo archivo, sigamos adelante e incluyémoslo agregando estas líneas a nuestro manifiesto:
Para servir nuestra extensión, vamos a agregar algunos scripts a nuestro package.json:
Finalmente, puede ejecutar yarn watch, ir a chrome://extensionsy asegurarse de que el Modo de desarrollador esté habilitado en la parte superior derecha de la página. Haga clic en "Cargar sin empaquetar" y seleccione la distcarpeta debajo demo-extension.
- Si recibe este error:
Error: Bundles must have unique filePathssimplemente puede solucionarlo eliminando elmaincampo en supackage.json
Cómo publicar su extensión en Google Chrome Web Store
Antes de profundizar en esto, agreguemos un nuevo script NPM que nos ayudará a comprimir los archivos de extensión según lo requiera Chrome.
Si aún no lo zipha instalado , hágalo:
- Mac OS:
brew install zip - Linux:
sudo apt install zip - Para Windows, puede usar el comando powershell de
Compress-Archivemanera similar:powershell Compress-Archive -Path .\\dist\\ -Destination .\\chrome-extension.zip
Ahora todo lo que tiene que hacer es dirigirse al Panel de Desarrolladores de Chrome Web Store para configurar su cuenta y publicar su extensión.
- Puede encontrar la demostración completa de este tutorial alojado en mi cuenta de GitHub aquí
Conclusión
Al final, las extensiones de Chrome no son tan diferentes de las aplicaciones web. Hoy aprendiste a desarrollar una extensión utilizando las últimas tecnologías y prácticas en desarrollo web.
¡Esperamos que este tutorial te haya ayudado a acelerar un poco el desarrollo de tu extensión!
Si le resultó útil, envíe un tweet y síganme en @marouanerassili.
¡Gracias!