Chrome Extension
Last updated: October 5, 2026
The OverlayQA Chrome extension is the browser half of OverlayQA, a design QA and website feedback tool. It opens a sidebar on any page you can load, including localhost, staging and login-gated pages, so you can capture UI issues on the element, run scans, and compare the page against a design. It is free to install from the Chrome Web Store. Public URLs can also be reviewed from the dashboard with Team Review and no extension at all.
What the Extension Does
Click any element on the page to create an issue. Every issue carries the CSS selector, the computed CSS values, a screenshot, the page URL, the viewport, and the browser and operating system, so a developer can open it and start fixing without asking you a question. The Workflows tab adds six scans and comparisons:
- Visual Comparison: Overlay a Figma frame or an uploaded image on the live page, adjust the opacity, scrub between the two, and inspect the elements that differ.
- AI Visual Comparison: Compare the page against a Figma frame and get a list of the visual differences, each tagged with a confidence level.
- Auto Review: Scan any page for UI-quality issues: design inconsistencies, missing interactive states, form problems, responsive gaps, dead UI, and leftover placeholder content.
- Accessibility Audit: Run axe-core WCAG 2.2 Level A and AA checks and get violations grouped by severity.
- Design Tokens: Scan this page for hard-coded colors, spacing, type and radius that should be design tokens.
- Components: Scan this page for components styled inconsistently: instances of the same element that drift apart.
Findings become issues in your project, and issues export to Jira, Linear, Notion, Asana, Trello and Slack with two-way sync on every plan. See Exporting Issues.
Install and Pin It
Install from the Chrome Web Store with Add to Chrome. After installing, click the OverlayQA icon in your toolbar (or find it under the puzzle-piece extensions menu). Your first click opens a guided sandbox: a demo page where you can capture your first issue before creating an account. The full walkthrough, from sandbox to first project, is in Getting Started.
Keep OverlayQA one click away by pinning it to your Chrome toolbar:
- Click the puzzle-piece icon in Chrome's toolbar to open the extensions menu.
- Find OverlayQA in the list and click the pin icon next to it.
- The OverlayQA icon now appears directly in your toolbar.
Permissions and What They Are For
Chrome lists every permission when you install. This is what each one does in OverlayQA. How we handle the data behind them is in the privacy policy.
| Permission | Why the extension needs it |
|---|---|
| storage | Saves your sign-in state, your settings, and the pins you place while signed out, which stay in your browser until they sync to your account. |
| activeTab, tabs, scripting | Opens the sidebar on the tab you are viewing and runs the capture tools on that page. |
| sidePanel | The sidebar itself is a Chrome side panel. |
| webNavigation | Keeps the sidebar in step with the page as you navigate, including single-page apps that change the URL without a reload. |
| alarms | Checks for in-extension announcements on a schedule. |
| debugger | Powers the width preview, which renders the page at another viewport width through Chrome's device emulation. It attaches only while a preview is open. |
| Access to all sites | Lets the capture tools and screenshots run on any page you review, including localhost and staging hosts the extension cannot know in advance. It was added because screenshots failed on many pages without it. |
| api.overlayqa.com | Your account, projects and issues. |
| api.figma.com | Fetches the Figma frames you pick for Visual Comparison. |
| us.i.posthog.com | Product analytics about how the extension is used. |
Sign In and Local Captures
You don't need an account to start capturing. Pins you save while signed out are stored locally in your browser, then sync to a "Local Captures" project in your account once you sign up. Sign up or sign in from the sidebar when you are ready; the steps are in Getting Started.
Keyboard
Tip: Press ← to expand the sidebar or → to collapse it without reaching for the mouse.
Updates
Chrome updates the extension automatically; you do not need to reinstall it. Your projects and issues live in your account, so an update never touches them.
Uninstall
Open chrome://extensions, find OverlayQA and click Remove. Chrome then opens a short feedback page. Your projects and issues stay in your account at app.overlayqa.com; only pins that never synced are removed with the extension.
Frequently Asked Questions
Does the OverlayQA Chrome extension work on localhost and login-gated pages?
Yes. The extension runs in your own browser session, so it works on localhost, staging previews, login-gated pages and production. For a public URL you can also use Team Review from the dashboard with no extension.
Why does the extension ask for access to all sites?
The capture tools and screenshots have to run on whichever page you are reviewing, including local and staging hosts the extension cannot know in advance. Without site-wide access, screenshots failed on many pages. Data handling is described in the privacy policy.
Is the Chrome extension required to use OverlayQA?
No. Team Review runs Visual Comparison, AI Visual Comparison, Accessibility Audit, Auto Review and Design Tokens from the dashboard on any public URL. Only the Components scan and comparing against a PDF still need the extension, and so does any page that is local, private or behind a login.
Next Steps
- Create your first issue by annotating elements on the page.
- Review any public URL from the dashboard with Team Review, no extension needed.
- Run an accessibility audit to scan for WCAG violations.
- Connect an AI coding agent with the MCP server.