React for Chrome Extension Development

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.

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.

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.

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.