Cloudflare Browser Rendering

🚀 Cloudflare 瀏覽器渲染實驗及 MCP 服務器

本項目展示瞭如何藉助 Cloudflare 瀏覽器渲染技術，提取網絡內容並將其作為大語言模型（LLM）的上下文。項目涵蓋了對 REST API 和 Workers Binding API 的實驗，還實現了一個 MCP 服務器，可用於為 LLM 提供網頁上下文。

🚀 快速開始

先決條件

• 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
   

✨ 主要特性

• 探索 Cloudflare 瀏覽器渲染技術在不同場景下的應用。
• 對 REST API 和 Workers Binding API 進行深入研究。
• 提供完整的 MCP（管理控制平面）服務器實現，用於處理網頁內容。

📦 安裝指南

克隆項目

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

安裝依賴

npm install

啟動服務器

npm start

💻 使用示例

基本用法

在 basic-worker-example.js 中展示瞭如何在 Cloudflare Worker 中使用瀏覽器渲染技術來抓取和解析網頁內容。

// 代碼內容在 basic-worker-example.js 中
// 展示如何在 Cloudflare Worker 中使用瀏覽器渲染技術來抓取和解析網頁內容

高級用法

在 minimal-worker-example.js 中實現了一個精簡版的瀏覽器渲染，用於快速驗證功能。

// 代碼內容在 minimal-worker-example.js 中
// 精簡版的瀏覽器渲染實現，用於快速驗證功能

📚 詳細文檔

項目結構

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 許可證

實驗模塊

基於 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 服務器實現

功能概述

MCP 服務器是一個用於管理和控制瀏覽器渲染任務的中樞，它提供了以下功能：

1. 接收請求並分發到不同的處理模塊。
2. 管理瀏覽器上下文以避免資源洩漏。
3. 提供 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: 獲取最近的渲染結果。

🔧 技術細節

資源管理

在 Worker 中使用瀏覽器上下文時，務必確保及時釋放資源以避免洩漏。

錯誤處理

建議在每個關鍵步驟添加適當的錯誤處理機制，並記錄詳細的日誌信息以便排查問題。

性能優化

根據實際需求調整渲染參數和並行處理能力，以達到最佳性能。

📄 許可證

本項目採用 MIT 許可證。