Documentation

Visual Mode

See accessibility findings on the real website — the same approach as AAArdvark. The extension opens the live page with a bottom dock, numbered pins, and an issues drawer. Cloud scans and live checks are bridged: match status on the dock, and Scan Page can save a live report to your dashboard. We do not iframe third-party sites (most block that with X-Frame-Options or CSP).

Why an extension?

Browsers refuse to load most production sites inside another site's iframe. Accessibility platforms solve this by running a content script on the customer page (or using scan screenshots for reports).

Meerkat Visual Mode uses the extension for accurate DOM targeting with axe selectors from your scan.

Setup

01Load the extension

Open Chrome → chrome://extensions → enable Developer mode → Load unpacked → select apps/extension (the folder with manifest.json). Confirm Meerkat Inspector is enabled with no errors.

02Hard-reload Meerkat

After install or extension reload, hard-reload this app (⌘⇧R / Ctrl+Shift+R). Reports should show Extension connected.

03Open Visual Mode from a scan report

Dashboard → Sites → completed scan → Visual Mode, or View on page on any issue. With the extension connected, Visual Mode auto-opens the live URL and outlines issues.

04Triage on the live tab

Switch to the site tab. Use the bottom dock (View Issues, Scan Page) and numbered pins on elements. The dock shows how cloud scan findings match this page (pinned / missing / live-only).

05Bridge cloud ↔ live

Cloud scans run in Browserless; Visual Mode runs on your browser (with your login). Click Scan Page to re-run axe on the current view, match findings to the cloud report, and optionally save a live report back into Meerkat (linked to the original scan).

Advanced

Optional env when the extension has a fixed ID (Chrome Web Store):

NEXT_PUBLIC_EXTENSION_ID=<chrome-extension-id>

Source: apps/extension. Protocol: packages/shared/src/extension-protocol.ts.

Open Sites