cf-browser-cdp：将 Cloudflare 浏览器渲染服务变为标准 CDP 端点

本文介绍 cf-browser-cdp，一个将 Cloudflare Browser Rendering 服务包装为标准 CDP WebSocket 端点的开源工具。它让任何兼容 CDP 的工具都能直接连接 Cloudflare 的浏览器渲染服务，无需复杂配置即可实现云端浏览器自动化。

项目简介

cf-browser-cdp 是一个 Cloudflare Worker 项目，它将 Cloudflare 的 Browser Rendering 服务封装为标准的 Chrome DevTools Protocol (CDP) WebSocket 端点。

核心优势：任何支持 CDP 的工具都可以直接连接使用，包括：

• Chrome DevTools MCP
• Playwright MCP
• Agent Browser
• 其他 CDP 兼容工具

工作原理

1. CDP Client 发送 WebSocket 连接到 Worker
2. Worker 验证身份后将请求代理到 Cloudflare Browser Rendering
3. Cloudflare 提供实际的浏览器实例

应用场景

1. Chrome DevTools MCP

在 Claude Code 或其他 AI 编程助手中配置：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=wss://CDP_ENDPOINT?token=YOUR_TOKEN"
      ]
    }
  }
}

2. Playwright MCP

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--cdp-endpoint=wss://CDP_ENDPOINT?token=YOUR_TOKEN"
      ]
    }
  }
}

3. Agent Browser

agent-browser --cdp "wss://CDP_ENDPOINT?token=YOUR_TOKEN" open https://example.com
agent-browser snapshot -i
agent-browser click @e1

部署步骤

前置要求

• Cloudflare 账号
• 启用 Browser Rendering 绑定
• Node.js 环境

部署流程

# 1. 克隆仓库
git clone https://github.com/miantiao-me/cf-browser-cdp.git
cd cf-browser-cdp

# 2. 安装依赖
pnpm install

# 3. 部署到 Cloudflare
pnpm deploy

配置认证 Token

npx wrangler secret put BROWSER_TOKEN

使用方式

连接端点

所有请求必须包含认证信息：

方式一：Query 参数

方式二：Header

环境变量

Cloudflare Bindings

开发调试

# 启动本地开发服务器 (0.0.0.0)
pnpm dev

# 启动本地开发服务器 (localhost)
pnpm start

# 运行格式化器和 linter
pnpm lint

# 重新生成 Cloudflare 绑定类型
pnpm cf-typegen

项目信息

优势对比

适用场景

1. AI 编程助手集成 - 为 Claude Code、Cursor 等提供浏览器能力
2. 自动化测试 - 云端运行 Playwright/Puppeteer 测试
3. 网页抓取 - 无需维护本地浏览器池
4. 远程调试 - 随时随地通过 CDP 调试网页

总结

cf-browser-cdp 是一个巧妙的桥梁工具，它将 Cloudflare 的 Browser Rendering 服务以标准 CDP 协议暴露出来，大大降低了云端浏览器自动化的使用门槛。对于需要浏览器自动化能力但又不想维护本地环境的开发者来说，这是一个轻量且免费的解决方案。