星战科技xingzhan.cloud
返回市场
云flare浏览器渲染

云flare浏览器渲染

作者：amotivv9 星标更新：2025-03-13
安装使用来源：spider==github.com

项目介绍

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

本项目展示了如何使用Cloudflare浏览器渲染来提取网页内容供LLM上下文使用。它包括REST API和Workers绑定API的实验，以及一个可以提供网页上下文给LLM的MCP服务器实现。

<a href="https://glama.ai/mcp/servers/wg9fikq571"> <img width="380" height="200" src="https://gips0.baidu.com/it/u=3222662531,3178532079&fm=3081&app=3081&f=PNG?w=760&h=400" alt="Web Content Server MCP服务器" /> </a>

项目结构

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绑定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               # Worker的Wrangler配置
├── cline_mcp_settings.json.example # Cline的MCP设置示例
├── .gitignore                  # Git忽略文件
└── LICENSE                     # MIT许可证

预备条件

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

安装

  1. 克隆仓库：
git clone https://github.com/yourusername/cloudflare-browser-rendering.git
cd cloudflare-browser-rendering
  1. 安装依赖：
npm install

Cloudflare Worker设置

  1. 安装Cloudflare Puppeteer包：
npm install @cloudflare/puppeteer
  1. 配置Wrangler：
# wrangler.toml
name = "browser-rendering-api"
main = "puppeteer-worker.js"
compatibility_date = "2023-10-30"
compatibility_flags = ["nodejs_compat"]

[browser]
binding = "browser"
  1. 部署Worker：
npx wrangler deploy
  1. 测试Worker：
node test-puppeteer.js

运行实验

基础REST API实验

此实验演示了如何使用Cloudflare浏览器渲染REST API获取并处理网页内容：

npm run experiment:rest

Puppeteer绑定API实验

此实验演示了如何使用Cloudflare浏览器渲染Workers绑定API与Puppeteer进行更高级的浏览器自动化：

npm run experiment:puppeteer

内容提取实验

此实验演示了如何提取并处理特定用于LLM上下文的网页内容：

npm run experiment:content

MCP服务器

MCP服务器提供了使用Cloudflare浏览器渲染获取和处理网页内容的工具，以供LLM上下文使用。

构建MCP服务器

npm run build

运行MCP服务器

npm start

或者，为了开发：

npm run dev

MCP服务器工具

MCP服务器提供了以下工具：

  1. fetch_page - 获取并处理供LLM上下文使用的网页
  2. search_documentation - 搜索Cloudflare文档并返回相关内容
  3. extract_structured_content - 使用CSS选择器从网页中提取结构化内容
  4. summarize_content - 概括网页内容以供更简洁的LLM上下文使用

配置

要使用您的Cloudflare浏览器渲染端点，请设置BROWSER_RENDERING_API环境变量：

export BROWSER_RENDERING_API=https://YOUR_WORKER_URL_HERE

将YOUR_WORKER_URL_HERE替换为您已部署的Cloudflare Worker的URL。您需要在多个文件中替换这个占位符：

  1. 在测试文件中：test-puppeteer.js，examples/debugging-tools/debug-test.js，examples/testing/content-test.js
  2. 在MCP服务器配置中：cline_mcp_settings.json.example
  3. 在浏览器客户端中：src/browser-client.ts（如果未设置环境变量，则作为备用）

与Cline集成

要将MCP服务器与Cline集成，请将cline_mcp_settings.json.example文件复制到适当位置：

cp cline_mcp_settings.json.example ~/Library/Application\ Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json

或者将配置添加到您现有的cline_mcp_settings.json文件中。

关键学习

  1. 使用Cloudflare浏览器渲染需要@cloudflare/puppeteer包来与浏览器绑定交互。
  2. 使用浏览器绑定的正确模式是： 
    import puppeteer from '@cloudflare/puppeteer';

// 然后在您的处理器中：
const browser = await puppeteer.launch(env.browser);
const page = await browser.newPage();
  3. 部署使用浏览器渲染绑定的Worker时，需要启用nodejs_compat兼容性标志。
  4. 使用完毕后始终关闭浏览器以避免资源泄漏。

许可证

MIT