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:

  json
  1"browser": {
  2  "profiles": {
  3    "cloudflare": {
  4      "cdpUrl": "https://your-worker.workers.dev/cdp?secret=..."
  5    }
  6  }
  7}

Quick Start

Screenshot

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

Multi-page Video

bash
1node /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:

javascript
1const WebSocket = require('ws');
2const CDP_SECRET = process.env.CDP_SECRET;
3const WS_URL = `wss://your-worker.workers.dev/cdp?secret=${encodeURIComponent(CDP_SECRET)}`;
4
5const ws = new WebSocket(WS_URL);
6let targetId = null;
7
8ws.on('message', (data) => {
9  const msg = JSON.parse(data.toString());
10  if (msg.method === 'Target.targetCreated' && msg.params?.targetInfo?.type === 'page') {
11    targetId = msg.params.targetInfo.targetId;
12  }
13});

Key CDP Commands

Common Patterns

Navigate and Screenshot

javascript
1await send('Page.navigate', { url: 'https://example.com' });
2await new Promise(r => setTimeout(r, 3000)); // Wait for render
3const { data } = await send('Page.captureScreenshot', { format: 'png' });
4fs.writeFileSync('out.png', Buffer.from(data, 'base64'));

Scroll Page

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

Set Viewport

javascript
1await send('Emulation.setDeviceMetricsOverride', {
2  width: 1280,
3  height: 720,
4  deviceScaleFactor: 1,
5  mobile: false
6});

Creating Videos

1. Capture frames as PNGs during navigation
2. 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