---
name: cloudflare-browser
description: Control headless Chrome via Cloudflare Browser Rendering CDP WebSocket. Use for screenshots, page navigation, scraping, and video capture when browser…
---

# cloudflare-browser

Control headless Chrome via Cloudflare Browser Rendering CDP WebSocket. Use for screenshots, page navigation, scraping, and video capture when browser…

# cloudflare-browserby 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 ZIPGitHub

## 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

CommandPurposePage.navigateNavigate to URLPage.captureScreenshotCapture PNG/JPEGRuntime.evaluateExecute JavaScriptEmulation.setDeviceMetricsOverrideSet 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

## More skills from cloudflare
write-endpointsby cloudflareComprehensive guide for building OpenAPI endpoints with chanfana - schema definition, request validation, CRUD operations, D1 database integration, and…agents-sdkby cloudflareBuild AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks,…building-ai-agent-on-cloudflareby cloudflareCreates AI-powered agents using Cloudflare's Agents SDK with persistent state, real-time communication, and tool integration.building-mcp-server-on-cloudflareby cloudflareCreates production-ready Model Context Protocol servers on Cloudflare Workers with tools, authentication, and deployment.changelogby cloudflareCreates, updates, and reviews product changelog entries for the Cloudflare documentation site. Load when generating changelog MDX files, editing existing…cloudflareby cloudflareComprehensive Cloudflare platform skill covering Workers, Pages, storage (KV, D1, R2), AI (Workers AI, Vectorize, Agents SDK), networking (Tunnel, Spectrum),…code-reviewby cloudflareReviews Workers and Cloudflare Developer Platform code for type correctness, API usage, and configuration validity. Load when reviewing TypeScript/JavaScript…docs-reviewby cloudflareReviews documentation PRs and provides GitHub PR suggestions. Load when asked to review, suggest changes, or provide feedback on docs content. Covers MDX,…

---

**Source**: https://github.com/cloudflare/moltworker/tree/HEAD/skills/cloudflare-browser
**Author**: cloudflare
**Discovered via**: mcpservers.org