ContextQMD
Back to Remotion

Canvas Capture Extension

.agents/skills/canvas-capture-extension/SKILL.md

4.0.5123.2 KB
Original Source

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.