01 · Purpose

Inspection and analysis without context switching.

VA Page Inspector runs automated analysis on any web page and surfaces findings in a Chrome Side Panel. Rather than opening separate tools for accessibility audits, performance metrics, SEO checks, and analytics verification, developers and QA can inspect everything from one interface without leaving the page.

The extension activates on development, staging, and local environments. Analysis runs on-demand in the active tab, with results displayed in structured modules.

Core architecture

Three execution contexts working in parallel.

Service Worker

Manages tab lifecycle and permissions. Detects when the user opens the side panel or switches tabs, but does not participate in analysis.

Content Script

Has full access to the page DOM. Collects data from all modules in parallel and returns results to the side panel.

Side Panel

Renders analysis results and handles user interaction. Communicates directly with the content script, maintaining context isolation.

02 · Modules

17 specialized analyzers cover the full page stack.

Module	Type	What it checks
`Overview`	Metadata	Page title, meta tags, language, viewport, landmark regions, responsive breakpoints, reading level
`SEO`	Content	Meta tags, Open Graph, Twitter Cards, JSON-LD structured data, heading hierarchy, robots, canonical
`Accessibility`	Compliance	WCAG violations via axe-core, grouped by impact and rule type
`Analytics`	Integration	GA4/GTM detection, dataLayer inspection, event histogram, feedback tools
`Performance`	Metrics	Core Web Vitals (LCP, CLS, INP), Navigation Timing, resource breakdown
`Drupal`	CMS	Version, settings, behaviors, node ID, content type, theme
`VADS`	Design System	VA web components, USWDS classes, design system version
`Scripts`	Resources	Script inventory with sizes, render-blocking flags, third-party origins, SRI
`Forms`	UI	Label audit, autocomplete validation, duplicate IDs, submit buttons
`Images`	Assets	Broken images, missing alt text, oversized detection, format recommendations, lazy loading
`Storage`	State	Cookies, localStorage, sessionStorage with sizes and type badges
`Console`	Errors	Captured console.error and console.warn calls from page JavaScript
`Typography`	Design	Font families, sizes, weights, line heights against VADS/USWDS scales
`Security`	Headers	HTTP security headers (CSP, HSTS, X-Frame-Options, etc.)
`Compare`	Multi-env	Diff the same page URL across different environments
`Snapshots`	History	Save analysis state with screenshots for regression tracking
`Tools`	Utilities	Visual overlays for focus order, touch target size, spacing, grids, and more

Module system

Plug-in architecture with minimal core overhead.

Self-contained modules

Each module is a single file that wraps itself in an IIFE and self-registers. No central registry or initialization function required.

Dual context execution

Modules implement analyze() for the content script and render() for the side panel. Code duplication is eliminated while maintaining context isolation.

Parallel data collection

All modules run their analyze() functions in parallel. Performance is limited by the slowest module (typically accessibility via axe-core), not by sequential execution.

XSS protection

All page-sourced strings are escaped in render() functions. Extension context is isolated from page context via Chrome's content script model.

03 · Use cases

Built for developers, QA, and product teams.

Front-end developers check SEO, accessibility, and performance metrics on local builds. They inspect Drupal configuration, verify design system compliance, and debug form labels and image alt text without switching tools.

QA teams audit accessibility violations before staging, capture performance metrics for regression tracking, verify analytics setup, and test on multiple environments without manually reloading external tools.

Product teams understand what data is being collected, review security headers and storage usage, and generate analysis reports with snapshots.

Key features

Built with developer workflow in mind.

Side panel interface

Results display in Chrome's side panel. No popup modal, no separate tab required, no workflow interruption.

On-demand analysis

Analysis runs only when requested. No background monitoring, no continuous polling, no performance overhead when the extension is inactive.

Snapshot history

Save analysis state with a screenshot for the current page. Build a history of checks across multiple URLs and compare regressions.

Environment comparison

Compare the same page URL across local, development, QA, and production environments. Diffs show what changed between builds.

04 · Technical approach

Vanilla JavaScript, no frameworks, no build process.

The extension is pure JavaScript with no npm dependencies. The only external library is axe-core for accessibility analysis, which is vendored directly (Chrome intranet restrictions prevent CDN access).

Analysis runs in the browser context where the page lives. All data stays local. No telemetry, no server relay, no upload step. The extension is designed to be lightweight enough to run on every page load without causing performance regression.

Related work

Other accessibility and audit tools.

Contrast Check

Hover any text to see its WCAG contrast ratio and pass/fail status instantly.

Government website design

Notes on practical standards, trust, and usability in public-service interfaces.