Construyendo Web Extensions Con Tu Framework Favorito

Hola a todos, mi nombre es Alba Silvente y trabajo como Fullstack Engineer en Servlug. Hoy quiero hablar sobre desbloquear el poder de las extensiones web usando tu framework de JavaScript favorito. En mi caso, usaré Vue porque es el que amo, pero puedes usar cualquier framework que te guste. Así que primero quiero mostrarte un pequeño adelanto de cómo se verá la demo. Aquí tienes la preferencia donde el usuario puede seleccionar lo que quiere ver cuando navega entre páginas. Y luego en la página de opciones tengo el mismo componente, solo mostrando las diferentes preferencias, así que cada vez que lo cambias puedes ver los cambios en tiempo real entre ellos. Y una vez que seleccionas una palabra en la página que estás navegando, verás un menú fuera de la preferencia que seleccionaste, donde estamos llamando a las APIs de IA integradas del navegador para generar la respuesta.

Así que en esta charla quiero mostrarte cómo construir esto y qué necesitas saber para hacerlo. Así que la agenda se verá así. Primero hablaremos sobre qué, por qué y cómo construimos nuestra extensión. Luego veremos el estándar detrás de ellas y la estructura que nuestro proyecto necesita seguir para crear una extensión web. Más tarde veremos los paquetes y frameworks de código abierto que podemos usar para construir extensiones web fácilmente y sin el dolor de configurar todo el proyecto. Y más tarde veremos los casos prácticos de uso que construí con esta demo, para que entendamos cómo convertir nuestras ideas en una extensión web.

¿Y qué es una extensión web? Bueno, es tan simple como una pequeña página. Es como una aplicación de una sola página, es solo un pequeño programa desarrollado en HTML, CSS y JavaScript que se integra en un navegador para personalizarlo y añadirle nuevas funcionalidades. Así que puedes imaginar que si quieres añadir una pestaña de DevTools, necesitarás hacer algo más que crear un sitio web. Por eso se necesitan las extensiones web para desarrollar más cosas dentro del propio navegador. Así que ayuda al usuario a tener más capacidades gracias a eso. ¿Y qué hay para mí? Por supuesto, pensarás que tal vez crear una extensión puede ser realmente excesivo para algo en lo que no quieres gastar tanto tiempo. Pero imagina que tienes una tarea repetitiva que haces todos los días y que puedes automatizar de alguna manera usando extensiones web. Por eso vi el potencial y quise desarrollar mi propia demo para que puedas ver cuál es el poder de las extensiones web y cuántas cosas puedes construir con ellas. Y hay extensiones web para todo lo que puedas imaginar. Para traducir contenido, hay extensiones web para formatear el JSON que estás viendo en una página para que puedas verlo más bonito y fácil de leer.

También hay extensiones que completan formularios por ti, así que creas el contenido en una extensión y luego cuando vas a una página y llenas el formulario, lo completas automáticamente con estos datos que ya guardaste. Así que estás ahorrando mucho tiempo y eso es una herramienta realmente poderosa.

Pero, ¿qué necesitas para construir una extensión web hoy en día? Bueno, primero necesitarás conocer el Manifest V3, que es el estándar detrás de las extensiones web, y usar tu framework de JavaScript de confianza, que para mí será Vue. Así que el Manifest V3 es solo el estándar, como te dije, para crear extensiones web en navegadores como Chrome, Firefox y X. También puedes crear para Safari, pero hay diferencias entre las APIs, pero por supuesto tenemos herramientas de código abierto para ayudar con eso.

La estructura de una extensión web será solo archivos, archivos JavaScript, HTML y JSON, componentes como el pop-up, la barra lateral, el contenido scrape, bueno, los veremos ahora, o el contexto que conforman esta extensión web. Así que hay tantas cosas diferentes que necesitamos saber cuando empezamos que queremos simplemente saltar directamente a ello, para que puedas verlas todas, o al menos un vistazo de las más utilizadas, y luego puedes comenzar a explorar más a fondo cada una de ellas.

Así que el primer archivo del que queremos hablar es el manifest.json. Es el archivo donde se definen los detalles esenciales de la extensión web. Así que el nombre de la extensión, su descripción, su versión, las funcionalidades que queremos usar del navegador, y necesitamos permisos para eso. No todo está disponible a menos que lo solicites, esto es importante, y dónde se encuentran los componentes en tu código para que funcione en el navegador, así que necesitarás señalarlos en este archivo. Así que este es un ejemplo de cómo se verá un manifest.json para una extensión web realmente simple. Aquí vemos el nombre, la versión, la descripción que también son los que puedes ver en la Chrome Web Store.

Así que estas son las pantallas que hice para entender cómo se verá esto, y luego tienes los permisos con la pestaña activa, el fondo, donde se encuentra en el JavaScript de fondo, y luego la acción, el pop-up completo, esto es básicamente cuando haces clic en el ícono de la extensión, se abrirá un pop-up. Ese pop-up es solo el archivo HTML que estamos llamando aquí desde la raíz del proyecto y el script de contenido. Así que puedes ver que en el manifest.json, es como package.json cuando estás creando paquetes de código abierto en él. Necesitas señalar los archivos que realmente quieres renderizar y cuándo. Luego hablemos del archivo JavaScript de fondo.

Así que este fondo es un componente de la extensión web y tiene su propio contexto. El contexto para un fondo es un service worker. Así que todo lo que sucede en el fondo está sucediendo en un service worker. Así que estos son solo scripts que se ejecutan en el fondo como dice el nombre y manejan eventos del navegador. Así que cada vez que cierras una pestaña o navegas, lo saben. Si estás agregando listeners de eventos y solicitas los permisos que necesitas, obtendrás toda la información de estas navegaciones y tomarás acciones con tus extensiones web, en caso de que quieras realizar acciones cuando eso suceda. Y por supuesto, el manifest v3 es solo porque crearon diferentes versiones, y hoy en día introducen los service workers. Pero antes, los fondos estaban en otro hilo y tenían su propio DOM. Ahora mismo no tienen DOM.

Así que es realmente importante que estén en un contexto diferente. Luego tenemos las páginas emergentes y de barra lateral. Este es un componente que ves cuando haces clic en el ícono, ¿no es así? Y tienen su propio contexto, el contexto emergente. Son solo interfaces de usuario, ya que construiremos una sola página. Y puedes construirlo, por supuesto, con JavaScript, con Vue, con React, con Angular, con Svelte, cualquier framework de JavaScript o simplemente JavaScript puro.

Aquí vemos un ejemplo de un popup. En el HTML, puedes ver que tenemos algún título y también estamos renderizando algo de HTML. Pero la parte importante es que estamos llamando a un archivo JavaScript. Este archivo JavaScript también se encuentra en la raíz del proyecto, pero no es importante para el manifest esencial. Así que lo estamos llamando allí como un script para cargar todo este JavaScript en nuestro popup. Aquí puedes ver que solo estamos leyendo. Cada vez que alguien hace clic en el botón, generaremos todos los H1 de la página en rojo.

Así que es importante saber que cuando esto sucede, cambiarás el color de los H1 del contexto del popup. Y esto no es realmente lo que queremos, ¿verdad? Lo que queremos es cambiar el H1 de una página que estamos navegando. Por eso es importante entender que tienen su propio contexto porque no pueden alcanzar otros contextos sin comunicarse con ellos. Así que si realmente quieres cambiar el H1, necesitarás el script de contenido. ¿Por qué?

Y son solo scripts que interactúan con estas páginas web que estamos navegando, inyectando funcionalidad, modificando el contenido y pasando información a las partes de las extensiones. Así que así es como necesitas comunicarte con el script de contenido porque el script de contenido tiene más acceso a la página web que los otros contextos. Así que si vemos lo que haremos para realmente renderizar los H1s de la página que estamos navegando en rojo, lo que necesitaremos hacer es cada vez que hacemos clic en el botón del popup, iremos a buscar en el navegador de Chrome, las pestañas. Veremos la que está activa, la que estamos navegando. Y diremos, está bien, envía un mensaje con esta pestaña para que el script de contenido lo sepa. Y luego el mensaje cambiar color ejecutará la acción que queremos. Aquí solo estamos escuchando los mensajes que se están enviando al script de contenido. Y luego leemos el mensaje. Si el mensaje es mismo color, cambiaremos los colores de los H1s a rojo.

Así que esto es lo que sucederá si haces eso. Es tan básico como tener en cuenta qué contexto se está aplicando realmente para la acción que deseas realizar. Así que si en mi caso quiero realizar una acción en la página web, haré la comunicación entre el popup y el script de contenido. Pero si quiero ejecutar la acción directamente en la página del popup, entonces no necesitas comunicarte con ningún otro componente. Pero solo para que lo sepas, puedes hacer eso. Y por último, tenemos la página de opciones. La página de opciones es solo una página dedicada que crearon para que los usuarios que usan la extensión web configuren los ajustes. Por supuesto, puedes hacer esta configuración en cada parte de la extensión web, si soy honesto.

Pero la página de opciones es una página dedicada que se abre. Así que puedes tener una especificación realmente detallada de qué ajustes pueden tener. Pero hay mucho más sobre extensiones web que puedes hacer. Puedes sobrescribir páginas de inicio por completo. Puedes sobrescribir los marcadores y hacer lo que quieras con toda la información que la página de marcadores te proporcionará. También puedes cambiar el historial por completo o agregar una nueva pestaña. Así que cada vez que abres una pestaña, aparecerá una página diferente. Podemos ver eso con daily.dev, por ejemplo. También podemos extender DevTools. Así que por ejemplo, Vue.DevTools está construido como una extensión web, así que puedes abrir una nueva pestaña en DevTools y ver un comportamiento diferente al que verías solo inspeccionando el código. Y también puedes agregar opciones al menú de contexto.

Así que cada vez que haces clic derecho en algo, verás una lista de opciones provenientes de la extensión web que instalaste. Esto es increíble. Puedes cambiar todo lo que quieras. Pero, por supuesto, ¿cómo construiremos esto? Y es necesario conocer estas APIs del navegador, saber cómo interactuar con ellas, conocer lo básico a tal nivel cuando estás comenzando. Nah, no hay necesidad de eso. Tenemos paquetes en OpenSearch que te ayudarán. El primero que te explicaré es el WebExtension Polyfy. Básicamente, Mozilla tuvo un problema cuando estaban migrando del manifiesto B2 al B3, y necesitaban tener una forma de entender todas las APIs que tienen y hacer que funcionen juntas. Y es por eso que crearon este paquete que puedes usar, y proporciona un navegador, un estándar. Y entonces no necesitas realmente ir a chrome.tabs, como hice antes. Puedes usar el navegador, y entonces tendrás una mejor API para construir extensiones web.

Luego tenemos el paquete webext también de Mozilla. Que es una herramienta de comandos que te permite hacer el desarrollo, pruebas y empaquetado de extensiones web mucho mejor. Así que puedes ejecutar un comando, y luego verás tu extensión web ejecutándose en una nueva instancia de Chrome o Firefox, por ejemplo, sin un perfil, y puedes comenzar a probar tu extensión web libre de cosas que has instalado en tus propios perfiles. Así que es como un borrón y cuenta nueva para comenzar a construir extensiones web. Es realmente genial, y, por supuesto, te recomiendo aprender sobre ello, pero la mayoría de los frameworks que te mostraré o las plantillas que ya tenemos contienen este.

Luego tenemos la parte de almacenamiento. Así que cuando estamos almacenando cosas en extensiones web, estamos almacenando cosas en una parte especial del navegador. No es lo mismo que usamos para páginas web. Para páginas web, usamos almacenamiento local, almacenamiento del sistema. Pero para extensiones, tenemos un lugar especial donde también tenemos almacenamiento local, almacenamiento del sistema, almacenamiento sincronizado. Quiero decir, hay muchos tipos. Pero la idea es que estas APIs del navegador son un poco tediosas de aprender, y es por eso que crearon este paquete para tener un agrupador que simplifica la API, y es más fácil de mantener también para ti en el futuro. Así que realmente lo uso con la extensión web que construyo, pero, por supuesto, puedes hacerlo desde cero si no quieres usar un paquete, pero recomiendo usar estos porque son realmente geniales, y funcionan muy bien, y también están muy bien documentados. Y luego tenemos la mensajería. Así que cada vez que nos comunicamos entre todos estos componentes, también necesitamos conocer las APIs del navegador y cómo se llaman y cómo necesitas comunicarte de uno a otro. Varía. Así que este paquete, el WebX Bridge, simplemente ayudó a mi vida porque solo agrega enviar mensaje, y especificas a qué componente, por ejemplo, background, y lo hace automáticamente, todas estas APIs del navegador que necesito memorizar. Así que es realmente genial usarlo porque no necesitas pensar en ello. Solo di exactamente lo que quieres, y el WebX Bridge se comunicará con Firefox o Chrome de la manera que necesita.

Así que no necesitas pensar en ello. Y, por supuesto, no hay necesidad de usar todos estos paquetes porque ya están en una plantilla. Y si estás usando React, puedes usar Vite web extension. Si estás usando Vue, puedes usar Vite WebExt creado por AMPful. Y tienen recarga de modelo completa, reactividad, reutilización, TypeScript, todo configurado desde el principio, y la mayoría de los paquetes que acabo de explicar. Así que tienes todo configurado, y puedes comenzar sin pensar en la configuración de tu proyecto. Pero, por supuesto, si quieres profundizar en ello, cuando termines de usar estas plantillas, porque entonces tendrás una idea de cómo construir extensiones web, necesitas probar el framework WXT. Es una locura. Es igual que tenemos con Next y Next, pero para extensiones web. Es realmente poderoso. Te proporciona mucha estructura con opiniones, y por eso te digo que primero comiences con una plantilla que es más fácil para que tengas una idea de cómo crear extensiones web, y luego vayas con WXT porque es increíble, y te ayudará mucho a desarrollar una extensión web en solo minutos.

Es una locura. Así que ahora quería mostrarte los casos de uso prácticos que preparé para esta charla. Para cada funcionalidad que pensé, la idea que tengo de ellas, necesito saber qué componentes necesito usar para tener esta idea en la extensión web. Y también necesito pensar cómo nos comunicamos entre estos componentes para lograr lo que quiero y desde dónde queremos ejecutar la acción que quiero realizar. Son muchas preguntas, pero es fácil de ver con un gráfico visual que creé, así que vamos a ello. Pensemos como un usuario de extensión, quiero configurar mi preferencia una vez, así que los ajustes, y quiero que se apliquen consistentemente en toda la aplicación. Para lograr eso, necesito usar diferentes componentes. El primero será la página emergente y la página de opciones donde haré que el usuario configure estas preferencias. Luego las almacenaré en el almacenamiento de la extensión web, y para hacer eso, necesito pedir permiso al navegador usando el permiso de almacenamiento en el manifest.json. Y una vez que tengo el permiso y almaceno mis datos allí, quiero consumirlo ¿desde dónde? Desde el script de contenido. Así es como se verá el flujo de comunicación. Desde la página emergente o la página de opciones, estableceré el valor en el almacenamiento web, y luego obtendré el valor desde los diferentes lugares donde quiero renderizar estas opciones. Así que en este caso, en el script de contenido, pero también en la página emergente y la página de opciones porque quiero tenerlo alineado con lo que está almacenado, ¿no es así? Y tiene sentido. Así que ahora es el momento de una pequeña demostración del código que construí para lograr esto. Y básicamente, usé, como te dije, WXD. Y tiene esta estructura con opiniones, pero puedes ver en el sitio web, la parte importante aquí es cómo defino el almacenamiento. Así que inicialmente, defino el almacenamiento usando su paquete. Tienen un paquete, como te dije, de código abierto, por supuesto, para crear el almacenamiento sin pensar en todas las APIs del navegador. Así que si llamo a storage, ya estoy llamando al almacenamiento de la extensión web.

Y estoy definiendo un elemento para poder tener un valor predeterminado y un valor por defecto para mis preferencias. Y especifico aquí que quiero almacenamiento local y no almacenamiento CCN o lo que sea. Así que aquí con el almacenamiento local, proporciono las opciones que quiero. Luego, para usarlas, creé un composable para poder usarlas entre todos los diferentes componentes sin la necesidad de recrear todo de nuevo. Y lo único que hago es crear una variable reactiva. Simplemente la configuro inicialmente al valor que ya está en el almacenamiento. Y luego creo un método donde puedo establecer el valor. Es tan simple como esto, pero por supuesto, si también quiero que la variable reactiva sepa cada vez que cambiamos en los diferentes componentes, el nuevo valor ha cambiado, necesito agregar un observador. Pero también hay un observador en este paquete de código abierto que tienen para el almacenamiento. Así que puedes ver que es realmente simple. Y lo único que hago es usarlo en el componente de configuración que estoy usando en todos los lugares donde quiero renderizar la configuración. Así que básicamente, estoy obteniendo todo del composable que creé. Y aquí, básicamente tengo en los valores y estableciendo los valores con la actualización de preferencia. Por supuesto, este es un objeto que es un lío, podría haberlo hecho mejor, pero aún así, este no es el punto. El punto es cómo usamos un almacenamiento local desde las extensiones web.

Y luego en el content script, que es solo un punto vacío en un proyecto web, lo que hago es llamar también a la preferencia, a la variable reactiva, y simplemente renderizar las opciones de mi menú de content script cada vez que las cambio. Así que veamos una demostración de cómo se ve esto. Básicamente, este es el pop-up de la extensión web, y cada vez que cambio algo, simplemente lo guardo en el almacenamiento de la extensión web que, de hecho, si voy a la página de opciones, podemos ver. Básicamente, aquí podemos ver la reactividad siendo realizada debido al observador, por supuesto. Y si inspecciono, y voy a la aplicación, podremos ver exactamente. Así que aquí, el almacenamiento de la extensión, puedes ver local, y aquí tenemos las preferencias. Básicamente es lo mismo que tenemos con el almacenamiento local, pero tienen su propio almacenamiento de extensión, porque al final, cada vez que instalas una extensión, tienes su propio contexto mundial, para ser sincrónico entre cada parte del navegador, ¿no es así? Porque estás usando la extensión en todas partes, no solo en una página web. Así que es importante que sepas que hay un contexto para eso. Pero sí. Así que aquí, cuando hacemos eso, el content script ahora está mostrando algunas opciones aquí, y están relacionadas con las que estoy seleccionando aquí. Puedes ver que cambió en tiempo real también, debido a la variable reactiva. Pero sí, básicamente, así es como puedes usar este almacenamiento. Así que ahora, pasemos a otro caso de uso.

Ahora, quiero, como usuario de la extensión, ver un menú cuando selecciono un texto, como te mostré ahora mismo. Para poder realizar acciones en ese texto, y extraer su significado usando AI. Este es otro tema. Básicamente, tenemos algunos componentes que necesitamos usar. Primero, el content script, cada vez que seleccionamos un texto, queremos saber que este texto fue seleccionado para renderizar un menú. Luego necesitamos también las AI APIs integradas, y para tener acceso a estas funciones desde el navegador, necesitamos proporcionar el permiso, AI language model origin trial. Sí, origin trial, porque están en prueba. No hay algo realmente listo para usar. Es una prueba que están construyendo, pero es tan genial, necesitas probarlo. Así que una vez que tengas eso en el manifest.json, necesitarás pedir los tokens de prueba para cada AI API integrada. Pero puse todo en el readme del proyecto, así que podrás hacerlo tú mismo. No te preocupes. Y luego el background script, donde realmente llamaremos a estas APIs integradas. Así es como funcionará el flujo de comunicación. Desde el content script, hacemos clic en una acción, y eso enviará un mensaje al background. ¿Por qué? Porque el background es el que tiene acceso a las APIs integradas, no el contexto de la página. Así que por eso necesitamos ir del background a las AI APIs integradas, y luego cuando obtenemos el texto AI generado, volverá al background, y el background enviará ese texto de vuelta al content script.

Hay muchas promesas alrededor de esto, pero por supuesto es más simple de lo que esperabas. Y ahora veamos el código para que esto funcione. Así que comencemos primero con el content script. El content script, al final... Perdón por este desorden, pero sí. Así que al final, tiene un componente donde añadimos la acción básica que estamos ejecutando, y cada vez que hacemos clic en la acción, mostrará el resultado, pero también si hacemos clic en los fuegos artificiales, que es solo la estrella, generará esta AI. Así que este es el método que estamos llamando y donde estamos enviando el mensaje al background. Aquí dije, está bien, envía el mensaje, obtiene la respuesta de AI con el tipo de acción, así que básicamente la descripción, el uso, todo lo que configuramos en las preferencias, y la selección de texto del usuario. Y luego el background es el que debería recibir este mensaje.

Así que si vamos al background, al archivo index, veremos que tenemos un onMessageListener. Este onMessageListener solo está obteniendo esta información que enviamos, y luego si la acción es la esperada, llamará a un método que seleccionará qué API queremos usar. Así que aquí, basado en el tipo de acción, si es traducir, iremos a la API de traductor. Si no, usaremos el resumidor de usuario. Y si es cualquier otra acción, usaremos la API de prompt que es solo una sesión como un chat.

Así que solo para que lo sepas, para terminar la charla, necesitas entender que cada vez que creas nuestra extensión, no significa que irá a producción. Puede ser local para ti mismo, puedes hacerla de código abierto, y todos pueden descargarla para usarla. Así que puedes hacerla disponible sin realmente publicarla. Y para hacer eso, solo necesitas ir a extensiones, establecer el modo desarrollador en verdadero, y luego cargar tu extensión desempaquetada después de construirla. Y luego si quieres, por supuesto, desplegarla, hay una manera de hacerlo. Tienes Chrome Web Store, también tienes la de Firefox, y puedes simplemente publicarla allí para que todos puedan descargarla, y tal vez en algún momento puedas ganar dinero con ella. Pero por supuesto, para esta charla, la demo que creé, puedes usarla localmente. Solo ve al repositorio, y en este código QR, lo tienes. Así que solo escanéalo, ve al repositorio, descárgalo, pruébalo, cámbialo, haz lo que quieras. Y muchas gracias por escuchar. También dejé en el readme muchos recursos, como puedes ver aquí en esta diapositiva. Y por supuesto, si tienes alguna pregunta sobre cualquier programa de desarrolladores como Google Developer Experts, MVP, Women Developers, házmelo saber porque soy parte de ellos, y me encantaría ayudarte a unirte si quieres porque te dan acceso a este tipo de pruebas originales antes que nadie, y eso es realmente genial. Así que puedes encontrarme en Dan Traus en todas las redes sociales, y mantengámonos en contacto. Muchas gracias. Que tengas un buen día.