Cloudflare Browser Rendering (HTTP API)

HTTP経由でヘッドレスブラウザを操作するスキル。WebSocket CDPの代わりにHTTP APIを使用。

前提条件

• CDP_SECRET 環境変数が設定済み
• Worker URL（例: https://your-worker.workers.dev）

API エンドポイント

すべてのエンドポイントは ?secret=<CDP_SECRET> クエリパラメータが必要。

基本API

使用方法

環境変数

export MOLTBOT_URL="https://your-worker.workers.dev"
export CDP_SECRET="your-secret"

curlでの呼び出し例

スクリーンショット

curl -X POST "${MOLTBOT_URL}/browser/screenshot?secret=${CDP_SECRET}" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "viewport": {"width": 1280, "height": 720},
    "fullPage": false,
    "format": "png"
  }'

ページナビゲーション＋テキスト取得

curl -X POST "${MOLTBOT_URL}/browser/navigate?secret=${CDP_SECRET}" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "extractText": true,
    "extractHtml": false
  }'

フォーム入力・送信

curl -X POST "${MOLTBOT_URL}/browser/form?secret=${CDP_SECRET}" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/login",
    "fields": [
      {"selector": "#email", "value": "[email protected]"},
      {"selector": "#password", "value": "password123"}
    ],
    "submit": "#login-button",
    "screenshotAfter": true
  }'

要素クリック

curl -X POST "${MOLTBOT_URL}/browser/click?secret=${CDP_SECRET}" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "selector": "button.submit",
    "waitAfter": 2000,
    "screenshotAfter": true
  }'

複数アクションの連続実行（sequence）

curl -X POST "${MOLTBOT_URL}/browser/sequence?secret=${CDP_SECRET}" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://x.com",
    "actions": [
      {"type": "waitForSelector", "selector": "[data-testid=\"tweetTextarea_0\"]"},
      {"type": "type", "selector": "[data-testid=\"tweetTextarea_0\"]", "text": "Hello World!"},
      {"type": "wait", "ms": 1000},
      {"type": "click", "selector": "[data-testid=\"tweetButton\"]"},
      {"type": "wait", "ms": 3000},
      {"type": "screenshot"}
    ]
  }'

API詳細

POST /browser/screenshot

URLのスクリーンショットを取得。

リクエスト:

{
  "url": "https://example.com",      // 必須
  "viewport": {                       // オプション（デフォルト: 1280x720）
    "width": 1280,
    "height": 720
  },
  "fullPage": false,                  // オプション: ページ全体をキャプチャ
  "format": "png",                    // オプション: png or jpeg
  "quality": 80,                      // オプション: jpeg品質 (1-100)
  "waitMs": 2000                      // オプション: レンダリング待機時間
}