Frontend Dev Helper — Browser Extension DevTools Suite
Manifest V3 extension that replaces 8+ legacy tools with 19 visual debuggers — DOM outliner, z-index 3D, contrast, a11y audit, and network analyzer.
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 19 visual 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 · Bun |
| 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.