canvas-capture-extension

Canvas Capture Extension

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
  

  Chrome は展開した拡張機能の ID を絶対パスから生成するため、この一度限りの移動によって拡張機能 ID が変わります。

• 以降の本番ビルドは、必ず永続的なインストール先ディレクトリから読み込んでください。ワークツリー内の dist ディレクトリから読み込んではいけません。WXT が管理する開発用ビルドには、上記の別の永続的な開発用ディレクトリを使用します。

• 実験的な HTML-in-canvas API を利用できない場合は、chrome://flags/#canvas-draw-element を有効にして Chrome を再起動します。または、--enable-features=CanvasDrawElement を指定して起動します。どちらか一方で十分です。Chrome の未サポートコマンドラインに関する警告が表示されるため、--enable-blink-features=CanvasDrawElement は追加しないでください。

拡張機能を移動または再読み込みするために、Chrome の Preferences ファイルや Secure Preferences ファイルを編集しないでください。整合性メタデータを有効な状態に保つため、Chrome の拡張機能ページを使用してください。Canvas Capture の読み込み、再読み込み、有効化にはブラウザーの UI 自動化を使用できます。ユーザー自身にこれらの操作を行わせないでください。

ショットを準備する

対応する録画ブラウザーで指定されたウェブページを開き、ツールバーのアイコンまたは拡張機能メニューから Canvas Capture を有効にします。これにより、そのタブで setup_shot、get_shot、save_recording の WebMCP ツールが 利用できるようになります。

ページとビューポートを準備して setup_shot を呼び出し、get_shot で静止プレビューを確認します。ショットを録画できる状態にして、ブラウザーは開いたままにしておきます。 録画の開始と停止は手動で行い、カーソルの移動はユーザーが操作できるようにします。