浏览器自动化服务

一个基于Chrome原生Accessibility API的浏览器自动化服务,提供高效的页面快照和交互功能。

  • by echo-lumen
  • JavaScript
  • 本地部署
  • 3 星标
  • 更新于
在 GitHub 查看 echo-lumen/cdp-browser-mcp

使用说明

cdp浏览器mcp

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

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

为什么存在

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

工具 中位数代币 整页? 备注
浏览器使用 (80K+颗星) 每个视口约2000个 仅限视口 需要滚动调用才能查看整页
浏览器自动驾驶仪 /cdp浏览器mcp ~3,800 整页 在1次调用中完成DOM
chrome开发工具mcp (谷歌,28K+星) ~10900 整页 详细AX树格式
剧作家MCP ~17400 整页 YAML ariaSnapshot格式

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

页面 浏览器使用情况(整页) cdp浏览器mcp(1次调用) 比率
维基百科 66067(19卷) 7,092 9.3倍以上
YouTube 50544(4个卷轴)† 3,961 12.8倍以上
鞋带 26295(9卷) 3,705 7.1倍以上
英国广播公司新闻 15624(7卷) 4,288 3.6倍以上
数据表 8874(4个卷轴) 2,332 3.8倍以上
GitHub问题 874 (适合视口) 4006 浏览器使用获胜
排除绘图 986(适合视口) 282 3.5倍以上
example.com 28(适合视口) 31 ~相同

†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)

导航

工具 说明
cdp_navigate 转到URL。返回DOM快照。
cdp_go_back 导航回去。返回DOM快照。
cdp_reload 重新加载页面。返回DOM快照。

读取页面状态

工具 说明
cdp_snapshot 获取当前索引的DOM。
cdp_screenshot 截图(PNG或JPEG)。
cdp_page_text 获取 document.body.innerText.填补可访问性树遗漏散文/传记文本的空白。

交互

工具 说明
cdp_click 点击元素 [N] 指数。
cdp_type 按以下方式键入元素 [N] 指数。每个字符的关键事件(适用于React/Vue)。
cdp_press_key 按键盘键(Enter、Escape、Tab等)。
cdp_scroll 向上或向下滚动。
cdp_click_at 在x、y坐标处单击。

标签页

工具 说明
cdp_tabs 列出、打开、切换或关闭选项卡。

高级

工具 说明
cdp_evaluate 执行任意JavaScript。
cdp_handle_dialog 接受或取消警报/确认/提示。
cdp_wait 等待N秒。
cdp_wait_for_url 等待URL包含子字符串
cdp_element_html 按索引获取元素的HTML。

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使用情况显示了每个视口和整页成本(所有滚动位置的总和):

# 页面类型 浏览器使用情况(视口) 浏览器使用(整页) cdp浏览器mcp chrome devtools mcp Playwright mcp
1 维基百科(静态文章) 2698 66067(19个卷轴) 7,092 67,946 58,138
2 数据表(数据表) 2265 8874(4个卷轴) 2,332 8,960 9,632
3 Excalidraw(画布应用程序) 980 986 282 1,075 1,553
4 GitHub问题(React SPA) 899 874 4,006 9,616 17,597
5 YouTube(iframe重) 11510 50544(4个卷轴)† 3,961 12,246 17,161
6 鞋带(网络组件) 2320 26295(9个卷轴) 3,705 12,120 17,739
7 example.com(最小值) 28 28 31 98 87
8 英国广播公司新闻(新闻+广告) 1819 15624(7卷) 4,288 13,232 20,798

†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实例,相同的页面——不同之处在于每个工具对页面的序列化方式:

工具 它捕获了什么 输出格式
浏览器使用 仅视口可见元素,按绘制顺序过滤,100个字符的文本上限 [N]<tag attr=val /> --类似HTML的语法
浏览器自动驾驶仪/cdp浏览器mcp 通过CDP建立完整的页面可访问性树 [N] role "name" --紧凑索引格式,文本内联
chrome开发工具mcp 通过Puppeteer查看完整的页面可访问性树 uid= 每个节点上的前缀,单独 StaticText 儿童
剧作家MCP 全文通过剧作家 ariaSnapshot() YAML与 [ref=] 嵌套缩进标签

笔记:

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

反机器人检测

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

信号 结果(所有工具)
navigator.webdriver false
Chrome对象存在 是
插件数量 5
Sannysoft通过率 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路径、隐藏元素和装饰性包装——正是这些噪声增加了其他工具的令牌计数。

基于浏览器自动驾驶

browser-autopilot 基础引擎是否 @本征加杰什这是一个完全自主的浏览器代理框架,远远超出了此MCP服务器所公开的范围:

功能 cdp浏览器mcp 浏览器自动驾驶
CDP浏览器控制 17个MCP工具 完整的CDPBrowser类+25+代理工具
紧凑型AX树快照 是(全部要点) 是(这就是它的来源)
自主代理循环 否(您是代理) 是——通过Vercel AI SDK驱动的多步LLM
X11回退(Linux) 否 是--当CDP被阻止时,真正的鼠标/键盘
登录编排 否 是--缓存会话、CDP登录、X11回退
验证码解决 否 是——Capsolver,2Captcha集成
文件上传/粘贴 否 是-- upload_file, paste_content, paste_image
Docker/云部署 否 是--Xvfb,noVNC,容器化

如果你需要克劳德代码/克劳德桌面/光标的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.",
});

许可证

麻省理工学院