cloudflare-browser

by cloudflare

Control headless Chrome via Cloudflare Browser Rendering CDP WebSocket. Use for screenshots, page navigation, scraping, and video capture when browser… npx skills add https://github.com/cloudflare/moltworker --skill cloudflare-browser Download ZIPGitHub9.9k

Cloudflare Browser Rendering

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

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