Recording from the Chrome Extension

The Chrome extension is the smoothest path. Side panel UI bound to the browser chrome. Multi-page recording across navigations. Pixel-perfect screenshots via privileged browser APIs.

This page covers the Chrome extension recording flow end to end, from install to publish. If you cannot install the extension — corporate-managed Chrome, non-Chromium browser, or you only need to record once — use the bookmarklet path instead.

Step 1: Install the extension

The FoxChat extension lives on the Chrome Web Store. From the dashboard at /walkthroughs, click the Install extension button at the top of the page; that opens the Chrome Web Store listing in a new tab. Click Add to Chrome, confirm the permissions prompt, and the extension is installed.

Confirmed compatible browsers: Chrome 90+, Edge 90+, Brave (current), Vivaldi, Opera. Firefox and Safari do not support the extension manifest version we ship; use the bookmarklet on those browsers.

Step 2: Open the side panel

Navigate to the page you want to record. Click the FoxChat extension icon in your browser toolbar (you may need to pin it from the puzzle-piece menu first). The side panel slides in from the right edge of the browser chrome.

Why a side panel rather than an in-page overlay? Two reasons:

• The panel persists across page navigations. When you click a link in the host page, the panel stays open. The bookmarklet, by contrast, evaporates on navigation.
• The panel is bound to the browser chrome rather than the page DOM, so the host site's CSS cannot affect it. There are no Shadow DOM CSS conflicts to worry about.

Step 3: Sign in to FoxChat (one-time)

The first time you open the extension panel, it shows a sign-in prompt. Click it, complete the OAuth round trip in a popup window, and you're back at the panel with your account loaded. The panel remembers your session across browser restarts.

If you have multiple FoxChat accounts (for example, one personal and one for an agency), use the account picker at the top of the panel to switch between them.

Step 4: Start a new recording

Click the + New walkthrough button in the panel. The panel switches to recording mode and shows:

• A + Highlight button to capture a step.
• A step counter showing how many steps you've captured.
• An optional title field at the top.
• Save and Cancel controls.

Step 5: Highlight, describe, repeat

Click + Highlight. Your cursor turns into a crosshair on the host page. Drag a rectangle around the element you want to highlight, release. A numbered cyan badge with a connector line and description box appears. Type your narration. Each step auto-saves on an 800ms debounce — no Save Step button to remember.

For each highlight, the extension captures:

• The CSS selector, ARIA label, ARIA role, data attributes, XPath, surrounding text, and a position hint — the seven-identifier fallback chain that makes playback resilient to UI changes.
• A pixel-perfect screenshot of the highlighted region using chrome.tabs.captureVisibleTab. This is the unique advantage of the extension — the bookmarklet does not have access to that API.
• The current page URL so the runtime can return to the right page during playback.

Step 6: Navigate between pages mid-recording

This is what the extension is uniquely good at. Click a link on the host page. The page navigates. The side panel stays open. The recording is still active. Capture more steps on the new page. The runtime tracks page boundaries and replays them in order — visitor sees step 5 on page A, then a small "navigating to page B" transition, then step 6 on page B.

Step 7: Save and publish

When you're done capturing steps, type a title at the top of the panel and click Save. The walkthrough lands in your /walkthroughs dashboard with a shareable URL. From there you can rename, change visibility (public, unlisted, private), or grab the embed code. See sharing and embedding for the full options.

If something goes wrong mid-recording

The panel exposes per-step controls:

• Click a step's number to re-open its description for editing.
• Click the small x on a step to delete it.
• Click Cancel to discard the recording. Auto-saved interim state remains as a draft in your dashboard, recoverable from there.
• If the browser crashes mid-recording, your steps up to the last 800ms-debounced save are persisted; reopen the dashboard, find the draft, and continue.