# 网页内容提取器
## 基本信息
- Slug: `amotivv-cloudflare-browser-rendering`
- Source: modelscope
- Publisher: @amotivv/cloudflare-browser-rendering
- Categories: browser-automation / search
- Hosted: No
- License: MIT License
- Source URL: https://www.modelscope.cn/mcp/servers/@amotivv/cloudflare-browser-rendering
## 简介
一个利用 Cloudflare 浏览器渲染来提取和处理网页内容以供大型语言模型（LLMs）作为上下文使用的服务器，提供抓取页面、搜索文档、提取结构化内容和总结内容的工具。
## 安装提示

```bash
cloudflare-browser-rendering/ ├── examples/ # Example implementations and utilities │ ├── basic-worker-example.js # Basic Worker with Browser Rendering │ ├── minimal-worker-example.js # Minimal implementation │ ├── debugging-tools/ # Tools for debugging │ │ └── debug-test.js # Debug test utility │ └── testing/ # Testing utilities │ └── content-test.js # Content testing utility ├── experiments/ # Educational experiments │ ├── basic-rest-api/ # REST API tests │ ├── puppeteer-binding/ # Workers Binding API tests │ └── content-extraction/ # Content processing tests ├── src/ # MCP server source code │ ├── index.ts # Main entry point │ ├── server.ts # MCP server implementation │ ├── browser-client.ts # Browser Rendering client │ └── content-processor.ts # Content processing utilities ├── puppeteer-worker.js # Cloudflare Worker with Browser Rendering binding ├── test-puppeteer.js # Tests for the main implementation ├── wrangler.toml # Wrangler configuration for the Worker ├── cline_mcp_settings.json.example # Example MCP settings for Cline ├── .gitignore # Git ignore file └── LICENSE # MIT License
```

## MCP Server 详情

# Cloudflare 浏览器渲染实验与 MCP 服务器

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

<a href="https://glama.ai/mcp/servers/wg9fikq571">
  <img width="380" height="200" src="https://glama.ai/mcp/servers/wg9fikq571/badge" alt="Web Content Server MCP server" />
</a>

## 项目结构

```
cloudflare-browser-rendering/
├── examples/                   # Example implementations and utilities
│   ├── basic-worker-example.js # Basic Worker with Browser Rendering
│   ├── minimal-worker-example.js # Minimal implementation
│   ├── debugging-tools/        # Tools for debugging
│   │   └── debug-test.js       # Debug test utility
│   └── testing/                # Testing utilities
│       └── content-test.js     # Content testing utility
├── experiments/                # Educational experiments
│   ├── basic-rest-api/         # REST API tests
│   ├── puppeteer-binding/      # Workers Binding API tests
│   └── content-extraction/     # Content processing tests
├── src/                        # MCP server source code
│   ├── index.ts                # Main entry point
│   ├── server.ts               # MCP server implementation
│   ├── browser-client.ts       # Browser Rendering client
│   └── content-processor.ts    # Content processing utilities
├── puppeteer-worker.js         # Cloudflare Worker with Browser Rendering binding
├── test-puppeteer.js           # Tests for the main implementation
├── wrangler.toml               # Wrangler configuration for the Worker
├── cline_mcp_settings.json.example # Example MCP settings for Cline
├── .gitignore                  # Git ignore file
└── LICENSE                     # MIT License
```


## 前提条件

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

## 安装

1. 克隆仓库：

```bash
git clone https://github.com/yourusername/cloudflare-browser-rendering.git
cd cloudflare-browser-rendering
```


2. 安装依赖项：

```bash
npm install
```


## Cloudflare Worker 设置

1. 安装 Cloudflare Puppeteer 包：

```bash
npm install @cloudflare/puppeteer
```


2. 配置 Wrangler：

```toml
# wrangler.toml
name = "browser-rendering-api"
main = "puppeteer-worker.js"
compatibility_date = "2023-10-30"
compatibility_flags = ["nodejs_compat"]

[browser]
binding = "browser"
```


3. 部署 Worker：

```bash
npx wrangler deploy
```


4. 测试 Worker：

```bash
node test-puppeteer.js
```


## 运行实验

### 基本 REST API 实验

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

```bash
npm run experiment:rest
```


### Puppeteer 绑定 API 实验

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

```bash
npm run experiment:puppeteer
```


### 内容提取实验

此实验展示了如何提取并处理网页内容以特别作为 LLMs 的上下文使用：

```bash
npm run experiment:content
```


## MCP 服务器

MCP 服务器提供了利用 Cloudflare 浏览器渲染获取和处理网页内容的工具，这些内容可作为 LLMs 的上下文使用。

### 构建 MCP 服务器

```bash
npm run build
```


### 运行 MCP 服务器

```bash
npm start
```


或者，在开发模式下运行：

```bash
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` 环境变量：

```bash
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` 文件复制到适当的位置：

```bash
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. 使用浏览器绑定的正确模式是：
   ```javascript
   import puppeteer from '@cloudflare/puppeteer';
   
   // 然后在你的处理函数中:
   const browser = await puppeteer.launch(env.browser);
   const page = await browser.newPage();
   ```
3. 当部署使用了浏览器渲染绑定的 Worker 时，你需要启用 `nodejs_compat` 兼容性标志。
4. 使用完毕后总是要关闭浏览器以避免资源泄漏。

## 许可证

MIT