AI Website Inspector — Chrome Browser Extension & Live DOM Studio
A production-grade Chrome browser extension (Manifest V3) and in-browser inspection studio that analyzes any live website directly inside the…
A production-grade Chrome browser extension (Manifest V3) and in-browser inspection studio that analyzes any live website directly inside the viewport. It scans real DOM structure, detects accessibility flaws, missing headings, contrast errors, weak CTAs, and broken links, overlays numbered markers on the page, presents findings in an interactive side panel across 5 pillars, and lets users preview non-destructive copy and structural fixes live on the page before exporting client-ready reports.
- 1:1 pixel-accurate layout matching reference design with live website markers, popover tooltip on Issue #2, and interactive side panel
- Real DOM heuristic scanner evaluating live webpages across Accessibility, SEO, UX, Content, and Conversion pillars
- Non-destructive in-page overlays with numbered circular badges, dashed bounding boxes, and active issue tooltips
- Live fix preview engine allowing users to test copy and heading improvements directly in the DOM with 1-click rollback
- Dynamic scoring algorithm calculating 0-100 overall website rating and sub-scores with real-time recalculation on fix application
- Client-ready audit reporting with CSV export, printable PDF summary, and shareable clipboard link
- Complete unpacked Chrome Extension package (Manifest V3) ready to install and run on any live website via chrome://extensions
Built with: Chrome Extension (Manifest V3), chrome.sidePanel API, Content Scripts & In-Page Overlays, Real DOM Tree Analysis, Vanilla JavaScript, HTML5 / CSS3, WCAG AA Contrast Calculator, Google Fonts (Sora, Outfit, Chivo Mono)