## Overview Frontend developers routinely juggle a dozen browser extensions to debug a single page — a color picker here, an accessibility auditor there, a ruler extension that stopped working after Manifest V3. **Frontend Dev Helper** solves this fragmentation by packaging 27 professional-grade debugging tools into one Manifest V3–compliant extension that works identically on Chrome and Firefox. The core design principle: every injected UI panel lives inside a **Shadow DOM** root, guaranteeing full CSS isolation from the host page regardless of how aggressively a site scopes its styles. Developers get a consistent, keyboard-first UX layer over any page they debug. --- ## Architecture The extension follows the canonical MV3 tri-context architecture with several production-grade additions: ``` Page (host) ↕ Shadow DOM–isolated overlays Content Scripts (51 tool modules — each a { enable, disable, toggle, getState } singleton) ↕ chrome.runtime messages (Zod-validated schemas) Service Worker (MessageRouter, tool toggle serialization, badge, alarms, Stripe) ↕ Popup UI (React 18 toggle dashboard) ↕ OpenRouter API (isolated in service worker) AI Analysis Engine (optional LLM-augmented audit results) ``` **Tool lifecycle:** Every module follows a strict `init() → enable() → disable() → destroy()` contract managed by a shared `ToolLifecycle` utility that tracks MutationObservers, timers, and event listeners — no tool leaks resources on teardown. --- ## Key Technical Achievements ### Single-Pass DOM Analysis Engine The AI analyzer (`src/ai/ai-analyzer.ts`, 1,335 lines) runs a single `document.createTreeWalker` pass to snapshot the DOM rather than making repeated `querySelectorAll('*')` calls. For pages with more than 1,000 nodes it activates intelligent sampling, uses `requestIdleCallback` to yield between batches, and enforces a 2-second hard timeout — so analysis never jank the page. It detects 50+ issue patterns across five domains: accessibility (WCAG AA/AAA contrast, missing alt text), performance (lazy loading, render-blocking scripts), SEO (meta tags, heading hierarchy), best practices (deprecated elements), and security (mixed content, unsafe external links). ### Race-Condition-Safe Service Worker Rapid toggling of tools from the popup would cause interleaved enable/disable messages in the service worker. The solution is a serialized promise-chain (`pendingToggle`): each toggle operation awaits the previous one before executing, turning concurrent fanout into a strict serial queue. ### Canvas Flame Graph Built from scratch on the HTML5 Canvas API using `PerformanceObserver` entries. Supports mouse-wheel zoom from 0.1× to 10×, drag-to-pan, tooltip-on-hover, and click-to-detail. Entries are color-coded by category (script / layout / paint / composite) and exportable as JSON for offline analysis. ### Multi-Framework Component Tree A 1,009-line visualizer that detects the running framework via dedicated detector modules (React fiber, Vue `__vue_app__`, Angular `ng`, Svelte `__svelte`). A 500ms-debounced MutationObserver keeps the tree live as the app re-renders. The panel renders into Shadow DOM with full keyboard navigation, expand/collapse, and text search. ### MV3 CSP and Build System `vite.config.ts` has separate dev and production CSP branches: the dev build whitelists the CRXJS HMR WebSocket while the production build locks down to `strict-dynamic` nonces. Manual React vendor chunking keeps the popup bundle small. --- ## Tech Stack | Layer | Technologies | |---|---| | Extension platform | Chrome Manifest V3 · Firefox MV2 | | UI | React 18 · TypeScript · Tailwind CSS | | Build | Vite · CRXJS · pnpm | | Validation | Zod | | Testing | Vitest · Playwright | | Payments | Stripe · chrome.alarms | | AI | OpenRouter (optional, service-worker–isolated) | | Linting | Biome | --- ## What This Demonstrates This project requires simultaneously mastering browser extension security constraints (MV3 CSP, context isolation, message serialization), React rendering inside Shadow DOM, Canvas graphics programming, framework-agnostic introspection, and SaaS billing — all in a single, shippable product.