Getting Started

OverlayQA is a Chrome extension that helps you capture UI issues, compare designs against live builds, and run accessibility audits. This guide walks you through installing the extension, creating your first project, and opening the sidebar on any page.

Install the Chrome Extension

OverlayQA is available on the Chrome Web Store. Click Add to Chrome and confirm the installation when prompted. The extension works on any website you visit in Chrome.

Sign Up or Sign In

After installing, click the OverlayQA icon in your toolbar (or find it under the puzzle-piece extensions menu). You will be prompted to sign in or create an account. You can sign up with email or use Google authentication.

Complete Onboarding

The onboarding wizard walks you through a few quick steps to personalize your experience:

Company name — Enter your company or team name.
Your role — Select from Designer, Developer, Project Manager, QA Engineer, Founder/CEO, or Agency Owner.
Your goal — Choose what you want to accomplish: catching design inconsistencies, streamlining feedback loops, replacing screenshot-based bug reports, or collaborating with your team.
Choose a plan — Select a plan or skip for now. All plans include a 7-day free trial.

Pin the Extension to Your Toolbar

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.

Create a Project

Projects organize your issues by site or app. To create one:

Click the OverlayQA icon in your toolbar.
Click Create Project.
Enter a project name (e.g., "Marketing Site") and the base URL of the site you are reviewing.
Your project is ready. Any issues you create on pages matching that URL will be grouped here.

Open the Sidebar

Navigate to any page on your project's site and click the OverlayQA toolbar icon. A sidebar opens on the right side of the page showing your project's issues, workflows, and settings. From here you can create issues, run audits, and start visual comparisons.

Next Steps

Create your first issue by annotating elements on the page.
Compare designs against Figma with the Visual Comparison workflow.
Run an accessibility audit to scan for WCAG violations.
Export issues to Jira, Linear, or Notion.