React for Chrome Extension Development

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Repasaremos los desafíos únicos, soluciones y cosas extrañas que encontramos al integrar React en la extensión de Chrome de Ibotta. ¡Aprende sobre la optimización del rendimiento del script de contenido, la gestión del estado y cómo superar problemas con las herramientas de compilación!

This talk has been presented at React Summit US 2024, check out the latest edition of this React Conference.

Sriram Hariharan
Sriram Hariharan
Darshan Bhatta
Darshan Bhatta
11 min
22 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Vamos a hablar sobre cómo hacer que React funcione en extensiones de Chrome. Comenzamos a construir extensiones de Chrome durante nuestro primer año y hemos aprendido mucho en el camino. Las extensiones de Chrome tienen dos partes: el script de contenido y el script de fondo. Nuestra historia comienza antes de React, cuando creamos la extensión UT Registration Plus para simplificar la inscripción en clases. Inicialmente construimos la extensión utilizando cadenas HTML y luego intentamos usar jQuery, lo que resultó en un código difícil de mantener. Al construir Octoshop, elegimos React por su soporte y sistema de paquetes, pero integrarlo con la extensión Vue de Ibotta generó una base de código desordenada. Centralizamos nuestro código y gestionamos el estado de Chrome utilizando el portal y los hooks de React, mejorando la mantenibilidad.

1. Introducción a las extensiones de Chrome y nuestro recorrido

Short description:

Vamos a hablar sobre cómo hacer que React funcione en las extensiones de Chrome. Comenzamos a construir extensiones de Chrome durante nuestro primer año y hemos aprendido mucho en el camino. Las extensiones de Chrome tienen dos partes: el script de contenido y el script de fondo. Nuestra historia comienza antes de React, y creamos la extensión UT Registration Plus para simplificar la inscripción en clases.

Hola chicos. Mi nombre es Shriram Hidiyaddin. Y yo soy Darshan Bhatta. Y vamos a hablar sobre cómo hacer que React funcione en las extensiones de Chrome o cómo lo hicimos no ser tan malo. Un poco sobre nosotros. Darshan y yo nos conocimos cuando ambos estábamos estudiando en la UT Austin. Y en ese momento, estábamos bastante interesados en trabajar en proyectos aleatorios y aprender. Así que comenzamos a construir extensiones de Chrome alrededor de nuestro primer año y seguimos construyendo y haciendo algunas para nuestra escuela, para nuestros amigos o simplemente para hacer reír a la gente.

En realidad, al principio no comenzamos a usar React. Comenzamos a construir usando solo JavaScript básico, de lo cual hablaremos más adelante. Pero eventualmente, cuando llegamos a React, nos enamoramos de él. Así que alrededor de nuestro tercer año, fundamos una empresa llamada Octoshub, que fue adquirida por Ibotta. Y ahora ambos estamos en Ibotta en el equipo de innovación al consumidor, donde lideramos proyectos de innovación en la empresa. Y en todos nuestros proyectos de extensión, hemos tenido más de 500,000 usuarios. Así que hemos aprendido mucho en el camino.

Para dar un poco de contexto a aquellos que no saben cómo funcionan las extensiones de Chrome, hay básicamente dos partes en ellas. Una es el script de contenido, que se ejecuta en cada pestaña de la página. Así que piensa en eso como cualquier lógica que quieras inyectar en la página o que quieras ejecutar específicamente en esa pestaña. Y luego está el script de fondo, que es como un proceso centralizado. Piensa en ello como el servidor de la extensión. Solo hay un proceso que se ejecuta en segundo plano. Y el patrón típico es que lo uses a través de la capa de mensajería como un llamador de back-end. Entonces, el script de contenido se cargaría. Intentaría ver qué debería inyectar tal vez. Y luego enviaría un mensaje al script de fondo para llamar realmente a esa API. De esta manera, no estás llamando realmente a las API en el sitio web, y todo sucede dentro de tu extensión.

Como dije, nuestra historia comienza mucho antes de React. Estábamos haciendo estas extensiones de Chrome realmente simples y una de ellas era esta extensión llamada UT Registration Plus, que terminó siendo no tan simple. Básicamente era una extensión que permitía a los estudiantes inscribirse en clases de manera más fácil. Obtener acceso a distribuciones de calificaciones, enlaces de Rate My Professor, simplemente hacer que todo el proceso sea más fácil y agradable.

2. Desafíos con el desarrollo inicial de la extensión

Short description:

Inicialmente construimos la extensión utilizando cadenas de HTML y luego intentamos usar jQuery. Sin embargo, ambos enfoques resultaron en un código difícil de mantener sin un flujo de datos y estilos adecuados.

Entonces, inicialmente construimos esta extensión utilizando cadenas de HTML directamente. Simplemente estábamos inyectando cadenas de HTML en el HTML interno de diferentes divs en la página. Y quedó muy claro muy rápidamente que esto era difícil de mantener. Pero realmente no conocíamos ninguna otra forma. Así que en ese momento hicimos algunas búsquedas en Google y vimos a algunas personas usando jQuery y pensamos, bueno, vamos a probar esto. Y jQuery era mejor, ya sabes, tenía mucho soporte de animación. Tenía muchas cosas, ya sabes, era realmente genial para el web scraping, pero también fue un error porque el código seguía siendo muy difícil de mantener. No teníamos un flujo de datos unidireccional. No teníamos, ya sabes, estilos fáciles. Era simplemente muy, muy complicado.

3. Superando los desafíos con el desarrollo de Octoshop

Short description:

Al construir Octoshop, elegimos React debido a su amplio soporte y sistema de paquetes. Nos permitió construir rápidamente interfaces de usuario complejas e integrar fácilmente bibliotecas de código abierto. Sin embargo, la integración de nuestra extensión de React con la extensión de Vue de Ibotta resultó en un código desordenado. Nos dimos cuenta de la necesidad de reescribir el código para facilitar el mantenimiento. Los conflictos de estilos fueron un desafío importante, que abordamos utilizando shadow DOMs. Renderizar componentes en la página, especialmente para los resultados de comparación de precios, se hizo más fácil de mantener utilizando React portal.

Entonces, cuando llegamos a construir Octoshop, queríamos hacer las cosas bien esta vez. Así que comenzamos a buscar diferentes frameworks de front-end y vimos que React era el que tenía más soporte y más paquetes. Aún en términos de soporte para extensiones, no había mucho. Pero aún tenía ese sistema de paquetes y ese soporte de comunidad, y además nuestro equipo ya conocía React. Así que fue una elección obvia comenzar a usar React.

Y así, cuando comenzamos Octoshop, supongo que para un poco de contexto sobre lo que era Octoshop, era una extensión del navegador que te permitía comparar precios de productos en toda la web. Sabíamos en ese momento que queríamos algo que nos permitiera construir interfaces de usuario muy rápidamente e iterar muy rápido. Y React fue increíble para esto. Podíamos construir interfaces de usuario realmente complejas y tener toda nuestra lógica de negocio en un solo lugar en el árbol de componentes. Y había tantas bibliotecas de código abierto que podíamos usar. Por ejemplo, simplemente podíamos usar una biblioteca de gráficos e instalarla con NPM, y funcionaría con algunos ajustes menores. Así que estábamos muy impresionados y contentos cuando cambiamos a usar React.

Pero al mismo tiempo, ya sabes, durante el proceso de creación de Octoshop, nos dimos cuenta de que todavía había muchos problemas debido a que la extensión de Chrome es una plataforma muy única y de nicho. Entonces, cuando en realidad fuimos adquiridos por Ibotta, Ibotta ya tenía su propia extensión de navegador escrita en Vue. Y teníamos nuestra extensión escrita en React. Y como queríamos integrarnos rápidamente, terminamos juntando las dos con una capa de mensajería, creando una conexión indirecta entre las dos. Y esto terminó funcionando. Pero fue muy, muy desordenado. Así que nos dimos cuenta después de un año de pasar por este proceso que necesitábamos reescribir todo el código en algo un poco más fácil de mantener.

Uno de los mayores problemas con los que nos encontramos como extensión fueron los conflictos de estilos. El problema principal es que no queremos sobrescribir ningún estilo en un sitio web en particular ni que nuestros estilos sean sobrescritos por los estilos del sitio web. La forma en que resolvimos esto fue a través de shadow DOMs, que básicamente son un DOM oculto que existe en la página. La forma en que lo hicimos fue crear esta función de utilidad que básicamente crea el shadow DOM para nosotros. Y luego podemos inyectar nuestro CSS en él, como muestra el fragmento de código. Y luego podemos usar la función de renderizado de React para renderizar nuestro componente en ese shadow DOM. Lo siguiente más importante con lo que nos encontramos fue cómo debemos renderizar nuestros componentes en la página. Tenemos esta función en la extensión de Ibotta llamada comparación de precios en la página de búsqueda. Y lo que hace es mostrar comparaciones de precios en la página de resultados de búsqueda. Y para esto tenemos estas pequeñas píldoras que aparecen en la parte superior de cada producto para el cual tenemos resultados de comparación de precios. Y la forma en que pudimos hacer esto de manera fácil de mantener fue utilizando el portal de React.

4. Centralizando el código con React Portal

Short description:

Utilizamos React Portal para centralizar nuestro código e inyectar componentes en divs específicos, lo que permite tener un estado centralizado mientras se encuentran en diferentes lugares de la página.

Esto nos permitió tener un lugar centralizado para todos nuestros componentes. Teníamos todos los componentes en un array, básicamente. Y luego podíamos usar React Portal para inyectarlos en estos divs específicos. Así que permitía que nuestro código y estado estuvieran centralizados. Pero aún así estuvieran en todos estos lugares diferentes de la página. Este es un ejemplo de cómo lo hicimos. Entonces, en este componente, en este ejemplo simple, tenemos el hecho del usuario que se ejecuta inicialmente, encuentra el contenedor en el que queremos inyectar. Y luego tenemos nuestra función create portal que simplemente inyecta nuestro componente de React dentro de ese contenedor. Así que puedes imaginar que todo nuestro estado puede estar dentro de este componente. Pero podemos elegir dónde queremos realmente inyectar este componente.

5. Gestión del estado de Chrome con React

Short description:

Creamos hooks que integraron la solución de gestión de estado de Chrome con React, proporcionando una solución nativa y mejorando la mantenibilidad del proyecto.

Otro problema con el que nos enfrentamos fue la gestión del estado de Chrome con el estado de React. Un poco de contexto aquí. Tienen su propia solución de gestión de estado. Que son las API de sincronización y sesión de Chrome.storage.local. Estas tienen sus propias devoluciones de llamada de reactividad y puedes establecer y obtener valores del estado. Pero no está integrado bien en, ya sabes, el ecosistema normal de JavaScript. Son solo un montón de API y tendrías que gestionar devoluciones de llamada por todas partes. Y así que queríamos crear algo que fuera más una solución nativa para React. Y terminamos creando un montón de estos hooks que se conectaban a estas API de extensión de Chrome y facilitaban mucho el proceso. Como puedes ver, por ejemplo, a la derecha con el hook store.use que creamos, la API para eso, se ve prácticamente igual que, como, use state. Y esto es genial. Porque en realidad no necesitamos incorporar a muchos ingenieros al modo de hacer las extensiones de Chrome. Simplemente pudieron usar sus conocimientos existentes en la creación de aplicaciones React. Y prácticamente toda la lógica de la extensión de Chrome se abstrajo mediante nuestros hooks de utilidad. Y esto es realmente genial para mejorar la mantenibilidad del proyecto. Otro problema con el que nos enfrentamos fue que prácticamente muchas de las herramientas relacionadas con las extensiones de Chrome. Oh, lo siento. Relacionadas con React no funcionan realmente con las extensiones de Chrome. Un ejemplo claro de esto es React DevTools. React DevTools es una extensión de Chrome que te permite inspeccionar los componentes de React de cualquier sitio web. El problema es que nosotros mismos somos una extensión de Chrome. Así que React DevTools no tiene una forma fácil de interactuar con nosotros. Y así que lo que hicimos fue un poco chapucero. Pero básicamente instalamos React DevTools core mediante NPM. Y simplemente llevamos un registro de qué pestaña estaba visible en cada momento. Y luego, cuando una pestaña se volvía visible, nos conectábamos al WebSocket de DevTools. Y cuando perdía visibilidad, cerrábamos el WebSocket. Y de esta manera, podíamos cargar React DevTools. Y cada vez que cambiabas de pestaña, mostraría los componentes de React de nuestra extensión para esa pestaña. Y así, al implementar todas estas soluciones y también muchas soluciones que no mencionamos en esta presentación, nuestra arquitectura final fue mucho más limpia. Teníamos un flujo de datos unidireccional. Teníamos todos estos hooks y APIs de componentes que facilitaban mucho el desarrollo en la base de código. Y así que estábamos muy orgullosos y contentos con la arquitectura final en la que aterrizamos. Así que queremos agradecerles por escuchar nuestra presentación. Siempre estamos dispuestos a responder sus preguntas. Si quieren conectarse con nosotros en LinkedIn, nuestros perfiles están ahí. Así que sí, siéntanse libres de enviarnos un mensaje, siempre responderemos.

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.
Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro
React Summit 2022React Summit 2022
17 min
Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro
Top Content
Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.

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.