Cdp Browser MCP

cdp浏览器mcp

用于浏览器自动化的MCP服务器，使用Chrome的原生Accessibility API而不是注入的JavaScript。返回 整页 在单个紧凑的快照中-- 代币数量减少3.3倍 比chrome devtools mcp和 减少4.6倍 比剧作家MCP。

一 cdp_navigate 该调用返回一个紧凑的DOM，其中每个交互式元素都已索引，可以单击、键入和读取。

为什么存在

LLM驱动的浏览器自动化存在令牌问题。每个页面快照都会占用上下文窗口。我们对8种页面类型的5个浏览器工具进行了基准测试：

浏览器使用 具有最小的每个视口大小，因为它仅过滤视口可见元素。但是当你需要整个页面时，滚动会很快。我们通过滚动浏览每个页面的浏览器使用情况并求和所有视口快照来衡量实际的整页成本：

†YouTube具有无限滚动功能——为了进行公平比较，我们限制了4个视口（初始页面高度）。

浏览器使用在适合单个视口的页面上获胜（GitHub Issues）。对于其他所有内容，尤其是内容丰富或无限滚动的页面，全页面方法使用的总令牌要少得多。

cdp浏览器mcp 在一次调用中为您提供整个页面——当您需要查看或搜索整个页面时，这是最具令牌效率的方法。建立在 浏览器自动驾驶仪，它通过CDP读取Chrome的辅助功能树，并将其压缩为紧凑的索引格式。没有JavaScript注入，没有DOM遍历，没有SVG噪声。

快速开始

1.安装

git clone https://github.com/echo-lumen/cdp-browser-mcp.git
cd cdp-browser-mcp
npm install

2.在启用CDP的情况下启动Chrome浏览器

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-debug-profile \
  --no-first-run --no-default-browser-check "about:blank" &

在Linux上：

google-chrome --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-debug-profile \
  --no-first-run --no-default-browser-check "about:blank" &

3.添加到MCP配置中

克劳德代码 (~/.claude/mcp.json):

{
  "mcpServers": {
    "cdp-browser": {
      "command": "node",
      "args": ["/path/to/cdp-browser-mcp/server.mjs"],
      "env": {
        "CDP_URL": "http://127.0.0.1:9222"
      }
    }
  }
}

克劳德桌面 (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "cdp-browser": {
      "command": "node",
      "args": ["/path/to/cdp-browser-mcp/server.mjs"],
      "env": {
        "CDP_URL": "http://127.0.0.1:9222"
      }
    }
  }
}

工具（17）

导航

读取页面状态

交互

标签页

高级

DOM快照的工作原理

每个变异工具都会自动返回更新的DOM。交互式元素被索引：

heading "Example User Verified account"
[46] button "Profile Summary"
[47] button "Search"
[48] button "Following @example_user"
article "Example User @example_user Mar 6 Just published a new blog post about..."
[98] button "41 Replies. Reply"
[99] button "29 reposts. Repost"
[100] button "545 Likes. Like"

使用 [N] 索引与 cdp_click 或 cdp_type。非交互式内容（标题、文章、文本）是根据上下文显示的，但不会浪费索引。

基准测试

方法论

所有基准测试都在同一台机器（Mac Mini、Chrome 145）上运行，所有5个工具都通过端口9222上的CDP连接到同一个Chrome实例。相同的视口大小（1309×1309px），相同的页面，相同的会话。

这些数字衡量的是什么： 每个工具都返回页面的文本表示（可访问性树、DOM快照或YAML）。我们使用以下方法对每个原始快照进行标记 令牌。 (cl100k_base 编码）。下表中的所有令牌计数为 真实标记器输出，而不是估计。

该基准测试的早期版本使用字符÷4作为粗略的代理。实际的标记化显示，根据工具的格式，这种低估率为4-20%——带括号的结构化文本、短属性名和数字的标记效率低于散文。工具之间的比率也发生了变化，因为每种格式的令牌化速率不同（例如，浏览器使用平均为3.3个字符/令牌，cdp浏览器mcp平均为3.6，chrome devtools mcp平均值为3.2）。

如何捕获快照： 导航到URL→ 等待2-3秒加载页面→ 捕获工具的DOM/可访问性表示。每个工具都使用自己的序列化格式（请参见 格式比较 在......下面

整页滚动测试（仅限浏览器使用）： 浏览器使用仅返回页面的视口可见部分。为了衡量查看整个页面的总成本，我们一次向下滚动一个视口高度，重新捕获每个位置的状态，并对所有视口快照进行求和。这就是使用浏览器的LLM代理在读取整个页面时实际会消耗的内容。对于无限滚动页面（YouTube），我们将滚动限制在初始页面高度，以保持比较的公平性。

每个快照结果（8种页面类型，2026-03-07）

所有值都是用tiktoken测量的令牌 cl100k_base.browser使用情况显示了每个视口和整页成本（所有滚动位置的总和）：

†YouTube有无限滚动功能——当你滚动时，新内容会延迟加载。为了进行公平的比较，我们限制了4个视口（覆盖了最初的4318px页面高度）。

cdp浏览器mcp是一个精简的mcp包装器 browser-autopilots CDPBrowser --它们生成相同的快照（通过在所有8个页面上独立运行这两个快照进行验证）。MCP层增加了零令牌开销。

浏览器使用整页成本： 当您需要查看整个页面时，浏览器使用每个视口的优势就会消失。维基百科在19个滚动页面上花费了6600个令牌，而在单个cdp浏览器mcp调用中花费了7000个令牌（9.3x）。YouTube在4个卷轴上的成本为51K，而4K（12.8倍）。浏览器使用仅在适合单个视口的页面上获胜（GitHub问题：874 vs 4006）。

cdp浏览器mcp与chrome开发工具mcp： 中位数 代币数量减少3.3倍范围为2.4倍至9.6倍。

cdp浏览器mcp vs剧作家mcp： 中位数 代币数量减少4.6倍，范围为2.8倍至8.2倍。

为什么会有差异？

相同的Chrome实例，相同的页面——不同之处在于每个工具对页面的序列化方式：

笔记：

• 亚马逊屏蔽了cdp浏览器mcp和chrome devtools mcp（反机器人），但加载了浏览器使用（5368个令牌）。GitHub登录/仪表板因身份验证状态而异。两者都不包括在交叉工具比率中。
• chrome devtools mcp具有此处未测试的其他功能（性能跟踪、Lighthouse审计、网络检查、设备仿真）。
• 浏览器使用还有其他未在此处测试的功能（自主代理循环、验证码解决、带屏幕截图的视觉模式）。

反机器人检测

浏览器指纹识别： 所有5个工具都经过了相同的测试 bot.sannysoft.com （30/30通行证）和Cloudflare旋转栅门：

在指纹识别级别没有隐形优势——它们都是真正的Chrome。

现实世界反机器人（亚马逊）： 在最初的基准测试运行中，亚马逊向cdp浏览器mcp、chrome devtools mcp和Playwright mcp提供了一个503错误页面（“对不起！出了点问题！”），但加载了完整的搜索结果供浏览器使用。所有四个工具都连接到 相同的Chrome实例 通过CDP。

我们分别重新测试了亚马逊，所有工具（包括cdp浏览器mcp）都顺利加载了整个页面。最初的封锁很可能 基于速率：对同一页面快速连续运行5个工具会触发亚马逊的请求率检测，运行的订单工具会确定谁被阻止（浏览器使用先运行）。

结论：基本指纹测试（sannysoft、Cloudflare）显示所有工具都是相同的。像亚马逊这样的现实世界的反机器人系统增加了服务器端的速率限制，这可能会根据测试条件产生不一致的结果，但没有任何工具具有固有的优势。

原始基准数据（JSON结果+示例快照）可在 benchmarks/ 目录。

何时改用其他工具

浏览器使用 （80K星以上）：

• 您需要一个自主代理，通过LLM循环驱动浏览器（而不仅仅是MCP工具）
• 您更喜欢仅视口快照（每次调用较小，但需要滚动）
• 您需要内置的验证码解决方案或基于视觉的交互
• 您正在构建一个Python管道，而不是使用Claude Code/Desk

chrome开发工具mcp （谷歌，28K星以上）：

• 您需要性能分析、Lighthouse审计或内存快照
• 您需要网络请求检查或设备模拟
• 您正在调试web应用程序，而不是为LLM代理自动执行浏览器任务

剧作家MCP:

• 端口9222上的Chrome未运行（Playwright推出了自己的浏览器）
• 您需要Playwright特有的功能，如文件上传或表单填写助手

运作原理

此服务器是一个精简的MCP包装 browser-autopilots CDPBrowser 类，它通过Chrome DevTools协议读取Chrome的可访问性树。关键的见解是：Chrome已经为屏幕阅读器计算了一个语义可访问性树。我们只是阅读Chrome已经知道的内容，而不是注入JavaScript来遍历DOM并猜测哪些元素是交互式的。

结果是一个紧凑、准确的页面表示，它自然地过滤掉了SVG路径、隐藏元素和装饰性包装——正是这些噪声增加了其他工具的令牌计数。

基于浏览器自动驾驶

如果你需要克劳德代码/克劳德桌面/光标的MCP接口，请使用此服务器。如果您需要无头管道或经过身份验证的工作流的完整自主代理框架，请使用 browser-autopilot 直接。

npm install browser-autopilot ai zod

import { CDPBrowser, runAgent } from "browser-autopilot";

const browser = new CDPBrowser();
await browser.connect();

const { result, success } = await runAgent({
  browser,
  task: "Go to wikipedia.org and find the population of Tokyo.",
});

许可证

麻省理工学院