Labsco
cloudflare logo

cloudflare-browser

✓ Official★ 9,915

by cloudflare · part of cloudflare/moltworker

Control headless Chrome via Cloudflare Browser Rendering CDP WebSocket. Use for screenshots, page navigation, scraping, and video capture when browser automation is needed in a Cloudflare Workers environment. Requires CDP_SECRET env var and cdpUrl configured in browser.profiles.

🔥🔥🔥✓ VerifiedAccount requiredNeeds API keys
#automation#scraping#browser#cloud#git#video-editing
🧰 Not standalone. This skill ships with cloudflare/moltworker and only works together with that tool — install the tool first, then add this skill.

This is the playbook your agent receives when the skill activates — you don't need to read it to use the skill, but it's here to audit before installing.

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

CommandPurpose
Page.navigateNavigate to URL
Page.captureScreenshotCapture PNG/JPEG
Runtime.evaluateExecute JavaScript
Emulation.setDeviceMetricsOverrideSet viewport size

Common Patterns

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

  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