mcpField
C
canvas-capture-extension

canvas-capture-extension

github.com/remotion-devDevelopment68.6k359 installsUpdated today
Repository

About canvas-capture-extension

A skill for building, installing, and developing the Remotion Canvas Capture Chrome extension. It guides preparation of a webpage shot and preview before a user records it.

Key features

  1. 01Build and install the extension bundle
  2. 02Run WXT development builds
  3. 03Reload the extension in Chrome
  4. 04Prepare a shot and inspect its preview
  5. 05Keep recording under manual user control

Use cases

  1. 01Install a durable production build
  2. 02Develop and reload extension changes
  3. 03Prepare a webpage for recording

MCP support

Activating the extension exposes the `setup_shot`, `get_shot`, and `save_recording` WebMCP tools in the current tab.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/remotion-dev/remotion --skill canvas-capture-extension

After installing, type/canvas-capture-extensionin Claude Code to confirm it loaded.

Bundled filesscripts/rebuild-extension.shagents/openai.yaml

Details

From the project README

Canvas Capture Extension

Build the extension from packages/canvas-capture-extension, but always install the unpacked copy outside the checkout so deleting a worktree cannot break it.

Rebuild and install

  1. Locate a Remotion checkout containing packages/canvas-capture-extension/package.json. Prefer the current checkout; otherwise use /Users/jonathanburger/remotion.

  2. Run:

    .agents/skills/canvas-capture-extension/scripts/rebuild-extension.sh \
  --repo <remotion-checkout>

    The script builds with Bun and installs the complete WXT bundle in /Users/jonathanburger/Applications/Remotion Canvas Capture Extension. Building does not require an installed browser. To use the extension, choose Chrome 157.0.8080.0 or newer with Canvas Draw Element enabled.

  3. Confirm that the installed directory contains manifest.json, background.js, capture.js, drag-image.js, shot-tools.js, logo.svg, and the generated extension icons.

Develop with React and Vite

  1. Close any running Recorder Chrome instance that uses the dedicated Canvas Capture profile.
  2. From packages/canvas-capture-extension, run bun run dev.
  3. WXT writes the development bundle to the durable directory /Users/jonathanburger/Applications/Remotion Canvas Capture Extension Dev, launches Chrome for Testing with the Canvas Draw Element feature enabled, and loads the extension automatically.
  4. Click the extension icon to show the in-page controls. Source and manifest changes cause WXT to rebuild and reload the affected extension contexts.

Use the separate development directory only for bun run dev. Continue using the production install directory above for manually loaded builds.

The Remotion pages receive recordings through externally_connectable messaging; the extension does not inject a receiver content script. To test a local destination, set CANVAS_CAPTURE_HANDOFF_ORIGIN (for example http://localhost:3000) when running bun run dev. Production builds always use https://www.remotion.dev.

To select another Chrome 157.0.8080.0 or newer browser, set CANVAS_CAPTURE_BROWSER_EXECUTABLE to its executable path when running bun run dev. Development uses the version-neutral ~/Library/Application Support/Remotion Canvas Capture profile.

Reload in Chrome

  • Launch Chrome 157.0.8080.0 or newer with the dedicated Canvas Capture profile, then open chrome://extensions.

  • Enable Developer mode on chrome://extensions.

  • If Remotion Canvas Capture already points to the durable directory, click Reload.

  • If Chrome shows the deleted worktree path, remove that broken entry, choose Load unpacked, and select:

    /Users/jonathanburger/Applications/Remotion Canvas Capture Extension

    This one-time move changes the extension ID because Chrome derives unpacked extension identity from its absolute path.

  • Keep loading future production builds from the durable install directory, never from a worktree-local dist directory. WXT-managed development builds use the separate durable development directory documented above.

  • Enable chrome://flags/#canvas-draw-element and restart Chrome when the experimental HTML-in-canvas API is unavailable. Alternatively, launch with --enable-features=CanvasDrawElement; either method is sufficient. Do not add --enable-blink-features=CanvasDrawElement, which triggers Chrome's unsupported-command-line warning.

Do not edit Chrome's Preferences or Secure Preferences files to move or reload the extension. Use Chrome's extensions page so its integrity metadata stays valid. Browser UI automation is allowed for loading, reloading, and activating Canvas Capture; do not require the user to perform those clicks.

Prepare a shot

Open the requested webpage in the compatible recording browser and activate Canvas Capture through its toolbar icon or the Extensions menu. This exposes the setup_shot, get_shot, and save_recording WebMCP tools in that tab.

Prepare the page and viewport, call setup_shot, and inspect a still preview with get_shot. Leave the browser open with the shot ready for the user to record. Start and stop recording manually so the user controls cursor movement.

Comments

Markdown supported