Cómo Construir una Extensión de Chrome Usando React

Rate this content
Bookmark
Slides

El año pasado, como parte de mi trabajo en Bloomberg, se me asignó la tarea de construir una Extensión de Chrome, y convencí a mi equipo de permitirme construir la extensión en React en lugar de JavaScript básico. Esto tenía varias ventajas, como hacer que el código sea más mantenible y más fácil de entender, además de permitirnos usar una biblioteca de componentes preexistentes para un estilo consistente en toda la empresa, reduciendo la cantidad de código CSS que teníamos que escribir. En mi presentación, les mostraré una muestra de una Extensión de Chrome para uso personal que construí utilizando React y Material UI, que responde automáticamente a los correos electrónicos enviados en Gmail y te permite tomar notas sobre la conversación. También compartiré los pasos para construir tu propia Extensión de Chrome usando React, y las lecciones aprendidas en el proceso!

Adina Stoica
Adina Stoica
18 min
06 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta Charla trata sobre la construcción de una extensión de Chrome usando React. Cubre la configuración, permisos y comportamientos de la extensión, así como la llamada a servicios externos y la ejecución de la extensión localmente. La Charla también discute el proceso de publicación de la extensión e incluye una demostración de un sistema de gestión de correos electrónicos. En general, proporciona una descripción general completa de la construcción y implementación de una extensión de Chrome usando React.

1. Introducción y Resumen

Short description:

Esta parte presenta al orador y el tema de la charla, que es construir una extensión de Chrome usando React. El orador comparte su experiencia y antecedentes, así como el propósito de la extensión que construyó. Menciona las características de la extensión y su plan de discutir los pasos para construir una extensión de Chrome usando React. También menciona brevemente las extensiones de Firefox y la compatibilidad entre ellas.

¡Hola a todos, y gracias por sintonizar! También quiero agradecer al comité de la conferencia por aceptar mi charla aquí. Mi charla trata sobre cómo construir una extensión de Chrome usando React.

Un poco sobre mí. Mi nombre es Adina. Soy una ingeniera de software full-stack en Bloomberg en el equipo de ingeniería de RRHH, donde me enfoco principalmente en elementos de front-end. Soy originaria de Rumania, pero he estado en Estados Unidos durante casi la mitad de mi vida. Actualmente vivo en la ciudad de Nueva York con mi esposo y mi perro, y el nombre de mi perro es Stacks y es importante porque estaremos respondiendo a algunos correos electrónicos que Stacks a menudo recibe en su bandeja de entrada y que él podría querer posponer.

El año pasado, como parte de mi trabajo en Bloomberg, se me encargó construir una extensión de Chrome. Decidimos construir la extensión en React en lugar de JavaScript básico, ya que eso haría que el código sea más comprensible y mantenible, así como más fácil de estilizar mediante el uso de componentes específicos de Bloomberg de React. En esta presentación, les mostraré una extensión de muestra que he llamado Email Postponer, que construí específicamente para demostrar aquí. Esta extensión responde automáticamente a los correos electrónicos enviados en Gmail según la entrada del usuario, y también permite a los usuarios agregar notas privadas a sus correos electrónicos. También compartiré los pasos para construir tu propia extensión de Chrome usando React y las lecciones aprendidas en el proceso. También mencionaré brevemente las extensiones de Firefox y la compatibilidad entre ambas.

2. Extension Overview and Setup

Short description:

Esta parte proporciona una descripción general de la extensión Email Postponer, incluyendo sus características y cómo interactúa con Chrome. Explica los pasos para configurar la extensión utilizando Create React app y TypeScript, así como el uso de la API de Chrome. La extensión utiliza un archivo manifest.json y sigue la versión 3 del manifiesto. También se discute el papel del service worker y los content scripts en la funcionalidad de la extensión. Los content scripts permiten la comunicación entre el código de React y el script de fondo, y la extensión está diseñada para abrirse como un panel lateral en Gmail. La sección concluye mencionando la necesidad de agregar recursos accesibles desde la web a la extensión.

Para la agenda, comenzaré dando una descripción general de la extensión que construí para demostrar aquí, luego explicaré los pasos para configurar una extensión en React, resaltando algunas capacidades interesantes que le di a la extensión Email Postponer, hablaré sobre cómo ejecutar la extensión localmente, así como publicarla en la tienda.

Luego, tocaré brevemente la compatibilidad entre navegadores y cómo convertir una extensión de Chrome en un complemento de Firefox. Y terminaré mostrando una demostración en video de la extensión Email Postponer en acción.

Entonces, para una descripción general, la extensión Email Postponer se ve como una página web, como se puede ver a la derecha, solo se abre en Gmail, se abre como un panel lateral en lugar de una ventana emergente, porque queremos poder seleccionar información en el sitio web sin que se cierre la ventana emergente, utiliza Material UI para facilitar el estilo de los componentes listos para usar que son consistentes con el diseño de Material de Google, permite a los usuarios interactuar con el contenido de la página web tanto de forma manual como automática, y se comunica con el servicio backend utilizando la API Fetch.

Para configurar la extensión, primero creé un nuevo proyecto utilizando Create React app en TypeScript. Luego tuve que cambiar el comando de compilación para que React genere archivos separados de JavaScript y HTML para evitar errores de política de seguridad de contenido. También configuré para que no genere mapas de origen para eliminar algunas advertencias adicionales. Debido a que estamos utilizando TypeScript, tuve que instalar algunos tipos adicionales para usar la API de Chrome. El proyecto utiliza la API de Chrome para interactuar con Chrome mediante el uso de un objeto inyectado que también se llama Chrome. Create React app crea un archivo manifest.json para nosotros, pero las extensiones requieren una estructura específica para eso. Cada extensión debe tener un archivo manifest.json y debe tener el nombre manifest.json en su directorio raíz. Google está en proceso de eliminar la versión 2 del manifiesto, aunque acaban de anunciar algunos retrasos en esto en Google I/O. Sin embargo, estamos utilizando la versión 3 del manifiesto en nuestra extensión de Email Postponer. Debido a que queremos abrir la extensión como un panel lateral, queremos asegurarnos de que la acción esté vacía aquí. Nuestra extensión tomará su contexto de un archivo index.html que se compila a partir de React. El service worker, que también se conoce coloquialmente como un script de fondo, aunque hay algunas diferencias entre los dos, se ejecuta en todas las pestañas del navegador y se ejecuta al iniciar el navegador. Escucha eventos específicos en segundo plano, como cambiar de pestaña o actualizar URL. Toma acciones a nivel de navegador en consecuencia y se comunica con el código de la extensión y los content scripts a través del intercambio de mensajes. Este script es uno de los dos scripts escritos en JavaScript básico, y lo usamos para abrir y cerrar el panel lateral del sitio, así como para llamar al servicio res utilizando la API Fetch, ya que llamarlo desde React nos daría errores de intercambio de recursos entre orígenes.

Los content scripts son scripts que se ejecutan en el contexto de las páginas web y tienen acceso a elementos, objetos y métodos del DOM. Se ejecutan en instancias separadas en pestañas separadas, una instancia por pestaña, y se ejecutan en páginas que coinciden con la expresión regular de coincidencia, y se comunican con el service worker y el código de React a través del intercambio de mensajes. Los content scripts, de los cuales solo tenemos uno en esta extensión, también están escritos en JavaScript básico, y usamos el nuestro para crear un panel lateral, iframe, pasar mensajes entre el código de React y el script de fondo, así como copiar y pegar texto seleccionado en la extensión. Además, la extensión se abre solo en Gmail, ya que Gmail es la única expresión que coincide con la expresión regular en la propiedad matches.

Estas son algunas de las formas en que se pasan mensajes en las extensiones. Los content scripts se encuentran en el medio entre el código de React y el script de fondo. El código de React se comunica con los content scripts a través del intercambio de mensajes. Los content scripts toman acciones en la página web en la que se ejecuta la extensión o pasan mensajes al script de fondo, que luego puede tomar acciones a nivel de navegador en consecuencia. El script de fondo puede comunicarse directamente con el código de React, así como con los content scripts, también a través del intercambio de mensajes. Dado que estamos ejecutando la extensión en un panel lateral en lugar de una ventana emergente, debemos agregar recursos accesibles desde la web a la extensión.