Integrations

Chrome Extension

Analyze any web page with one click — no external server required. Screenshots are captured directly in the browser and analysis runs in the background while you keep working.

What it does

No external server — uses Chrome DevTools Protocol for screenshots
Captures desktop, tablet, and mobile viewports in one pass
Side panel UI: Capture → Analyze → Results → History
Background job polling — analysis continues when panel is closed
Badge notification on the toolbar icon when a job completes
Copy fix prompts, enhance with AI, and mark issues resolved
Settings sync across Chrome profiles (API URL)
API key stored locally on device only

Requirements

Chrome 114 or later (required for the Side Panel API)
An InterfaceGuard API key — generate one under Settings → API Keys
At least one InterfaceGuard project created in the web app

Installation

Chrome Web Store listing is coming soon. In the meantime, install the extension in developer mode using the steps below.

Build the extension

Clone the repository and build the Chrome extension:

git clone https://github.com/cre8tiv/ux.ai.git
cd ux.ai/ux-analyzer-chrome
npm install
npm run build

Load in Chrome

1. Go to chrome://extensions
2. Enable Developer mode (toggle in the top-right corner)
3. Click Load unpacked and select the dist/ folder

After rebuilding, click the ↺ refresh icon on the extension card to reload. In development, npm run dev rebuilds automatically on every save.

Configure your API connection

1. Click the InterfaceGuard icon in the Chrome toolbar
2. Click the gear icon (or right-click → Options)
3. The API URL is pre-filled with the production endpoint
4. Enter your API Key
5. Click Test Connection to verify, then Save

The API URL syncs across Chrome profiles. The API key is stored locally on this device only. For local development, override the API URL with http://localhost:8080.

Usage

Navigate to any page you want to analyze, click the InterfaceGuard icon in the toolbar, and choose Open Side Panel.

Capture tab

Select desktop, tablet, and/or mobile viewports and click Capture. Chrome shows a brief "DevTools is debugging" notice while screenshots are taken — this is normal.

Analyze tab

Pick a project, select the analysis types you want, and click Analyze. The job is submitted and you can track progress here or in the History tab.

Results tab

Once a job completes this tab opens automatically. Filter issues by severity or category, expand any issue card for the full description, affected screens, WCAG criteria, and implementation guidance.

History tab

See all past analysis jobs with their status and summary. Click Refresh to reload job state or Resubmit to re-run an analysis.

Issue actions

Each issue card in the Results tab offers three actions:

Copy prompt — copies a ready-to-use prompt describing the issue and fix steps to the clipboard
Enhance — sends the issue to the AI service to generate a more detailed, context-aware prompt, then copies it
Resolve / Unresolve — marks the issue as fixed and syncs the status to the backend

Background polling

Analysis jobs continue running even if you close the side panel or navigate away. When the panel is closed, a background alarm checks for updates every minute. A badge appears on the toolbar icon when a job completes.

Analysis types

Type	What it checks
Accessibility	WCAG compliance, contrast ratios, screen reader support
Usability	Ease of use, task completion, interaction clarity
Consistency	Visual and interaction consistency across screens
Visual Hierarchy	Content prioritization and visual flow
Color Scheme	Color usage, contrast, and harmony
Layout	Spacing, alignment, and grid usage
Design System	Component and pattern adherence
Branding	Brand identity and visual consistency
Expert Review	Holistic UX expert evaluation

Troubleshooting

"Cannot capture screenshots on browser internal pages"

Chrome extensions cannot capture chrome://, about:, or edge:// pages. Navigate to a regular http:// or https:// page first.

The "DevTools is debugging" infobar stays visible

The debugger did not detach cleanly. Refresh the tab to clear it. This usually happens if you navigate away mid-capture or close the popup while capture is in progress.

API key validation failed

Verify your API URL and key in Options. Make sure the InterfaceGuard service is running and reachable. Check that your key is active in Settings → API Keys.

Analysis stuck on "pending" for a long time

Open the side panel to trigger an immediate status check (background polling only fires every minute when the panel is closed). Verify the analysis service is healthy.

Ready to analyze your interface?

Create a free account to get your API key, then install the extension.

Start Free Review All Integrations