mcpField
C
canvas-capture-extension

canvas-capture-extension

github.com/remotion-dev开发68.6k359 次安装今天更新
代码仓库

关于 canvas-capture-extension

用于构建、安装和开发 Remotion Canvas Capture Chrome 扩展的技能，并指导准备网页画面及预览，供用户录制。

主要功能

  1. 01构建并安装扩展包
  2. 02运行 WXT 开发构建
  3. 03在 Chrome 中重新加载扩展
  4. 04准备画面并检查预览
  5. 05由用户手动控制录制

适用场景

  1. 01安装持久化的正式版本
  2. 02开发并重新加载扩展更改
  3. 03准备网页以供录制

MCP 相关

激活扩展后，当前标签页会提供 `setup_shot`、`get_shot` 和 `save_recording` WebMCP 工具。

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/canvas-capture-extension确认已加载。

附带文件scripts/rebuild-extension.shagents/openai.yaml

详细介绍

Canvas Capture 扩展

从 packages/canvas-capture-extension 构建扩展，但始终将解压后的副本安装在检出目录之外，以免删除工作树导致扩展无法使用。

重新构建并安装

  1. 找到包含 packages/canvas-capture-extension/package.json 的 Remotion 检出目录。优先使用当前检出目录； 否则使用 /Users/jonathanburger/remotion。

  2. 运行：

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

    该脚本使用 Bun 构建，并将完整的 WXT 构建包安装到 /Users/jonathanburger/Applications/Remotion Canvas Capture Extension。 构建无需安装浏览器。要使用扩展，请选择启用了 Canvas Draw Element 的 Chrome 157.0.8080.0 或更高版本。

  3. 确认安装目录中包含 manifest.json、 background.js、capture.js、drag-image.js、shot-tools.js、logo.svg 和生成的扩展图标。

使用 React 和 Vite 开发

  1. 关闭所有正在运行且使用专用 Canvas Capture 配置文件的 Recorder Chrome 实例。
  2. 在 packages/canvas-capture-extension 中运行 bun run dev。
  3. WXT 会将开发构建包写入持久目录 /Users/jonathanburger/Applications/Remotion Canvas Capture Extension Dev， 启动启用了 Canvas Draw Element 功能的 Chrome for Testing，并自动加载扩展。
  4. 点击扩展图标以显示页面内控件。源代码和清单的变更会触发 WXT 重新构建，并重新加载受影响的扩展上下文。

仅将单独的开发目录用于 bun run dev。手动加载构建时，仍使用上方的生产安装目录。

Remotion 页面通过 externally_connectable 消息传递接收录制内容；扩展不会注入接收器内容脚本。要测试本地目标地址，请在运行 bun run dev 时设置 CANVAS_CAPTURE_HANDOFF_ORIGIN（例如 http://localhost:3000）。生产构建始终使用 https://www.remotion.dev。

要选择其他 Chrome 157.0.8080.0 或更高版本的浏览器，请在运行 bun run dev 时将 CANVAS_CAPTURE_BROWSER_EXECUTABLE 设置为其可执行文件路径。开发环境使用与版本无关的 ~/Library/Application Support/Remotion Canvas Capture 配置文件。

在 Chrome 中重新加载

  • 使用专用的 Canvas Capture 配置文件启动 Chrome 157.0.8080.0 或更高版本，然后打开 chrome://extensions。

  • 在 chrome://extensions 中启用开发者模式。

  • 如果 Remotion Canvas Capture 已指向持久目录，请点击 重新加载。

  • 如果 Chrome 显示已删除的工作树路径，请移除该损坏的条目，选择加载已解压的扩展程序，然后选择：

    /Users/jonathanburger/Applications/Remotion Canvas Capture Extension

    这次性移动会更改扩展 ID，因为 Chrome 会根据解压扩展的绝对路径生成其身份标识。

  • 后续生产构建始终从持久安装目录加载，绝不要从工作树本地的 dist 目录加载。由 WXT 管理的开发构建使用上文所述的单独持久开发目录。

  • 如果实验性 HTML-in-canvas API 不可用，请启用 chrome://flags/#canvas-draw-element 并重启 Chrome。或者使用 --enable-features=CanvasDrawElement 启动；两种方式任选其一即可。不要添加 --enable-blink-features=CanvasDrawElement，这会触发 Chrome 的不支持命令行参数警告。

不要编辑 Chrome 的 Preferences 或 Secure Preferences 文件来移动或重新加载扩展。请使用 Chrome 的扩展程序页面，以保持其完整性元数据有效。允许使用浏览器 UI 自动化来加载、重新加载和启用 Canvas Capture；不应要求用户手动点击这些选项。

准备拍摄

在兼容的录制浏览器中打开所需网页，然后通过工具栏图标或扩展程序菜单启用 Canvas Capture。这样会在该标签页中开放 setup_shot、get_shot 和 save_recording WebMCP 工具。

准备页面和视口，调用 setup_shot，并使用 get_shot 检查静态预览。保持浏览器打开并准备好拍摄，以便用户录制。手动开始和停止录制，让用户控制光标移动。

评论

支持 Markdown