Back to Projects
Frontend Dev Helper — Browser Extension DevTools Suite
A unified Chrome and Firefox Manifest V3 browser extension that consolidates 27 professional frontend debugging tools into a single, Shadow DOM–isolated, keyboard-first developer experience — replacing the fragmentation of 8–12 separate legacy MV2 extensions with one cohesive layer over every page you debug. Ships with an AI-powered DOM analysis engine, an interactive Canvas flame graph, a multi-framework component tree, and Stripe-powered licensing.
## 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 · 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.