Construyendo una Pila de Red para nuestra Extensión de Navegador

Rate this content
Bookmark

Los problemas de ingeniería a menudo se repiten en lugares donde no lo esperarías. A veces, la mejor solución ya ha sido inventada, en un rincón diferente del dominio de la ingeniería de software.

En esta charla, mostramos cómo y por qué replicamos la pila de red TCP/IP para resolver un problema de comunicación entre diferentes componentes de una extensión de navegador.

This talk has been presented at Node Congress 2024, check out the latest edition of this JavaScript Conference.

Cyrus Roshan
Cyrus Roshan
19 min
04 Apr, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla discute el desarrollo de la extensión de navegador Jam, que es una herramienta de informe de errores. Explora los desafíos de la mensajería entre diferentes entornos de ejecución dentro de un navegador y la necesidad de dividir los mensajes para superar las limitaciones de tamaño. La charla también explica cómo el equipo de desarrollo reconstruyó el sistema utilizando un enfoque de pila de red TCP/IP, lo que les permitió resolver dificultades de mensajería similares a los problemas de redes. Los beneficios de este enfoque incluyen un despliegue más fluido, una depuración más sencilla y un enfoque en el desarrollo de funciones sin preocuparse por las limitaciones de mensajería.

1. Introducción a la extensión del navegador Jam

Short description:

Hola, soy Cyrus, un ingeniero en Jam. Hoy hablaré sobre la creación de una pila de red para nuestra extensión de navegador llamada Jam. Jam es una extensión para informar errores que te ayuda a recibir informes detallados de errores con funciones como capturas de pantalla, solicitudes de red y registros de consola. Ahorra tiempo y brinda una experiencia sin complicaciones. La extensión consta de componentes como el script de fondo, el pop-up, el script de contenido y el script de host, todos operando dentro de una ventana del navegador.

Hola, soy Cyrus. Soy un ingeniero en Jam, y esta charla trata sobre la creación de una pila de red para nuestra extensión de navegador.

Ahora, si no sabes qué es una pila de red, o si sabes qué es una pila de red y te parece extraño que estemos construyendo una en la capa de aplicación dentro de una extensión de navegador, no te preocupes, responderemos todas esas preguntas en esta charla.

Primero, ¿qué estamos construyendo? ¿Qué es Jam? Jam es una extensión de navegador para informar errores. Y lo que eso significa es que te ayudamos a recibir informes de errores perfectos cada vez. Normalmente, cuando recibes un informe de errores de un gerente de producto o un QA, no es una experiencia divertida porque no obtienes muchos detalles sobre el error. Puede que recibas una o dos frases como `esta página está rota` y tienes que descifrar qué significa eso. Con Jam, cada vez que tu gerente de producto presenta un error, tienen que seleccionar una captura de pantalla o grabar la pestaña o una repetición instantánea. Así que puedes ver visualmente cuál es el error. Y luego automáticamente incluimos otra información como los registros de la consola, las solicitudes de red, los metadatos de la página, los pasos de reproducción. Entonces, cada vez que un usuario hace clic en un botón, se incluyen detalles como la información del dispositivo, la marca de tiempo, y otros detalles que te gustaría tener una idea de lo que realmente sucedió. Cuando recibes este error, puedes abrirlo y es como tener las DevTools de tu navegador abiertas, como si tuvieras el error justo ahí en tu computadora portátil. Y puedes ver las cabeceras, el cuerpo de la solicitud, el cuerpo de la respuesta, los registros de la consola, lo que sea. Básicamente, te ahorramos mucho tiempo en idas y venidas. No tienes que hacer una llamada. Y es una experiencia sin complicaciones.

Para hacer esto, tenemos una extensión de navegador. Y esta extensión de navegador tiene algunos componentes dentro de ella. El componente principal es un script de fondo. Y un script de fondo es como un servidor para una extensión de navegador. Como se ejecuta en segundo plano, pero es local. Y tiene una vida útil prolongada. Hay algunos otros componentes efímeros, como el pop-up, el script de contenido, el script de host. Todos estos viven dentro de una ventana del navegador. Y una ventana del navegador es como, abres una ventana de Chrome. Una ventana de Chrome puede tener varias pestañas. Y también puede tener un pop-up. Entonces, el pop-up es como, cuando haces clic en un icono de extensión, aparece este pop-up ventana. Puedes interactuar con ella y luego se cierra.

2. Execution Environments and Messaging

Short description:

Dentro de una pestaña, hay dos entornos de ejecución: el script de contenido y el script de host. Se comunican de manera diferente y tienen restricciones específicas. Se utilizan API de mensajería como window.postMessage y la API de mensajería de Chrome. Algunas API tienen limitaciones de tamaño. El script de host solo puede comunicarse con el script de contenido, lo que requiere el reenvío de mensajes. Varias instancias de componentes pueden plantear desafíos al dirigir mensajes al script de contenido correcto.

Y luego una pestaña es como cuando vas a Hacker News o Google, o algo así. Y dentro de esta pestaña, hay dos componentes, o más bien dos entornos de ejecución. Uno de ellos es el entorno de ejecución del script de contenido. Y uno de ellos es el entorno de ejecución del script de host. El entorno de ejecución del script de contenido es como un entorno personalizado donde está aislado de la propia página. Entonces, si la página en la que te encuentras modifica una propiedad de la ventana, el script de contenido no se ve afectado por ello. Y esto básicamente es para que las extensiones inyecten code dentro de este entorno de ejecución del script de contenido y no permitan que sus scripts sean modificados por la página de host.

Y luego el entorno de ejecución del script de host es donde residen los scripts de la página de host. Entonces, todos estos componentes de esta extensión de navegador se comunican, pero se comunican de manera ligeramente diferente. Todos estos componentes se comunican en ambas direcciones. Desde el pop-up hasta el script de fondo y viceversa, puedes enviar mensajes desde el script de contenido y el script de fondo y viceversa. Pero el script de host es la excepción. Y el script de host solo puede comunicarse con un script de contenido. Entonces, si quieres enviar un mensaje desde el script de fondo al script de host y obtener una respuesta, debes reenviarlo a través del script de contenido. Básicamente, debes configurar un controlador que redirija ese mensaje al script de host y luego redirija el mensaje del script de host de vuelta al script de contenido.

Y esto es un poco difícil de manejar cuando solo estás tratando de crear una función dentro de tu extensión de navegador. Como, simplemente quieres construir algo, y ahora tienes que pensar en todas estas diferentes restricciones que debes tener en cuenta al enviar mensajes de ida y vuelta para alimentar esa función. Las restricciones son básicamente las que se enumeran aquí. Tenemos diferentes API de mensajería que debemos usar para todos estos componentes. Entonces, entre el script de contenido y el script de host, podríamos estar usando window.postMessage. Pero luego, entre el script de contenido y el fondo, podríamos estar usando una API de mensajería de Chrome. Y esa es una API diferente a la que se utiliza entre el pop-up y el script de fondo. Entonces, aquí estamos utilizando algunas API diferentes y debemos tenerlo en cuenta. Además, algunas de esas API tienen restricciones de tamaño. El tamaño de un mensaje está limitado. Y luego, al igual que antes, algunos de estos componentes no pueden comunicarse directamente. Entonces, cuando estás lidiando con el script de host, debes redirigir mensajes de ida y vuelta hacia él a menos que solo estés enviando mensajes desde el script de contenido. Y muchos de estos componentes pueden... Puedes tener varias instancias de ellos, por lo que puedes tener varias pestañas, puedes tener múltiples pop-ups. Y eso puede presentar algunos problemas cuando intentas dirigir mensajes a las pestañas correctas del script de contenido.

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

Instalar Nada: Interfaces de Aplicación con APIs Nativas del Navegador
JSNation 2024JSNation 2024
31 min
Instalar Nada: Interfaces de Aplicación con APIs Nativas del Navegador
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.
Repensando las Estrategias de Agrupación
React Day Berlin 2023React Day Berlin 2023
32 min
Repensando las Estrategias de Agrupación
The talk discusses rethinking bundling strategies, focusing on challenges such as long-term caching and improving the state of Next.js and Webpack. It explores handling immutable caching and content hashes, optimizing asset references and page manifests, and addressing issues with client-side navigation and long-term caching. The talk also covers tree shaking and optimization, optimizing module fragments and code placement, and the usage and relationship of TurboPack with Webpack. Additionally, it touches on customizing configuration and hash risks, barrel imports and code splitting, and entry points and chunking heuristics.
Ampliando los límites de la codificación de video en navegadores con WebCodecs
JSNation 2023JSNation 2023
25 min
Ampliando los límites de la codificación de video en navegadores con WebCodecs
Top Content
This Talk explores the challenges and solutions in video encoding with web codecs. It discusses drawing and recording video on the web, capturing and encoding video frames, and introduces the WebCodecs API. The Talk also covers configuring the video encoder, understanding codecs and containers, and the video encoding process with muxing using ffmpeg. The speaker shares their experience in building a video editing tool on the browser and showcases Slantit, a tool for making product videos.
Visualización de Cuellos de Botella de Rendimiento Front-End
React Summit 2020React Summit 2020
34 min
Visualización de Cuellos de Botella de Rendimiento Front-End
React's web-based tools allow for independent learning. Dazzone, a sports streaming service, faces challenges with low memory and CPU targets. Measuring, analyzing, and fixing performance issues is crucial. Virtualization improves rendering efficiency and performance. The application is now much faster with significantly less jank.
API WebHID: Controla Todo a través de USB
JSNation 2022JSNation 2022
23 min
API WebHID: Controla Todo a través de USB
Today's Talk introduces the webHID API, which allows developers to control real devices from the browser via USB. The HID interface, including keyboards, mice, and gamepads, is explored. The Talk covers device enumeration, input reports, feature reports, and output reports. The use of HID in the browser, especially in Chrome, is highlighted. Various demos showcase working with different devices, including a DualShock controller, microphone, gamepad, and Stream Deck drum pad. The Talk concludes with recommendations and resources for further exploration.
Automatiza el Navegador con la API de Renderizado del Navegador de Workers
JSNation 2024JSNation 2024
20 min
Automatiza el Navegador con la API de Renderizado del Navegador de Workers
The Talk discusses browser automation using the Worker's Browser Rendering API, which allows tasks like navigating websites, taking screenshots, and creating PDFs. Cloudflare integrated Puppeteer with their workers to automate browser tasks, and their browser rendering API combines remote browser isolation with Puppeteer. Use cases for the API include taking screenshots, generating PDFs, automating web applications, and gathering performance metrics. The Talk also covers extending sessions and performance metrics using Durable Objects. Thank you for attending!

Workshops on related topic

Construye aplicaciones similares a React para herramientas internas 10 veces más rápido con Retool
JSNation Live 2021JSNation Live 2021
86 min
Construye aplicaciones similares a React para herramientas internas 10 veces más rápido con Retool
Workshop
Chris Smith
Chris Smith
La mayoría de las empresas tienen que construir software personalizado e interfaces a medida para sus datos con el fin de impulsar procesos internos como extensiones de prueba de usuario, reembolsos, gestión de inventario, administración de usuarios, etc. Estas aplicaciones tienen requisitos únicos y a menudo, resolver el problema rápidamente es más importante que la apariencia. Retool facilita a los desarrolladores de JavaScript construir rápidamente aplicaciones similares a React para herramientas internas utilizando interfaces de API y base de datos preconstruidas, así como componentes de interfaz de usuario reutilizables. En este masterclass, repasaremos cómo algunas de las empresas de más rápido crecimiento están haciendo herramientas internas y construiremos algunas aplicaciones simples para explicar cómo Retool funciona a partir de tus conocimientos existentes de JavaScript y ReactJS para permitir la construcción rápida de herramientas.
Prerrequisitos:Una cuenta de prueba gratuita en Retool.comAlgunos conocimientos básicos de JavaScript y bases de datos SQL/NoSQL
Enlace útil de Retool: https://docs.retool.com/docs
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.