Architecture Case Study · Browser Systems
iScreen: Manifest V3 Browser Extension Monorepo & Aggregation API
Building a modern browser extension platform with dynamic Bento New Tab layouts, Ken Burns wallpaper rotation, background duplicate tab detector, and complete Shadow DOM style isolation.
iScreen is a full-stack Manifest V3 browser extension built with WXT, Vue 3.5, and Pinia. It encapsulates content script overlays in closed Shadow DOM trees to guarantee zero CSS pollution with host websites and interfaces with a high-throughput Laravel 11 and Redis backend API.
100%
Shadow DOM Style Isolation
MV3
Manifest V3 Compliant
0ms
Tab Switch Delay
11
Laravel Aggregation API
The Challenge: High-Fidelity In-Browser UI without CSS Leaks#
Browser extensions that inject UI into third-party web pages frequently suffer from CSS inheritance collisions, global style bleeding, and Manifest V3 background service worker lifecycles.
iScreen solves this through strict web component encapsulation via Shadow DOM, typed message passing between content scripts and background workers, and an offline-first cache strategy.
Monorepo Architecture & Tech Stack#
Decoupled frontend extension and backend aggregation API
WXT Extension Framework + Vue 3.5
Cross-browser compilation targeting Chrome, Edge, and Firefox with strict TypeScript types and Pinia state stores.
Shadow DOM Style Isolation
Injected widgets and floating toolbars are mounted inside closed Shadow Roots, ensuring 100% isolation from host page stylesheets.
Laravel 11 Backend Aggregation API
Decoupled backend in PHP 8.3 and Redis aggregating live weather, stock tickers, wallpaper metadata, and search provider indices.
Human-Simulated Form Automation
Intelligent form filler engine with randomized typing cadence, keystroke simulation, and smart DOM field detection.
Shadow DOM & Background Worker Architecture#
Zero CSS pollution and resilient worker keep-alives
In Manifest V3, background pages were replaced by ephemeral Service Workers that terminate after 30 seconds of inactivity.
iScreen implements a deterministic message passing bus with heartbeat keep-alives and indexedDB queuing to ensure background synchronization tasks complete without data loss.
Key Engineering Takeaways#
Shadow DOM is essential for content script reliability
Without Shadow DOM, host website CSS frameworks inevitably corrupt extension widgets.
Design for ephemeral service workers from day one
Persisting extension state in chrome.storage.local rather than in-memory variables prevents data loss when workers sleep.
Frequently Asked Questions (PAA)#
Does iScreen work across multiple browsers?
Yes. The WXT build framework compiles the monorepo into standard Chrome (Manifest V3), Edge, and Firefox builds.
How does iScreen protect user browsing privacy?
All content script DOM inspections execute locally in sandboxed memory. No user keystrokes, URLs, or browsing histories are logged to external servers.
View Engineering Code & Repositories
Explore open-source architectures, extension patterns, and full-stack implementations.
Visit GitHub Profile →