Construyendo Web Extensions Con Tu Framework Favorito

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

¿Quieres automatizar tareas manuales diarias o explorar la ampliación de la funcionalidad del navegador? Esta charla te tiene cubierto; desglosaremos cómo construir Web Extensions desde cero, cubriendo arquitectura, gestión de estado, Manifest V3, mejores prácticas y herramientas para dar vida a tus ideas! 🚀

This talk has been presented at JSNation 2025, check out the latest edition of this JavaScript Conference.

Alba Silvente Fuentes
Alba Silvente Fuentes
25 min
16 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Alba Silvente, Fullstack Engineer en Servlug, discute cómo desbloquear el poder de las web extension con Vue. Muestra características de demostración y uso de AI API. Habla sobre la construcción de extensiones, estándares, estructuras, herramientas de código abierto y casos prácticos. Explora la simplicidad y los beneficios de las web extensions para la personalización, automatización y ahorro de tiempo. Menciona funcionalidades variadas como traducción, formateo de JSON y llenado de formularios usando extensiones. Explorando extensiones de llenado de formularios y construyendo web extensions con Manifest V3 y Vue. Entendiendo la estructura y componentes como páginas emergentes y de barra lateral. Discutiendo manifest.json para definir detalles de la extensión, JavaScript de fondo en el contexto del service worker, y creando páginas emergentes y de barra lateral. Discutiendo la importancia de diferentes contextos para páginas emergentes y de barra lateral, personalización con varios frameworks de JavaScript, y utilizando scripts de contenido para interactuar con páginas web. Comunicándose con scripts de contenido, configurando ajustes a través de la página de opciones, y extendiendo web extensions con varias funcionalidades como sobrescribir páginas de inicio, marcadores, historial y agregando opciones al menú contextual. Comunicándose con APIs del navegador para web extensions usando paquetes como WebExtension Polyfy y webext. Almacenando datos en web extensions de manera eficiente con áreas de almacenamiento especializadas. Simplificando la comunicación entre componentes usando el paquete WebX Bridge para interacciones sin problemas con las APIs del navegador. Usando frameworks Vite y WXT para el desarrollo de web extension. Implementando configuración de preferencias y flujo de comunicación entre componentes para la creación eficiente de web extension con WXD. Definiendo elementos en el almacenamiento local para preferencias y usando composable para componentes compartidos en el desarrollo de web extensions. Usando almacenamiento de extensiones para la sincronización de web extension e integrando AI APIs para análisis de texto. Explorando Content Script Actions, Background API Communication, y Extension Deployment.

1. Unlocking Web Extension Power with Vue

Short description:

Alba Silvente, Fullstack Engineer at Servlug, discute sobre desbloquear el poder de las extensiones web con Vue. Muestra características de demostración y uso de API de IA. Habla sobre la construcción de extensiones, estándares, estructuras, herramientas de código abierto y casos prácticos de uso. Explora la simplicidad y los beneficios de las extensiones web para la personalización, automatización y ahorro de tiempo. Menciona diversas funcionalidades como traducción, formateo de JSON y llenado de formularios usando extensiones.

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.

2. Building Web Extensions with Manifest V3 and Vue

Short description:

Explorando extensiones para el llenado de formularios y construyendo extensiones web con Manifest V3 y Vue. Entendiendo la estructura y componentes como las páginas emergentes y de barra lateral.

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.

3. Exploring Web Extension Manifest and Components

Short description:

Discutiendo manifest.json para definir los detalles de la extensión, JavaScript de fondo en el contexto del service worker, y creando páginas emergentes y de barra lateral.

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.

4. Managing Contexts for Web Extension Components

Short description:

Discutiendo la importancia de diferentes contextos para las páginas emergentes y de barra lateral, la personalización con varios frameworks de JavaScript, y la utilización de scripts de contenido para interactuar con páginas web.

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é?

5. Extending Web Extensions Functionality

Short description:

Comunicándose con scripts de contenido, configurando ajustes a través de la página de opciones, y extendiendo las extensiones web con varias funcionalidades como sobrescribir páginas de inicio, marcadores, historial y agregar opciones al menú de contexto.

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.

6. Efficient Web Extension Development

Short description:

Comunicándose con las APIs del navegador para extensiones web usando paquetes como WebExtension Polyfy y webext. Almacenando datos en extensiones web de manera eficiente con áreas de almacenamiento especializadas. Simplificando la comunicación entre componentes usando el paquete WebX Bridge para interacciones fluidas con las APIs del navegador.

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.

7. Advanced Web Ext. Development

Short description:

Usando los frameworks Vite y WXT para el desarrollo de extensiones web. Implementando la configuración de preferencias y el flujo de comunicación entre componentes para la creación eficiente de extensiones web con WXD.

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.

8. Utilizing Local Storage and Composables

Short description:

Definiendo elementos en el almacenamiento local para preferencias y usando composable para componentes compartidos en el desarrollo de extensiones 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.

9. Enhancing Web Extensions with AI Integration

Short description:

Usando el almacenamiento de extensiones para la sincronización de extensiones web e integrando AI APIs para el análisis de texto.

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.

10. Implementing Content Script Actions & Deployment

Short description:

Explorando Acciones de Content Script, Comunicación de API en Background y Despliegue de Extensiones

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Entendiendo la Arquitectura Fiber de React
React Advanced 2022React Advanced 2022
29 min
Entendiendo la Arquitectura Fiber de React
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Thinking Like an Architect
Node Congress 2025Node Congress 2025
31 min
Thinking Like an Architect
Top Content
In modern software development, architecture is more than just selecting the right tech stack; it involves decision-making, trade-offs, and considering the context of the business and organization. Understanding the problem space and focusing on users' needs are essential. Architectural flexibility is key, adapting the level of granularity and choosing between different approaches. Holistic thinking, long-term vision, and domain understanding are crucial for making better decisions. Effective communication, inclusion, and documentation are core skills for architects. Democratizing communication, prioritizing value, and embracing adaptive architectures are key to success.
Instala Nada: Interfaces de Usuario de Aplicaciones con APIs Nativas del Navegador
JSNation 2024JSNation 2024
31 min
Instala Nada: Interfaces de Usuario de Aplicaciones con APIs Nativas del Navegador
Top Content
This Talk introduces real demos using HTML, CSS, and JavaScript to showcase new or underutilized browser APIs, with ship scores provided for each API. The dialogue element allows for the creation of modals with minimal JavaScript and is supported by 96% of browsers. The web animations API is a simple and well-supported solution for creating animations, while the view transitions API offers easy animation workarounds without CSS. The scroll snap API allows for swipers without JavaScript, providing a smooth scrolling experience.

Workshops on related topic

IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
Masterclass de alto rendimiento Next.js
React Summit 2022React Summit 2022
50 min
Masterclass de alto rendimiento Next.js
Workshop
Michele Riva
Michele Riva
Next.js es un marco convincente que facilita muchas tareas al proporcionar muchas soluciones listas para usar. Pero tan pronto como nuestra aplicación necesita escalar, es esencial mantener un alto rendimiento sin comprometer el mantenimiento y los costos del servidor. En este masterclass, veremos cómo analizar el rendimiento de Next.js, el uso de recursos, cómo escalarlo y cómo tomar las decisiones correctas al escribir la arquitectura de la aplicación.
Escribiendo Módulos Universales para Deno, Node y el Navegador
Node Congress 2022Node Congress 2022
57 min
Escribiendo Módulos Universales para Deno, Node y el Navegador
Workshop
Luca Casonato
Luca Casonato
En este masterclass te guiaré en la escritura de un módulo en TypeScript que pueda ser utilizado por usuarios de Deno, Node y los navegadores. Explicaré cómo configurar el formato, linting y pruebas en Deno, y luego cómo publicar tu módulo en deno.land/x y npm. Comenzaremos con una breve introducción sobre qué es Deno.