Browser Extension

Browser Extension

The MV3 extension lets you inspect and comment on any site — no SDK install required on the target — and captures pixel-perfect screenshots via chrome.tabs.captureVisibleTab.

Load it (unpacked)

npm run build:extension   # builds packages/extension/content.js

1. Open chrome://extensions, enable Developer mode, click Load unpacked, and select packages/extension.
2. Click the Loupe icon → set project key (pk_demo_acme), user, API base (http://localhost:8787), and optionally the demo HMAC → Start Loupe on this tab.

How it works

It reuses the exact SDK core; the only difference is the screenshot source. The SDK exposes a captureScreenshot override in its config, and the extension passes a function backed by the background worker.

sequenceDiagram
  participant C as content.js (SDK core)
  participant BG as background.js (worker)
  C->>BG: LOUPE_CAPTURE
  BG->>BG: chrome.tabs.captureVisibleTab (real pixels)
  BG-->>C: full-page PNG
  C->>C: crop to element rect (× dpr), paint over redacted regions
  C-->>C: return data URL → uploaded as a blob

Loading

Files

File	Role
manifest.json	MV3 manifest (permissions, worker, popup)
background.js	Capture worker (captureVisibleTab)
content.src.ts → content.js	Bundled SDK core + capture override + crop/redact
popup.html / popup.js	Config + "Start on this tab"