cloudflare-browser

par cloudflare

Contrôler Chrome sans tête via le WebSocket CDP de Cloudflare Browser Rendering. Utiliser pour les captures d'écran, la navigation de pages, le scraping et la capture vidéo lorsque le navigateur…

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

Télécharger ZIP GitHub

10k

Cloudflare Browser Rendering

Control headless browsers via Cloudflare's Browser Rendering service using CDP (Chrome DevTools Protocol) over WebSocket.

Prerequisites

CDP_SECRET environment variable set

Browser profile configured in openclaw.json with cdpUrl pointing to the worker endpoint:

"browser": {
  "profiles": {
    "cloudflare": {
      "cdpUrl": "https://your-worker.workers.dev/cdp?secret=..."
    }
  }
}

Quick Start

Screenshot

node /path/to/skills/cloudflare-browser/scripts/screenshot.js https://example.com output.png

Multi-page Video

node /path/to/skills/cloudflare-browser/scripts/video.js "https://site1.com,https://site2.com" output.mp4

CDP Connection Pattern

The worker creates a page target automatically on WebSocket connect. Listen for Target.targetCreated event to get the 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;
  }
});

Key CDP Commands

Command	Purpose
Page.navigate	Navigate to URL
Page.captureScreenshot	Capture PNG/JPEG
Runtime.evaluate	Execute JavaScript
Emulation.setDeviceMetricsOverride	Set viewport size

Common Patterns

Navigate and Screenshot

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'));

Scroll Page

await send('Runtime.evaluate', { expression: 'window.scrollBy(0, 300)' });

Set Viewport

await send('Emulation.setDeviceMetricsOverride', {
  width: 1280,
  height: 720,
  deviceScaleFactor: 1,
  mobile: false
});

Creating Videos

Capture frames as PNGs during navigation
Use ffmpeg to stitch: ffmpeg -framerate 10 -i frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4

Troubleshooting

No target created: Race condition - wait for Target.targetCreated event with timeout
Commands timeout: Worker may have cold start delay; increase timeout to 30-60s
WebSocket hangs: Verify CDP_SECRET matches worker configuration