Ariada · Open Source · Documentation

Browser Surface — the in-page overlay scanner

A bookmarklet-deployable in-page overlay that injects the Ariada scan engine directly into any visited page and renders a compact findings summary without leaving the tab.

Package: @ariada-org/core-browser Bookmarklet / in-page overlay Open source · EUPL-1.2 Free Real build — not a mockup

What this module is

The Ariada browser surface is an in-page overlay: a self-contained shadow-DOM element injected by a bookmarklet (or by the companion browser extension) that runs @ariada-org/core-browser on the current document and renders a compact findings badge — no page navigation, no server call, no account.

Is this a design mockup? No. The overlay is a real, buildable artefact in packages/core-browser. Every screenshot below is from the end-to-end Playwright harness, not a design tool.
Type
In-page overlay injected via bookmarklet or extension content-script
Where it lives
packages/core-browser — the WebAssembly-compatible in-browser adapter for the scan engine
What it runs
The six OSS domain analyzers on the current document's DOM; cross-origin sub-resources are excluded (same-origin security model)
Zero outbound calls
Confirmed: zero network requests during scan (verified in harness — 2 requests total, all pre-scan page load)
Bundle size
12 407 bytes (limit: 50 000 bytes) — PASS
Status
Built and test-covered; Chrome Web Store bookmarklet listing not yet published

Who uses it & why

RoleHow they use itValue
Developer / QA engineerInstant in-page check while browsing; no tool-switch neededHigh — zero friction
Accessibility engineerOverlay on any visited page across six domains, keyboard-navigableHigh
Compliance reviewerSpot-check a vendor page without installing a full extensionMedium-High
Non-technical userOne-drag bookmarklet install; plain badge with finding countsMedium

The browser surface is the lowest-friction entry point: one bookmarklet drag and the scanner is available on every page the user visits.

Distribution — free and open source

The browser surface and the scan engine it runs are free and open source under the EUPL-1.2 licence. There is no account, no upload, and no obligation to use the in-page overlay scan.

CapabilityAvailability
In-page six-domain overlay scanFree · open source
Keyboard-navigable shadow-DOM overlayFree · open source
Zero outbound network calls during scanFree · open source
Bookmarklet install — no account requiredFree · open source
Everything documented on this page is part of the open toolkit. The project is funded as public-interest open source.

Getting started

  1. Discover — bookmarklet drag from ariada.org or npm install.
  2. First value — drag the bookmarklet once; click it on any page for an instant overlay.
  3. Habit — use during daily development and QA on any page you visit.
  4. Integrate — embed the core-browser package in your own web application for in-app scan results.

Documentation & help — current state

Bookmarklet install
A one-liner drag-to-bookmarks-bar install is the target; the bookmarklet generator is in packages/core-browser/bookmarklet.ts.
Docs site
apps/docs (Astro Starlight) needs a "Browser surface" guide covering install → using the overlay → keyboard navigation → when to use the full extension.
Privacy note
A prominent "runs locally — zero outbound calls" disclosure is recommended on the install page and in the overlay itself (verified in harness).

AI chat & digital-adoption helpers — plan

Honest status: there is currently no in-product AI-chat integration. The following is a proposal.

Screenshots — click any image to open it full size

From the end-to-end Playwright harness. Each thumbnail opens a full-size, zoomable overlay.

Overlay shadow-DOM element visible over a mixed-severity page — domain labels with finding counts
1 · Overlay visible — mixed severity
After Tab press — keyboard focus is within the overlay shadow root
2 · Keyboard focus inside overlay
After Escape key — overlay element is absent from the DOM
3 · Overlay dismissed by Escape
First-party guard active — cross-origin URL returns filtered result
4 · First-party guard
Mobile 375 px viewport — overlay at top-right, responsive layout
5 · Mobile 375 px — overlay

Assessment summary

Full assessment is in assessment.html. Headline: the overlay is keyboard-operable, shadow-DOM isolated, and generates zero outbound network calls. Open gap: the 375 px mobile viewport shows horizontal overflow when the overlay max-width of 420 px exceeds the viewport — a layout fix is the top follow-up.

Full detail in assessment.html.