En el mini curso sobre React que grabé durante el mes de marzo de 2020 dediqué uno de los capítulos a mostrar cómo se puede crear de forma sencilla una extensión para Google Chrome a partir de un proyecto hecho con React.

Dado que me parece bastante interesante disponer de ese conocimiento me he animado a trasladar lo que comentaba en ese vídeo a este artículo para que más gente podáis conocerlo y podáis ponerlo en práctica en vuestros proyectos.

Así que… ¡vamos a verlo!

1. Configurando el archivo manifest.json

Para comenzar, lo primero que tendremos que hacer es dirigirnos a nuestro archivo manifest.json situado dentro de la carpeta public de nuestro proyecto y realizar las siguientes modificaciones.

Añadir la configuración browser_action con el fin de especificar el título de la extensión así como el archivo HTML de entrada a nuestra extensión.

"browser_action": {  "default_popup": "index.html",  "default_title": "Coronavirus"},

(especificar index.html como valor para default_popup se debe a que por defecto es el archivo html que se genera al ejecutar yarn run build dentro de la carpeta build de nuestro proyecto).

Por otra parte, es recomendable añadir también la versión que estamos empleando para crear el archivo manifest.json . En mis pruebas no he encontrado ningún problema especificando el valor 2 para esta propiedad:

"manifest_version": 2,

Además, en el caso de que estemos empleando funcionalidad extra del navegador, como el “local storage”, será necesario especificar que nuestra extensión requiere de dichos permisos:

"permissions": [  "storage"],

Por último, si bien los iconos de nuestra aplicación vienen especificados en el siguiente formato dentro del archivo manifest.json:

"icons": [{  "src": "favicon.ico",  "sizes": "64x64 32x32 24x24 16x16",  "type": "image/x-icon"},{  "src": "logo192.png",  "type": "image/png",  "sizes": "192x192"},{  "src": "logo512.png",  "type": "image/png",  "sizes": "512x512"}],

Al instalar la extensión Chrome nos mostrará un error diciendo que no es un formato válido para dicha propiedad, por lo que tendremos que modificarlo del siguiente modo:

"icons": {  "16": "icon16.png",  "24": "icon24.png",  "32": "icon32.png",  "128": "icon128.png"}

El valor para cada tamaño de icono es el path relativo desde la carpeta public . En este ejemplo yo los he dejado dentro de la carpeta public directamente.

Con esto ya tendremos por completo configurado este archivo y podremos avanzar al siguiente paso:

Nota. Si queréis leer más sobre este archivo podéis hacerlo en el siguiente enlace:

2. Generando el build de nuestra aplicación

El siguiente paso es muy sencillo. Bastará con abrir nuestra terminal y en vez de ejecutar el comando yarn run start --watch (empleado durante el desarrollo), ejecutar yarn run build para obtener dentro de la carpeta build el desplegable de nuestra aplicación.

3. Instalando la extensión en chrome

Una vez que hemos creado satisfactoriamente el desplegable de nuestra aplicación, abriremos Google Chrome e introduciremos lo siguiente en la barra de direcciones:

chrome://extensions

Lo cual nos llevará al administrador de extensiones. Desde ahí, habilitaremos el modo desarrollador:

Lo cual nos permitirá subir nuestras propias extensiones. A continuación, en la nueva barra de menú pulsaremos sobre el botón “Cargar descomprimida”:

Y seleccionaremos la carpeta build de nuestro proyecto. Si todo ha ido bien, veremos la extensión añadida a la lista de extensiones:

Pero todavía nos quedará un paso…

4. Habilitando la ejecución de scripts externos

Pese a que tras haber instalado la extensión veréis su icono en la barra de extensiones de Google Chrome, la extensión no funcionará.

Si volvemos a acceder a chrome://extensions y pulsamos sobre el botón “Errores” veremos el siguiente mensaje:

“Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘self’ blob: filesystem”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-XXX’), or a nonce (‘nonce-…’) is required to enable inline execution”.

Es decir, necesitamos habilitar la ejecución de scripts externos en nuestra aplicación de modo que Google Chrome la reconozca como una extensión válida.

Para ello, volveremos a nuestro archivo manifest.json y añadiremos lo siguiente:

{
  ...,  "content_security_policy": "script-src 'self' 'sha256-XXX'; object-src 'self'"

Siendo el valor del cifradosha256 aquel que nos ha dado Google Chrome en el propio mensaje de error.

Con esto, volveremos a ejecutar yarn run build para obtener un nuevo desplegable que volveremos a cargar como extensión en Chrome siguiendo el mismo proceso anterior.

Ahora sí, ya tendremos la extensión funcionando 👏👏👏

Si queréis ver el proceso en video os dejo el enlace al capítulo donde lo explico:

5. Configurar nuestra extensión para que actúe sobre elementos de las páginas web

Una de las características más interesantes que nos permiten las extensiones de Chrome es poder interactuar con los elementos de las páginas web (por ejemplo, las típicas aplicaciones de relleno automático de contraseñas).

Para desarrollar una aplicación de este estilo es necesario realizar lo siguiente.

Eject de nuestra aplicación

Por desgracia necesitamos realizar un eject de nuestra aplicación para poder modificar la configuración de webpack. Para ello ejecutaremos:

yarn run eject

Modificando la configuración de webpack

A continuación, iremos a la carpeta config y abriremos el archivo webpack.config.js .

Allí tendremos que eliminar la generación de hashes en nuestros archivos, ya que en el paso siguiente estaremos obligados a declarar dentro del archivo manifest.json todos los archivos que emplea nuestra aplicación por lo que tendemos que prescindir de los hash para hacer este proceso.

Por tanto, haremos una búsqueda de .[hash:8] y de .[contenthash:8] y eliminaremos todas sus apariciones.

Modificando el archivo manifest

Finalmente, volveremos a nuestro archivo public/manifest.json y añadiremos la propiedad content_scripts especificando las url’s donde queremos que nuestra extensión se habilite (podemos especificar <all_urls> para este valor) así como el nombre de todos los archivos de los que consta nuestra extensión:

Como veis, estoy especificando todos los chunks generados por el comando yarn run build dentro de la carpeta build/static :

Hecho esto, bastará con volver a ejecutar el comando yarn run build para tener lista nuestra extensión.

Toque final

También podemos modificar nuestro archivo index.js de nuestra aplicación para escoger en qué elemento / elementos de una página web queremos cargar nuestra extensión.

Por ejemplo, la página de inicio de Google posee un elemento con id="viewport" por lo que podemos escoger ese elemento para cargar nuestra extensión:

Conclusión

Como habéis podido ver, es bastante sencillo crear una extensión para Chrome, por lo que puede resultar interesante añadir esta característica a nuestros proyectos de cara a mejorar la experiencia de nuestros usuarios o a apartar más valor en los proyectos que desarrollaremos.

Apóyame en Patreon

Gracias a: Alex Fuentes.

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇