Extension Overview

The UI Inspect browser extension for Chrome and Edge — element inspection, screenshot capture, and design comparison.

The browser extension is a Chrome/Edge extension that provides:

Element Inspector — Hover over any element to see its box model, spacing, alignment guides, and computed styles
Screenshot Capture — Capture pixel-perfect screenshots of any element or full page
Design Comparison — Upload a design image and overlay it on your implementation to spot differences
Visual Diff — Send screenshots to the diff engine for automated analysis and CSS fix suggestions

Installation

pnpm --filter @ui-inspect/extension build

Click the UI Inspect icon in the toolbar. The side panel should open with the extension UI.

For hot-reload during development:

pnpm --filter @ui-inspect/extension dev

The extension uses the Plasmo framework with Manifest V3. Hot reload works automatically during development.

Component	File	Description
Side Panel	`sidepanel.tsx`	Main UI with inspector settings, comparison controls
Content Script	`content.tsx`	Injected into pages for element picking and overlays
Background	`background.ts`	Screenshot capture, message routing between components

Side Panel ←→ Background Script ←→ Content Script
     ↕                                    ↕
  MCP Server                        Page DOM

Messages are passed via Chrome's runtime.sendMessage and tabs.sendMessage APIs.

Permission	Purpose
`sidePanel`	Display extension UI in the side panel
`tabs`	Access tab information for screenshot targeting
`activeTab`	Capture screenshots of the active tab
`scripting`	Inject element detection scripts
`<all_urls>`	Inspect elements on any page
`http://localhost:3000/*`	Connect to the MCP server

Shortcut	Action
Hold `Ctrl`	Activate element picker
`Esc`	Stop picking / close modals