mcpField
C
cloudflare-browser

cloudflare-browser

github.com/cloudflare開発9.9k44 回インストール30 週間前に更新
リポジトリ

cloudflare-browser について

cloudflare-browserは、WebSocket経由のCDPを使い、Cloudflare Browser Renderingでヘッドレスブラウザーを操作するスキルです。スクリーンショット、ページ移動、ビューポート設定、複数ページの動画作成に関するスクリプトと手順を備えています。

主な機能

  1. 01WebSocket経由のCDP操作
  2. 02ページのスクリーンショット取得
  3. 03ページ移動とスクロール
  4. 04ビューポートサイズの設定
  5. 05複数ページ動画の作成

活用シーン

  1. 01レンダリング済みページの画像保存
  2. 02複数サイトの閲覧を動画で記録
  3. 03ブラウザーページでのJavaScript実行

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/cloudflare/moltworker --skill cloudflare-browser

インストール後、Claude Code で/cloudflare-browserを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

scripts/
cdp-client.js
screenshot.js
video.js

詳細

Cloudflare Browser Rendering

WebSocket 経由の CDP（Chrome DevTools Protocol）を使用して、Cloudflare の Browser Rendering サービスでヘッドレスブラウザーを操作します。

前提条件

  • CDP_SECRET 環境変数が設定されていること
  • openclaw.json でブラウザープロファイルが設定され、cdpUrl がワーカーのエンドポイントを指していること： 
    "browser": {
  "profiles": {
    "cloudflare": {
      "cdpUrl": "https://your-worker.workers.dev/cdp?secret=..."
    }
  }
}

クイックスタート

スクリーンショット
node /path/to/skills/cloudflare-browser/scripts/screenshot.js https://example.com output.png
複数ページの動画
node /path/to/skills/cloudflare-browser/scripts/video.js "https://site1.com,https://site2.com" output.mp4

CDP 接続パターン

ワーカーは WebSocket 接続時にページターゲットを自動的に作成します。Target.targetCreated イベントを待ち受けて、targetId を取得します：

const WebSocket = require('ws');
const CDP_SECRET = process.env.CDP_SECRET;
const WS_URL = `wss://your-worker.workers.dev/cdp?secret=${encodeURIComponent(CDP_SECRET)}`;

const ws = new WebSocket(WS_URL);
let targetId = null;

ws.on('message', (data) => {
  const msg = JSON.parse(data.toString());
  if (msg.method === 'Target.targetCreated' && msg.params?.targetInfo?.type === 'page') {
    targetId = msg.params.targetInfo.targetId;
  }
});

主な CDP コマンド

コマンド用途
Page.navigateURL に移動
Page.captureScreenshotPNG/JPEG をキャプチャ
Runtime.evaluateJavaScript を実行
Emulation.setDeviceMetricsOverrideビューポートサイズを設定

よくあるパターン

ページに移動してスクリーンショットを撮影
await send('Page.navigate', { url: 'https://example.com' });
await new Promise(r => setTimeout(r, 3000)); // Wait for render
const { data } = await send('Page.captureScreenshot', { format: 'png' });
fs.writeFileSync('out.png', Buffer.from(data, 'base64'));
ページをスクロール
await send('Runtime.evaluate', { expression: 'window.scrollBy(0, 300)' });
ビューポートを設定
await send('Emulation.setDeviceMetricsOverride', {
  width: 1280,
  height: 720,
  deviceScaleFactor: 1,
  mobile: false
});

動画の作成

  1. ページ移動中にフレームを PNG としてキャプチャします
  2. ffmpeg を使って結合します：ffmpeg -framerate 10 -i frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4

トラブルシューティング

  • ターゲットが作成されない：競合状態です。タイムアウトを設定して、Target.targetCreated イベントを待ちます
  • コマンドがタイムアウトする：ワーカーのコールドスタートで遅延している可能性があります。タイムアウトを 30～60 秒に延長します
  • WebSocket が応答しない：CDP_SECRET がワーカーの設定と一致していることを確認します

コメント

Markdown 対応