# Canvas Capture Extension

> Rebuild, install, and reload the private Remotion Canvas Capture unpacked Chrome extension. Use when the extension needs to be restored after a Codex worktree was deleted, rebuilt after source changes, moved to its durable install directory, or reloaded in Chrome or Chrome Canary.

- Skill: `remotion-dev/canvas-capture-extension` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds add remotion-dev/canvas-capture-extension`
- Raw SKILL.md: https://api.skillmd.com/api/skills/remotion-dev/canvas-capture-extension/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Remotion (https://skillmd.com/u/remotion-dev)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/remotion-dev/canvas-capture-extension

---


# 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:

   ```bash
   .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`.
   Before building, it verifies that the pinned Chrome for Testing
   `150.0.7842.0` (`r1631007`) is installed. If the browser is installed outside
   the documented location, pass `--browser-executable <path>`. If it is missing
   or incompatible, use `$install-canvas-capture-browser` to install it.

3. Confirm that the installed directory contains `manifest.json`,
   `background.js`, `capture.js`, `recorder.html`, `logo.svg`,
   `content-scripts/receiver.js`, and the recorder's generated `assets/` and
   `chunks/` files.

## 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 the pinned Chrome for Testing with the Canvas Draw Element feature
   enabled, and loads the extension automatically.
4. Keep the recorder window open while editing files in
   `src/entrypoints/recorder`. React and CSS changes use Vite HMR. Background,
   capture, receiver, or 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.

## Reload in Chrome for Testing

- Launch the pinned Chrome for Testing `150.0.7842.0` (`r1631007`) with the
  dedicated Canvas Capture profile, then open `chrome://extensions` manually.
- 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:

  ```text
  /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.

Do not edit Chrome's `Preferences` or `Secure Preferences` files to move or
reload the extension, and do not automate the Chrome UI. Let the user use
Chrome's extensions page so its integrity metadata stays valid.