Caso de Estudio de Arquitectura · Sistemas de Navegador
iScreen: Extensión Manifest V3 y API de Agregación en Laravel 11
Construcción de una plataforma de extensión de navegador con panel Bento de nueva pestaña, rotación de fondos Ken Burns, detector de pestañas duplicadas y aislamiento total con Shadow DOM.
iScreen es una extensión de navegador Manifest V3 construida en WXT, Vue 3.5 y Pinia. Encapsula las interfaces inyectadas dentro de árboles Shadow DOM cerrados para evitar interferencias de estilos CSS con los sitios anfitriones y se conecta a una API de agregación en Laravel 11 y Redis.
100%
Aislamiento Shadow DOM
MV3
Compatible Manifest V3
0ms
Retardo de Pestañas
11
Laravel Backend API
El Reto: Interfaces Inyectadas sin Colisiones de CSS#
Las extensiones que inyectan componentes en páginas web externas suelen sufrir de colisiones de CSS y estilos globales heredados no deseados.
iScreen soluciona esto mediante encapsulación estricta en Shadow DOM y un bus de mensajería tipado entre content scripts y workers.
Arquitectura del Monorepo & Stack Tecnológico#
Frontend de extensión desacoplado de la API de backend
Framework WXT + Vue 3.5
Compilación multiplataforma para Chrome, Edge y Firefox con tipado estricto en TypeScript y Pinia.
Aislamiento Total con Shadow DOM
Los widgets y paneles inyectados se montan en Shadow Roots cerrados, garantizando 100% de aislamiento estilístico.
API de Agregación en Laravel 11
Backend en PHP 8.3 y Redis que agrega datos meteorológicos, cotizaciones y fondos dinámicos.
Automatización de Formularios con Simulación Humana
Motor inteligente de autocompletado con cadencia aleatoria y detección contextual de campos DOM.
Arquitectura de Shadow DOM y Service Workers#
Cero contaminación CSS y persistencia resiliente
En Manifest V3, los Service Workers efímeros se suspenden tras periodos de inactividad.
iScreen utiliza un bus de eventos persistente respaldado en chrome.storage.local e indexedDB para evitar pérdidas de estado.
Lecciones Clave de Ingeniería#
Shadow DOM es indispensable en extensiones
Aislar los estilos en Shadow DOM evita que los frameworks CSS de los sitios web alteren la apariencia de la extensión.
Diseñar para workers efímeros desde el inicio
Guardar el estado en almacenamiento persistente evita pérdidas de datos cuando los workers entran en reposo.
Preguntas Frecuentes (PAA)#
¿iScreen es compatible con múltiples navegadores?
Sí. El framework WXT compila el código fuente para Chrome (Manifest V3), Edge y Firefox.
¿Cómo protege iScreen la privacidad del usuario?
Todas las inspecciones del DOM se ejecutan en memoria local sin registrar datos de navegación en servidores externos.
Ver Código y Repositorios
Explora arquitecturas de código abierto y patrones full-stack en GitHub.
Visitar Perfil de GitHub →