mcpField
C
cloudflare-browser

cloudflare-browser

github.com/cloudflare开发9.9k44 次安装30 周前更新
代码仓库

关于 cloudflare-browser

cloudflare-browser 是通过 Cloudflare Browser Rendering 控制无头浏览器的技能，使用 WebSocket 上的 CDP。它提供截图、页面导航、视口设置和多页面视频的脚本与操作模式。

主要功能

  1. 01通过 WebSocket 使用 CDP 控制
  2. 02截取页面图像
  3. 03导航和滚动页面
  4. 04设置视口尺寸
  5. 05创建多页面视频

适用场景

  1. 01将渲染后的页面保存为图像
  2. 02把多个网站的浏览过程录制成视频
  3. 03在浏览器页面中运行 JavaScript

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/cloudflare-browser确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

scripts/
cdp-client.js
screenshot.js
video.js

详细介绍

Cloudflare Browser Rendering

通过 WebSocket 使用 CDP（Chrome DevTools Protocol），借助 Cloudflare Browser Rendering 服务控制无头浏览器。

前提条件

  • 已设置 CDP_SECRET 环境变量
  • 已在 openclaw.json 中配置浏览器配置文件，并将 cdpUrl 指向 worker 端点： 
    "browser": {
  "profiles": {
    "cloudflare": {
      "cdpUrl": "https://your-worker.workers.dev/cdp?secret=..."
    }
  }
}

快速开始

截图
node /path/to/skills/cloudflare-browser/scripts/screenshot.js https://example.com output.png
多页面视频
node /path/to/skills/cloudflare-browser/scripts/video.js "https://site1.com,https://site2.com" output.mp4

CDP 连接模式

worker 会在 WebSocket 连接时自动创建页面目标。监听 Target.targetCreated 事件以获取 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;
  }
});

重要 CDP 命令

命令用途
Page.navigate导航到 URL
Page.captureScreenshot捕获 PNG/JPEG
Runtime.evaluate执行 JavaScript
Emulation.setDeviceMetricsOverride设置视口大小

常见模式

导航并截图
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'));
滚动页面
await send('Runtime.evaluate', { expression: 'window.scrollBy(0, 300)' });
设置视口
await send('Emulation.setDeviceMetricsOverride', {
  width: 1280,
  height: 720,
  deviceScaleFactor: 1,
  mobile: false
});

创建视频

  1. 导航期间将各帧捕获为 PNG
  2. 使用 ffmpeg 拼接：ffmpeg -framerate 10 -i frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4

故障排除

  • 未创建目标：存在竞态条件——等待 Target.targetCreated 事件，并设置超时时间
  • 命令超时：worker 可能存在冷启动延迟；将超时时间增加到 30-60 秒
  • WebSocket 挂起：确认 CDP_SECRET 与 worker 配置一致

评论

支持 Markdown