Construyendo Extensiones de Navegador con React - Que No Rompen Navegadores

Bookmark
Rate this content

Las extensiones de navegador enfrentan desafíos únicos que las aplicaciones web nunca encuentran, desde las restricciones de Manifest V3 hasta la comunicación entre scripts. Después de más de 4 años construyendo extensiones de navegador listas para producción en React, compartiré los patrones de arquitectura, optimizaciones de rendimiento y técnicas de depuración que evitan que las extensiones rompan la experiencia de navegación del usuario. Aprenderás soluciones probadas en batalla para la gestión de estado a través de pestañas, comunicación entre scripts y las trampas de rendimiento que pueden matar la adopción de tu extensión.

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

Johnny Fekete
Johnny Fekete
20 min
21 Nov, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Jonny Fekete discute la construcción de extensiones web con React, la simplicidad de manifest.json, el cambio de manifest.v2 a manifest.v3 en Chrome, y el impacto en funcionalidades como scripts de fondo persistentes y restricciones de acceso. La transición a manifest.v3 para extensiones web, los contextos aislados de las extensiones web, y el uso de la API sendMessage para la comunicación entre diferentes contextos. Desafíos en el desarrollo de extensiones web, complejidades de configurar configuraciones personalizadas, y el enfoque moderno con el marco WXT para un desarrollo más fácil y persistencia de estado. Desafíos en la persistencia de estado y almacenamiento de datos en extensiones web, incluidos métodos de almacenamiento local, de sesión y de sincronización de eventos. Gestionar el estado y almacenamiento de datos de múltiples pestañas con consideración por los IDs de pestaña para prevenir fugas de memoria. Considera usar almacenamiento sobre Redux para una mejor depuración y arquitectura. Aborda la colisión de CSS con Shadow DOM y componentes web personalizados para aislar estilos de la página web subyacente. Utiliza el script de fondo para la limitación y el rebote, la utilización eficiente del almacenamiento, y el marco WXT para facilitar el desarrollo y la comunicación.
Video transcription and chapters available for users with access.

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

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.
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.
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!
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.
¡MIDI en el Navegador... ¡Vamos a Rockear la Web!
JSNation 2022JSNation 2022
28 min
¡MIDI en el Navegador... ¡Vamos a Rockear la Web!
MIDI is a versatile communication protocol that extends beyond music and opens up exciting possibilities. The Web MIDI API allows remote access to synths and sound modules from web browsers, enabling various projects like music education systems and web audio-based instruments. Developers can connect and use MIDI devices easily, and the Web MIDI API provides raw MIDI messages without semantics. The WebMidi.js library simplifies working with the Web MIDI API and offers a user-friendly interface for musicians and web developers. MIDI on the web has generated significant interest, with potential for commercial growth and endless possibilities for web developers.

Workshops on related topic

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.