Chrome Extension
Real-time UX auditing directly in your browser with on-page issue highlighting
Chrome Extension
The VertaaUX Chrome Extension brings UX auditing directly into your browser. See accessibility and usability issues overlaid on any website you visit, triage them without switching context, and record multi-step user flows for comprehensive analysis.
Why Use the Extension?
The Chrome Extension is ideal when you want to:
- Audit visually - See issues highlighted directly on the page, not just in a report
- Stay in context - Triage issues without leaving the browser
- Test interactively - Walk through user flows and catch issues as they happen
- Quick spot checks - Run fast audits without setting up CI or API access
Features
Side Panel
Quick scans and issue triage from a sidebar that stays open as you browse
DevTools Panel
Deep analysis with element inspection, computed styles, and export options
On-page Overlays
Visual issue highlighting with severity colors and click-to-select interaction
Flow Recording
Capture multi-step user workflows like login flows or checkout processes
Requirements
| Requirement | Version |
|---|---|
| Chrome | 120 or later |
| VertaaUX API Key | Required for scans |
The extension works on any website, including localhost for local development testing.
Installation
From Chrome Web Store (Recommended)
- Visit the VertaaUX Chrome Extension page
- Click Add to Chrome
- Click Add extension in the confirmation dialog
- Pin the extension icon for easy access (click the puzzle icon, then the pin)
Manual Installation (Development)
For development or testing unreleased versions:
-
Clone the extension source:
git clone https://github.com/vertaaux/extension.git cd extension npm install && npm run build -
Open Chrome and navigate to
chrome://extensions -
Enable Developer mode (toggle in top-right corner)
-
Click Load unpacked and select the
extension/distfolder -
The extension icon appears in your toolbar
Quick Start
After installation, get your first audit results in under a minute:
- Click the extension icon in your browser toolbar
- Enter your API key in the popup (you only need to do this once)
- Navigate to any website you want to audit
- Open the Side Panel by clicking the extension icon or pressing
Ctrl+Shift+U(Cmd+Shift+Uon Mac) - Click "Quick Scan" to start your first audit
- See issues appear as colored overlays on the page
Don't have an API key?
Create a free VertaaUX account at vertaaux.ai/signup. Your API key is available in Settings > API Keys. New accounts include 100 free scans per month.
Scan Modes
The extension supports two scan modes:
| Mode | Duration | Coverage |
|---|---|---|
| Quick Scan | ~2 seconds | Basic accessibility checks using axe-core |
| Full Scan | ~15 seconds | Comprehensive accessibility + UX heuristics |
Use Quick Scan for rapid feedback during development. Use Full Scan before committing or for thorough review.
Understanding Overlays
After a scan completes, issues appear as colored borders around problematic elements:
| Color | Severity | Meaning |
|---|---|---|
| Red | Critical | Must fix - blocks users or violates WCAG A |
| Orange | Serious | Should fix - significant impact on usability |
| Yellow | Moderate | Good to fix - noticeable but not blocking |
| Blue | Minor | Nice to fix - polish and refinements |
Click any overlay to see full issue details in the Side Panel.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Ctrl+Shift+U (Cmd+Shift+U on Mac) | Toggle Side Panel |
Escape | Close overlay tooltip |
Next Steps
Detailed Quickstart
Step-by-step guide with screenshots and troubleshooting
Side Panel Guide
Master the triage workflow with filters and actions
DevTools Panel
Deep dive into element inspection and exports
Flow Recording
Audit multi-step user flows like checkout processes
Related
- MCP Server - Get AI-assisted fix suggestions for issues found
- REST API - API key setup and authentication details
Was this page helpful?