CDP Bridge MCP：让 LLM 操控真实浏览器的终极形态

原文链接：https://mp.weixin.qq.com/s/cGb4_CyPlJvV1pnTa8eO8w 作者：三黄工作室 | 发布时间：2026-05-17 GitHub：https://github.com/Unagi-cq/cdp-bridge-mcp | 已更新至 v14

摘要

CDP Bridge MCP 是三黄工作室第二个开源项目，目前已到 v14。它通过 Chromium 扩展桥接 MCP 客户端和用户真实浏览器会话，让 LLM/Agent 在已登录的真实浏览器中读取标签页、扫描页面、执行 JS、截图、导航和读取 Cookie。v14 新增 streamable-http 直连模式，支持远端部署，Agent 后端可以远程操控用户浏览器。一行 uvx cdp-bridge@latest 即装即用。

核心定位：不是 Playwright，不是 Chrome DevTools

工具	定位	典型场景
Playwright MCP	自动化测试/脚本化流程	新开浏览器实例，可重复自动化
Chrome DevTools MCP	调试协议/精细操作 DevTools	调试 Chrome 底层
Kimi Bridge	截图+视觉模型	功能权限有限
CDP Bridge MCP	操控用户正在使用的真实浏览器	LLM 在当前页面读取/分析/点击/执行脚本

六个核心优势

1. 复用真实登录态：连接已打开、已登录的标签页，直接使用现有 Cookie、登录状态、页面上下文——不需要重新登录或搬运 Cookie
2. 更适合日常浏览器协作：LLM 在用户当前页面上做读取、分析、点击前判断、截图等交互式任务
3. 页面内容更适合 LLM 消费：browser_scan 对 HTML 做简化，过滤脚本/样式/不可见元素，保留正文、控件和结构信息，减少 token 浪费
4. 启动链路轻量：uvx cdp-bridge 一键启动，浏览器加载扩展即连，不需要写 Playwright 脚本
5. 适合远端部署和 Agent 产品开发：streamable-http 模式下，Agent 后端通过 HTTP 端点连接服务，用户浏览器扩展通过 WebSocket 连接——产品侧不需要托管用户浏览器
6. 个人到团队全覆盖：本地用 stdio + 127.0.0.1:18765；团队用 streamable-http + 远端域名 + WebSocket

系统架构

Agent 产品 / MCP 客户端  --streamable-http-->  远端 cdp-bridge 服务
用户浏览器扩展          --WebSocket------->  同一个 cdp-bridge 服务
cdp-bridge             --chrome.scripting/CDP--> 用户真实浏览器标签页

数据流：MCP 客户端连接服务 → 浏览器扩展通过 WebSocket 上报标签页 → 工具调用时 JS 通过 WebSocket 发给扩展 → 扩展用 chrome.scripting.executeScript 执行（CSP 限制时降级 CDP Runtime.evaluate）→ 结果返回 MCP 客户端。

10 个可用工具

工具	功能
browser_get_tabs	获取已连接标签页列表
browser_scan	扫描页面内容（简化 HTML 或纯文本）
browser_execute_js	在当前标签页执行 JavaScript
browser_switch_tab	切换 MCP 活动标签页
browser_batch	批量执行扩展/CDP 命令
browser_wait	轮询 JS 条件直到返回真值或超时
browser_navigate	跳转到指定 URL
browser_screenshot	获取页面截图
browser_cookies	读取 Cookie

两种传输模式

模式	原理	适用场景
stdio（默认）	MCP 客户端以子进程启动服务，标准输入/输出通信	本地客户端（Claude Code、Codex 等）
streamable-http	服务以独立 HTTP 进程运行，客户端 HTTP 请求连接	Docker 部署、服务常驻、多客户端共享

快速接入

# Claude Code
claude mcp add cdp-bridge uvx cdp-bridge@latest

# Codex
codex mcp add cdp-bridge uvx cdp-bridge@latest

# streamable-http 模式
uvx cdp-bridge@latest --transport streamable-http --port 8000
claude mcp add cdp-bridge --transport streamable-http http://127.0.0.1:8000/mcp

两个端口区分清楚：--ws-port（默认 18765）= 浏览器扩展连接后端；--port（streamable-http 用）= MCP 客户端连接后端的 HTTP 端口。

安装四步

1. 安装 uv
2. Chrome 加载扩展：chrome://extensions/ → 开发者模式 → 加载 src/cdp_bridge/tmwd_cdp_bridge 文件夹
3. MCP 客户端添加 cdp-bridge
4. 浏览器打开任意页面，调用 browser_get_tabs 或 browser_scan

首次连接会 ERR_CONNECTION_REFUSED，扩展内置自动重连（每 ~5 秒），等待数秒自动恢复。

关键取舍

• Playwright MCP：目标是"让模型控制专门启动的自动化浏览器"
• Chrome DevTools MCP：目标是"调试 Chrome 或精细操作 DevTools 协议"
• CDP Bridge MCP：目标是"让模型或 Agent 产品读取和操作用户当前正在使用的真实浏览器页面"

三者不是替代关系，是三种不同使用场景的工具。