First preview build of UnderPixel — the Chrome extension that gives AI coding assistants timestamped visual–API correlation.

What's in this release

• underpixel-extension-0.1.0-chrome.zip — unpacked Chrome MV3 extension (145 KB). See install steps below.

Installation

1. Install the bridge

npm install -g underpixel-bridge

2. Load the extension

1. Download underpixel-extension-0.1.0-chrome.zip from this release and unzip it.
2. Open chrome://extensions/ and enable Developer mode.
3. Click Load unpacked and select the unzipped folder.
4. Click the UnderPixel toolbar icon → Connect to view your local MCP endpoint.

3. Wire it to your MCP client

{
  "mcpServers": {
    "underpixel": {
      "type": "streamableHttp",
      "url": "http://127.0.0.1:PORT/mcp"
    }
  }
}

(The exact port is shown in the popup after Connect.)

What works in this build

• Network capture with full request / response bodies (CDP via chrome.debugger)
• DOM recording (rrweb) and incremental snapshots
• Smart screenshot gate (rrweb event stream → stability wait → pixelmatch diff)
• Correlation engine — joins network, DOM, and screenshots on a shared timeline
• API dependency graph (auto-detected via value propagation)
• Session replay UI: rrweb-player + event-grouped API timeline (Svelte 5)
• Session export / import as gzipped .underpixel files
• ~12 focused MCP tools (correlate, timeline, snapshot_at, api_calls, api_dependencies, screenshot, dom_text, replay, navigate, interact, page_read, capture_start/stop)
• Streamable HTTP and stdio MCP transports

Known caveats

• This is a preview build, not yet on the Chrome Web Store — load unpacked only.
• Activating the extension shows Chrome's "being controlled by automated test software" banner (CDP requirement, same as mcp-chrome).
• Cannot be used simultaneously with DevTools open on the captured tab (CDP is exclusive).
• npm install -g underpixel-bridge is not yet published to npm; for now run the bridge from the local repo build.

Roadmap

• Phase 4 (next) — auto-generated API docs, performance overlays on replay, visual dependency-graph UI
• Phase 5 — Edge / Brave / Arc support (Chromium-trivial), Firefox port

See README for full details.