# Chrome extension

> Record narrated product demos, with sensitive content hidden as it happens.

Source: https://autoplans.dev/docs/chrome

The Autoplans Demo Recorder is a Chrome extension that records a browser tab
into a product demo, hides anything sensitive **before** the frame is stored,
and hands the recording to autoplans.dev to be narrated. An AI agent can drive
the whole thing over MCP.

## Installing

Install **Autoplans Demo Recorder** from the Chrome Web Store, then open it and
sign in. The sign-in happens in a browser tab on autoplans.dev and hands the
extension an API key scoped to your account; you can revoke it at any time from
**Settings → API keys**.

## What it captures, and what it does not

Capture starts only when you start it, and only on the tab you chose. Nothing is
recorded before that, and nothing is recorded from other tabs.

Before a frame is stored, the extension blurs sensitive content **in the page
itself**, so those pixels never enter the video at all:

- password, one-time-code and payment fields;
- fields whose name or label says `api key`, `secret`, `token`, `cvv`, `iban`,
  `ssn` and similar;
- text that looks like an API key, an access token, a JWT, an email address or a
  card number that passes a Luhn check;
- anything matching a CSS selector you add, in the extension's settings or with
  the `privacy_mask` tool.

A second pass in the recording pipeline covers what a page cannot blur for
itself — canvas, video, cross-origin frames — and it fails closed: if a mask
update arrives late, the previous regions are kept and widened rather than
dropped.

Typed text is never recorded. The action log stores that typing happened, into
which field, and how many characters — never the characters.

## Recording

**With you at the keyboard.** Click the extension and choose *Record this tab*.
Chrome requires a user gesture before any extension may capture a tab, so this
is always one click.

**With an agent driving.** An agent calls `recording_start`. In the default mode
the extension asks you to click once to allow it — Chrome has no way around
that, and it means a page cannot be recorded without someone deciding to. On a
paid plan you can enable unattended recording, where the extension captures
through Chrome's debugger instead. Two things to know about that mode: Chrome
shows a *"started debugging this browser"* banner on every tab while it runs,
and Chrome stops producing frames when the tab is not visible, so the recording
pauses and tells the agent to bring the tab forward.

## Narration, and why the script never comes back

When you produce a video, the server reads the action log — never a frame —
writes a narration script, and speaks it with **your own ElevenLabs account**.
Add your key under [Demo Recorder settings](/dashboard/recorder); it is verified
with ElevenLabs, encrypted at rest, and used only by the render pipeline.

The script is stored encrypted and is never returned to any client. The
extension and the MCP tools receive a job status and a link to the finished
video, and there is no tool that returns the words. Two honest limits on that:
the text does reach your own ElevenLabs account, because that is what speaks it,
and anyone holding the audio can transcribe it. The promise is that Autoplans
never hands the script to the browser, not that the words are unrecoverable.

Captions are deliberately not offered — a caption track is the script.

## Talking avatars

On paid plans a talking-head clip can be composited into the corner of the
video. Three providers are supported, each on your own key:

| Provider | What it needs |
| --- | --- |
| ElevenLabs | An ElevenLabs **Pro** plan and a presenter image. Same key as the voice. |
| HeyGen | A HeyGen key and an avatar or talking-photo id. |
| Sync Labs | A Sync Labs key and a short presenter clip to lip-sync. |

## Driving it with an agent

```bash
claude mcp add --transport stdio autoplans-browser -- npx -y autoplans-browser-mcp
```

For Claude Desktop or Cursor, add the same command to the client's MCP config:

```json
{
  "mcpServers": {
    "autoplans-browser": {
      "command": "npx",
      "args": ["-y", "autoplans-browser-mcp"]
    }
  }
}
```

A Chrome extension cannot accept connections, so `autoplans-browser-mcp` listens
on loopback and the extension dials out to it. The first time a client connects,
the extension asks you to approve it — a local process asking to drive your
browser is a decision for you, not something granted because it managed to
connect. Approved clients are listed in the extension's settings and can be
revoked there.

### The tools

| Tool | What it does |
| --- | --- |
| `browser_tabs` | List open tabs |
| `browser_navigate` | Open a URL |
| `browser_snapshot` | The page's interactive elements, each with a ref. Sensitive values are redacted |
| `browser_click`, `browser_type`, `browser_press`, `browser_scroll` | Act on the page by ref |
| `browser_wait` | Wait for a delay, or for text to appear |
| `browser_screenshot` | A screenshot, already masked |
| `recording_start`, `recording_step`, `recording_stop`, `recording_status` | Control the recording |
| `privacy_mask`, `privacy_rules` | Add and inspect masking rules |
| `video_produce`, `video_status`, `video_list` | Produce a narrated video and follow it |

`recording_step` is worth using: the steps you mark become the structure of the
narration, and a demo narrated from marked steps reads far better than one
narrated from raw clicks.

## Plans

| | Free | Starter | Pro |
| --- | --- | --- | --- |
| Recording, privacy masking, local download | ✓ | ✓ | ✓ |
| Longest recording | 3 min | 10 min | 30 min |
| Narrated productions | 3 / month | 30 / month | unlimited |
| Talking avatar | — | ✓ | ✓ |
| Unattended (agent-started) recording | — | ✓ | ✓ |
| Cursor styles and click effects | — | ✓ | ✓ |
| Watermark on the output | yes | no | no |

## Troubleshooting

**"Chrome refused to capture that tab."** Internal pages — `chrome://`, the Web
Store, PDF viewer — cannot be captured by any extension.

**Unattended recording will not start.** Close DevTools on that tab; Chrome
allows one debugger at a time.

**The recording paused on its own.** In unattended mode Chrome stops producing
frames for a tab that is not visible. Bring the tab forward.

**The agent's tools are missing.** Open the extension and approve the
connection. Until then the relay offers a single `autoplans_connect_browser`
tool that explains this.

**"Add your ElevenLabs API key."** Productions need one; add it under
[Demo Recorder settings](/dashboard/recorder).