Cloudflare Browser Rendering

🚀 Cloudflare 浏览器渲染实验及 MCP 服务器

本项目聚焦于利用 Cloudflare 浏览器渲染技术提取网络内容，将其作为大语言模型（LLM）的上下文。通过对 REST API 和 Workers Binding API 的实验，以及 MCP 服务器的实现，为 LLM 提供网页上下文支持。

🚀 快速开始

本项目致力于探索 Cloudflare 浏览器渲染技术在不同场景下的应用，借助实验和具体实现，深入研究 REST API 和 Workers Binding API，并提供完整的 MCP（管理控制平面）服务器，用于处理网页内容。

先决条件

• Node.js（v16 或更高版本）
• 启用浏览器渲染的 Cloudflare 账户
• TypeScript
• Wrangler CLI（用于部署 Worker）

安装步骤

1. 克隆项目仓库：

   git clone [your-repository-url]
   cd cloudflare-browser-rendering
   

2. 安装依赖项：

   npm install
   

3. 启动 MCP 服务器：

   npm start
   

✨ 主要特性

实验模块

• 基于 REST API 的浏览器渲染实验：
  • 基本 Worker 示例（basic-worker-example.js）：展示在 Cloudflare Worker 中运用浏览器渲染技术抓取和解析网页内容。
  • 最小化实现（minimal-worker-example.js）：精简版的浏览器渲染实现，便于快速验证功能。
• Workers Binding API 实验：
  • Puppeteer 绑定（puppeteer-binding/）：演示在 Cloudflare 环境中使用@cloudflare/puppeteer库操作浏览器上下文。
  • 内容提取（content-extraction/）：针对不同网页结构的内容抓取和解析方法。

MCP 服务器实现

• 功能概述：作为管理和控制浏览器渲染任务的中枢，具备接收请求并分发到不同处理模块、管理浏览器上下文以避免资源泄漏、提供 API 接口供其他系统集成等功能。
• 详细配置：
  • 环境变量：BROWSER_BINDING指定浏览器绑定服务的 URL（默认值为http://localhost:8080）。
  • 日志记录：使用winston库进行日志输出，支持不同级别的日志记录和文件存储。

集成与部署

• 部署指南：
  1. 配置环境变量：

     export BROWSER_BINDING=http://your-binding-service-url:port
     

  2. 构建和部署：

     npm run build
     npm start
     

  3. 访问 API：
     • 基础 URL：http://localhost:3000
     • 可用接口：
       • POST /render：提交需要渲染的网页 URL。
       • GET /results：获取最近的渲染结果。

📦 安装指南

1. 克隆项目仓库：

   git clone [your-repository-url]
   cd cloudflare-browser-rendering
   

2. 安装依赖项：

   npm install
   

3. 启动 MCP 服务器：

   npm start
   

💻 使用示例

基础用法

在克隆项目并安装依赖后，可通过以下命令启动 MCP 服务器：

npm start

高级用法

若需配置不同的浏览器绑定服务 URL，可按以下步骤操作：

1. 配置环境变量：

   export BROWSER_BINDING=http://your-binding-service-url:port
   

2. 构建和部署：

   npm run build
   npm start
   

📚 详细文档

项目结构

cloudflare-browser-rendering/
├── examples/                   # 示例实现和工具
│   ├── basic-worker-example.js # 带浏览器渲染的基本Worker示例
│   ├── minimal-worker-example.js # 最小化实现示例
│   ├── debugging-tools/        # 调试工具
│   │   └── debug-test.js       # 调试测试工具
│   └── testing/                # 测试工具
│       └── content-test.js     # 内容测试工具
├── experiments/                # 教育实验
│   ├── basic-rest-api/         # REST API测试
│   ├── puppeteer-binding/      # Workers Binding API测试
│   └── content-extraction/     # 内容处理测试
├── src/                        # MCP服务器源代码
│   ├── index.ts                # 主入口点
│   ├── server.ts               # MCP服务器实现
│   ├── browser-client.ts       # 浏览器渲染客户端
│   └── content-processor.ts    # 内容处理工具
├── puppeteer-worker.js         # Cloudflare Worker的浏览器绑定示例
├── test-puppeteer.js           # 主实现测试
├── wrangler.toml               # Wrangler配置文件（用于部署Worker）
├── cline_mcp_settings.json.example # Cline使用的MCP设置示例
├── .gitignore                  # Git忽略文件
└── LICENSE                     # MIT许可证

🔧 技术细节

本项目主要涉及 Cloudflare 浏览器渲染技术，通过对 REST API 和 Workers Binding API 的实验，实现网页内容的提取和处理。MCP 服务器作为核心组件，负责管理和控制浏览器渲染任务，使用winston库进行日志记录，确保系统的稳定性和可维护性。

📄 许可证

本项目采用 MIT 许可证。

⚠️ 重要提示

• 资源管理：在 Worker 中使用浏览器上下文时，务必确保及时释放资源以避免泄漏。
• 错误处理：建议在每个关键步骤添加适当的错误处理机制，并记录详细的日志信息以便排查问题。
• 性能优化：根据实际需求调整渲染参数和并行处理能力，以达到最佳性能。