Construyendo Extensiones de Navegador con React - Que No Rompen Navegadores

Bienvenidos a todos. Mi nombre es Jonny Fekete, y hablaré sobre cómo construir extensiones web con React que no rompan los navegadores. Así que comencemos. Estoy seguro de que todos ustedes están muy familiarizados con trabajar con React ya que este es un congreso de React. Sin embargo, ¿alguna vez han intentado construir una extensión web usando React? Les puedo decir que no es tan fácil como están acostumbrados con su propia aplicación web. ¿Por qué soy elegible para hablar sobre el tema? Bueno, he estado trabajando con extensiones web listas para producción durante más de cinco años, y creo que enfrenté muchos desafíos que realmente llevaron al límite lo que es posible con extensiones web. Además, estoy contribuyendo a algunos de los proyectos de comunidades de código abierto en este campo. Y más que nada, tengo una serie de tutoriales en YouTube llamada webextensiontutorial.com donde pueden aprender gratis sobre cómo crear extensiones web.

Pero, ¿qué son las extensiones web, podrían preguntar? Bueno, realmente son solo archivos zip, con manifest.json. Eso es todo lo que se necesita para crear una extensión web. El archivo manifest.json es un JSON simple que describe qué permisos se requieren, cuál es el nombre de la extensión, la descripción, el número de versión, y muchas otras configuraciones. Y, básicamente, eso es todo. Si crean un archivo zip con esto, pueden comenzar inmediatamente a depurar y crear nuevas extensiones. Sin embargo, podrían haber escuchado que hace un par de años, Chrome pasó de manifest.v2 a manifest.v3. Introdujeron una versión más simplificada y segura de manifest.json. En v2, tenían scripts de fondo persistentes. Tenían acceso completo al DOM desde el fondo. Podían importar React en todas partes, incluso en el script de fondo. Tenían acceso al almacenamiento local y al almacenamiento de sesión. Y había muchas APIs que eran inconsistentes.

Y manifest.v3, resuelve todos estos problemas. Es mucho más restrictivo del lado de la extensión, pero da mucho más poder a los usuarios finales. Y algunos ejemplos de por qué las cosas son diferentes. El fondo ahora es un service worker, por lo que realmente no pueden mantener scripts de fondo persistentes. Los scripts pueden quedarse dormidos o morir y luego despertarse basados en ciertos disparadores. No tienen acceso al almacenamiento local. Tienen diferentes almacenamientos que son específicos de extensiones web. Todas las APIs ahora son asincrónicas y basadas en promesas. Y tienen restricciones de importación, por lo que realmente no pueden importar React en sus scripts de fondo. Si recuerdan hace unos años, la comunidad fue muy ruidosa sobre esto porque estas restricciones dificultaban el funcionamiento de los bloqueadores de anuncios y la gente culpaba a Google por introducir estas restricciones.

Pero como habrás notado, el mundo no se acabó. Todavía hay bloqueadores de anuncios, así que las cosas se resolvieron. Y ahora tenemos manifest.v3. Con las extensiones web, estamos hablando de contextos aislados porque una extensión web tiene un popup. Muchas de ellas tienen popups cuando haces clic en el icono. Aquí hay un ejemplo de Grammarly. Luego tiene un script de contenido de contexto cuando inyecta algún widget o alguna funcionalidad en la página web que está abierta en la pestaña. Y luego tiene scripts de fondo, que son como service workers. No tienen acceso a la pestaña abierta. Y el contenido del script de fondo no vive para siempre. No son persistentes. Podrías activarlos a través de ciertos eventos como cuando llega un mensaje o cuando el usuario cambia de pestaña, algunos cookies cambian. Los scripts de fondo pueden escuchar muchos eventos y luego cuando estos eventos ocurren, pueden hacer la lógica y luego morir o volver a dormir.

Sin embargo, una cosa importante a señalar aquí es que estos contextos están aislados. No viven en el mismo lugar. Tienes diferentes archivos para ellos. Estás iniciando React si estás usando React en todos estos lugares donde lo estás usando excepto en el script de fondo porque allí no puedes. Uno de los mayores problemas con las extensiones web es por lo tanto el desafío de comunicación porque ¿cómo le dices desde el popup algo al script de fondo o algo a la pestaña que está abierta? Bueno, hay una API para eso. Se llama sendMessage. Y aquí hay un ejemplo de popup a fondo. Puedes enviar Chrome.runtime.sendMessage con cualquier payload. En este caso, es action getData, pero puede ser cualquier objeto que pueda pasarse a JSON stringify.

Y el script de fondo puede escuchar mensajes. Como te dije, normalmente no está en vivo, pero Chrome.runtime.onMessage.addListener es una forma de escuchar mensajes. Y en nuestro caso, estamos verificando si el message.action es getData. Y si es getData, hacer algo y sendResponse. SendResponse es un parámetro opcional. Es una función de callback, pero esto es súper útil porque de esta manera podemos enviar mensajes de un lugar a otro y esperar hasta que la respuesta regrese. Esto funciona perfectamente cuando los scripts propiedad de la extensión son el objetivo, como el script de fondo o un popup o la barra lateral si usas una página web personalizada, una página de opciones personalizada. Sin embargo, cuando estás apuntando al script de contenido, que está viviendo dentro del contenido de la pestaña abierta, esto es un poco diferente, nada importante, pero tienes que usar Chrome.tabs.sendMessage.

Y nuestro primer parámetro es el ID de la pestaña para que puedas dirigirte a la pestaña específica. Y eso está bien, pero ¿qué pasa con el contexto de React o Redux o probe drilling? Si estás pensando en estos diferentes silos, entonces necesitas iniciarlo en todos ellos. Entonces, ¿cómo funciona? Bueno, este es probablemente uno de los principales desafíos del desarrollo de extensiones web. Pero hay muchos otros. Uno es cómo configurar el desarrollo. Y está la manera difícil, de la cual puedo hablar desde mis propias experiencias.

Configurar configuraciones personalizadas de web pack, es un dolor porque podrías necesitar tener cientos de líneas de configuración. Necesitas crear paquetes separados para el popup, para el script de contenido. La minificación es complicada. Realmente no hay recarga en caliente. Podrías perder horas de depuración. Y además, es bastante específico del navegador. Entonces, por ejemplo, quieres que npm run start abra Chrome con la extensión ya inyectada. Extremadamente complicado hacerlo con web pack. Es posible, por supuesto. También puedes usar rollup u otras cosas, pero necesitas hacer muchas cosas personalizadas.

Sin embargo, no serás la única persona que enfrenta este desafío. Y hay una manera más moderna de hacerlo con un framework llamado WXT, que es Next.js para extensiones, como afirman en su sitio web. Puedes instalarlo, y es un framework muy opinado, pero viene con muchas cosas buenas y gratuitas. Así que puedes comenzar a crear extensiones web de inmediato. Así que tus 300 líneas de configuración se convertirán en solo 10 líneas. Viene con una recarga de módulo en caliente realmente rápida porque utiliza VT bajo el capó. Soporta todo tipo de manifiestos, V2, V3, dependiendo de si estás apuntando a Chrome, Firefox o Safari.

Y también viene con soporte para React, así que eso es bueno para nosotros ya que esta es una conferencia de React. Sin embargo, incluso si estás usando el framework WXT, aún enfrentarás un par de desafíos, al menos yo los he enfrentado a lo largo de los años de mi viaje en el desarrollo de extensiones web. Y en la segunda mitad de esta presentación, repasaré los principales que creo que son un poco más complicados, y podrías no estar preparado si no has trabajado con extensiones web antes. Ninguno de ellos es extremadamente complicado, más bien cosas a considerar.

Así que comencemos con el primero, que es la persistencia de estado. Como puedes ver en este GIF, si abres un popup y haces algunos cambios en el estado, en nuestro caso, cambiar el fondo, que está usando useState, y cierras el popup y lo abres de nuevo, el estado desaparecerá. Y la razón es que cada vez que abres un popup, básicamente lo renderiza desde cero, así que todos los datos se pierden. Puedes crear tus propios hooks de almacenamiento. Puedes usar la API de Chrome para almacenamiento, o puedes usar una biblioteca llamada useChromeStorageLibrary.

Ahora, puedes almacenar datos de tres maneras diferentes, o cuatro, pero hablaremos de tres. El almacenamiento local, almacenamiento de sesión y sincronización de eventos. Estos no son los mismos almacenamiento local, almacenamiento de sesión que usaría tu sitio web subyacente. Estos son almacenamientos específicos para las extensiones, y local es obviamente persistente a través del navegador. La sesión es solo para la sesión actual. La sincronización es si tu usuario ha iniciado sesión con su cuenta de Google en Chrome, entonces si abren tu extensión en otro dispositivo donde también han iniciado sesión, los datos estarán allí también.

Es extremadamente fácil acceder a través de Chrome o como Firefox o cualquier API que estés construyendo, pero como mencioné, ya hay una biblioteca para eso. En nuestro caso, es la función useChromeStorageLocal, que utiliza el almacenamiento local, y puedes simplemente usarla desde tu popup, desde tus scripts inyectados, en todas partes cuando estás usando React.

El siguiente es la gestión de estado multi-pestaña, que es cuando tienes estado pero no solo una pestaña abierta, y aquí hay un ejemplo de la vida real. Por ejemplo, estás construyendo una extensión CRM, y quieres recopilar los correos electrónicos de las pestañas. Digamos que tienes tres pestañas abiertas. La primera tiene un perfil de LinkedIn con un correo electrónico. La segunda pestaña tiene un sitio web de una empresa, la página de información con tres correos electrónicos, y la tercera pestaña tiene un hilo de Gmail con ocho correos electrónicos.

Ahora, también puedes usar el almacenamiento como hicimos antes, y esa es la forma de hacerlo. Sin embargo, debes considerar el ID de la pestaña. El ID de la pestaña lo puedes obtener a través de la mensajería desde el script de fondo, y luego puedes usar el ID de la pestaña incluso en tu script de contenido y simplemente almacenar los datos con alguna referencia a la pestaña dada. También es muy importante, como mencionaré más adelante, limpiar los datos cuando la pestaña se cierra y cuando ya no necesitas los datos, porque a medida que las pestañas siguen creciendo, si los usuarios no cierran-cierra el navegador, solo siguen cerrando las pestañas, y no limpias los datos, y luego puede llevar a fugas de memoria.

También se recomienda usar el almacenamiento de sesión para esto. ¿Qué pasa con Redux? Bueno, no sé cuántos de ustedes todavía están usando Redux, pero probablemente muchos de ustedes lo estén, y estén familiarizados con él. Redux no es realmente posible en la configuración aislada de las extensiones web. Hay un plugin, una biblioteca WebExt Redux, que almacena los datos en el almacenamiento, pero está usando algunos proxies y mensajes para, básicamente, cada vez que hay, como, una acción de Redux, lo almacena en un almacenamiento, de la misma manera que estamos enviando mensajes con datos. Pero no es realmente recomendable. Funciona, pero a veces la serialización rompe las referencias de los objetos. Viene con muchos problemas de rendimiento. Es bastante difícil de depurar. Las herramientas de desarrollo de Redux no funcionan tan bien con esta biblioteca, y es mejor usar el almacenamiento. Como, si estás diseñando una nueva extensión web, solo sé considerado al respecto.

Si estás usando el almacenamiento, puedes acceder a los valores desde cada parte de la extensión web. El desafío número cuatro es algo con lo que me he encontrado muchas veces porque no fui lo suficientemente considerado, pero ahora lo soy. Colisión de CSS. Digamos que estás inyectando un pequeño widget en la pestaña abierta. Mencioné Grammarly, por ejemplo, pero sabes que muchos gestores de contraseñas también muestran pequeños widgets en las páginas, y tienes un diseño muy bonito para ello, pero el sitio web subyacente tiene su propia forma de, digamos, estilizar un botón. A veces, ya sabes, tienen estilos importantes, y realmente no puedes sobrescribir esos con tus propios estilos personalizados. Entonces, ¿cuál es la solución?

Bueno, también puedes poner importante a todos tus estilos y luego tener una hoja de estilos muy fea, pero hay una solución mucho mejor, que es usar el Shadow DOM y componentes web personalizados para envolver tu paquete de React. Esto viene gratis en el marco WXT. Aquí hay un ejemplo de cómo puedes hacer eso. Básicamente estás usando la interfaz CreateShadowRoot, y donde se está renderizando, simplemente lo renderizas dentro de eso. Esto viene con un aislamiento, por lo que todos los estilos que están fuera de tu componente, de tu componente web, no serán heredados por el componente web, así que estás comenzando desde cero, lo cual es realmente, realmente útil en la mayoría de los casos. A veces, por supuesto, no quieres eso, pero creo que en el 99% de los casos, quieres que tus estilos estén aislados de la página web subyacente si estás inyectando en ella.

El desafío número cinco es la comunicación entre una página web, tu aplicación web y la extensión. Aquí, un ejemplo de la vida real es como, por ejemplo, tu CRM tiene diferentes tarjetas de usuarios, personas, y quieres abrir la barra lateral cuando hacen clic en el botón Abrir en la aplicación web. Ahora, la aplicación web realmente no puede usar las APIs de Chrome para enviar mensajes. Sin embargo, puede usar window.postMessage, de la misma manera que se comunica con iframes, por ejemplo, y con window.postMessage, puedes enviar un mensaje que luego el script de fondo puede escuchar. La autenticación fue algo con lo que tuve desafíos hasta que aprendí que las extensiones de Chrome pueden realmente acceder a cookies solo HTTP también si tienes el permiso de cookies, y de esa manera, puedes escuchar los cambios de cookies y verificar si el usuario está autenticado o no. Esto no está disponible en el script de contenido, pero está bien. Puedes escuchar en el script de fondo, y en caso de que la autenticación pase, entonces obtienes la cookie y envías mensajes a través de toda la extensión.

Probablemente lo más complicado del desarrollo de extensiones web es lidiar con fugas de memoria. Hay tantas cosas donde puede salir mal, principalmente porque podrías tener nuevas pestañas abiertas. Así que mi recomendación genérica es que la limpieza no es opcional en las extensiones. Es absolutamente crítica para la estabilidad de producción. Me encontré con muchos problemas con llamadas a API redundantes. Nuevamente, las pestañas seguían agregando datos, scripts de fondo acumulándose. Tal vez tienes temporizadores que olvidas detener para cada pestaña, condiciones de carrera. Y una forma de cómo también puedes lidiar con eso es probablemente añadiendo throttling y debouncing mucho más pesado de lo que harías en tu aplicación web regular solo para aliviar la carga en el script de fondo.

Creé un pequeño benchmark, y encontré que no importa si estás usando almacenamiento local, almacenamiento de sesión, o el almacenamiento de sincronización. Almacenar datos en esos es casi gratis, así que no te preocupes por ellos. Envía todo al script de fondo y deja que maneje el throttling y el debouncing por ti. Puedes actualizar el almacenamiento. Solo no actualices el servidor. Finalmente, para resumir todo, hablamos sobre qué son las extensiones, el archivo manifest.json, mencioné el marco WXT, que hace nuestras vidas mucho más fáciles. Viene con muchas cosas listas para usar. Hablé sobre la comunicación entre los varios silos, las varias partes de las extensiones web, mensajes, oyentes, y muchas cosas de las que preocuparse, principalmente condiciones de carrera y limpiar todo después de que ya no necesitemos los datos. Estoy seguro de que tendrás muchas otras charlas interesantes en esta conferencia, pero estaría feliz de mantenerme en contacto. Puedes encontrarme en LinkedIn. Este es mi sitio web. Y una última vez, déjame mencionar webextentiontutorial.com, que tiene un curso gratuito en YouTube sobre la creación de extensiones web. Tal vez quieras aprender más, entonces eso es para ti. Muchas gracias por escuchar. Que tengas un muy buen resto de la conferencia. Adiós.