chrome-cdp工作原理解析：如何通过WebSocket与Chrome DevTools协议通信

张

张建站

2026/4/27 3:33:21

10分钟阅读

chrome-cdp工作原理解析如何通过WebSocket与Chrome DevTools协议通信【免费下载链接】chrome-cdp-skillGive your AI agent access to your live Chrome session — works out of the box, connects to tabs you already have open项目地址: https://gitcode.com/gh_mirrors/ch/chrome-cdp-skillchrome-cdp是一个轻量级Chrome DevTools Protocol (CDP)工具它能让AI代理直接访问您的实时Chrome会话无需额外配置即可连接到已打开的标签页。本文将深入解析其工作原理特别是如何通过WebSocket实现与Chrome DevTools协议的通信。什么是Chrome DevTools协议CDPChrome DevTools协议是一套强大的API允许开发者与Chrome浏览器进行交互实现调试、性能分析、页面控制等功能。传统上这需要通过Chrome DevTools界面或复杂的库如Puppeteer来使用。而chrome-cdp则提供了一种更轻量级的方式直接通过WebSocket与CDP通信无需额外依赖。chrome-cdp的核心优势chrome-cdp的设计理念是轻量级和即开即用主要优势包括无依赖不需要安装Puppeteer等大型库使用Node.js内置的WebSocket模块高效连接直接与已打开的Chrome标签页建立连接支持100标签页持久会话每个标签页通过守护进程daemon保持连接避免重复授权简单易用提供直观的命令行接口如snap获取页面结构、shot截图、eval执行JavaScript等WebSocket通信的工作流程chrome-cdp通过WebSocket与Chrome DevTools协议通信的过程可以分为四个关键步骤1. 发现Chrome调试接口首先chrome-cdp需要找到Chrome的远程调试接口。它会搜索多个可能的位置来查找DevToolsActivePort文件该文件包含了调试端口信息// 搜索可能的DevToolsActivePort位置 const candidates [ process.env.CDP_PORT_FILE, // macOS路径 ...macBrowsers.flatMap(b [ resolve(home, Library/Application Support, b, DevToolsActivePort), ]), // Linux路径 ...linuxBrowsers.flatMap(b [ resolve(home, .config, b, DevToolsActivePort), ]), // Windows路径 ...(IS_WINDOWS ? [Google/Chrome, BraveSoftware/Brave-Browser].flatMap(b [ resolve(base, b, User Data/DevToolsActivePort), ]) : []), ];找到端口文件后它会读取文件内容获取WebSocket URLws://127.0.0.1:port/devtoolsFrontendUrl2. 建立WebSocket连接chrome-cdp创建了一个CDP类来管理WebSocket连接实现了协议的核心通信功能class CDP { #ws; #id 0; #pending new Map(); #eventHandlers new Map(); async connect(wsUrl) { return new Promise((res, rej) { this.#ws new WebSocket(wsUrl); this.#ws.onopen () res(); this.#ws.onerror (e) rej(new Error(WebSocket error: e.message)); this.#ws.onmessage (ev) { const msg JSON.parse(ev.data); // 处理响应和事件... }; }); } // 发送CDP命令 send(method, params {}, sessionId) { const id this.#id; return new Promise((resolve, reject) { this.#pending.set(id, { resolve, reject }); const msg { id, method, params }; if (sessionId) msg.sessionId sessionId; this.#ws.send(JSON.stringify(msg)); // 超时处理... }); } }3. 标签页会话管理chrome-cdp采用了每个标签页一个守护进程的架构。当您第一次访问某个标签页时会启动一个后台守护进程// 启动标签页守护进程 async function getOrStartTabDaemon(targetId) { const sp sockPath(targetId); // 尝试连接现有守护进程 try { return await connectToSocket(sp); } catch {} // 启动新的守护进程 const child spawn(process.execPath, [process.argv[1], _daemon, targetId], { detached: true, stdio: ignore, }); child.unref(); // 等待守护进程就绪 for (let i 0; i DAEMON_CONNECT_RETRIES; i) { await sleep(DAEMON_CONNECT_DELAY); try { return await connectToSocket(sp); } catch {} } throw new Error(Daemon failed to start — did you click Allow in Chrome?); }这个守护进程会处理所有针对该标签页的命令并在闲置20分钟后自动退出既保证了操作的连续性又不会浪费系统资源。4. 执行CDP命令一旦建立连接chrome-cdp就可以发送各种CDP命令。例如获取页面截图的实现async function shotStr(cdp, sid, filePath, targetId) { // 获取设备像素比(DPR) let dpr 1; try { const metrics await cdp.send(Page.getLayoutMetrics, {}, sid); dpr metrics.visualViewport?.clientWidth / metrics.cssVisualViewport?.clientWidth || 1; } catch {} // 发送截图命令 const { data } await cdp.send(Page.captureScreenshot, { format: png }, sid); const out filePath || resolve(RUNTIME_DIR, screenshot-${targetId.slice(0, 8)}.png); writeFileSync(out, Buffer.from(data, base64)); return Screenshot saved. Device pixel ratio (DPR): ${dpr}; }实际应用示例chrome-cdp提供了丰富的命令行接口让您可以轻松与Chrome交互1. 列出所有打开的页面scripts/cdp.mjs list2. 对指定页面截图scripts/cdp.mjs shot target [file]3. 在页面上执行JavaScriptscripts/cdp.mjs eval target document.title4. 点击页面元素scripts/cdp.mjs click target button.submit坐标系统转换使用截图和点击功能时需要注意坐标系统的转换。Chrome的截图使用设备像素而CDP的输入事件使用CSS像素CSS像素截图图像像素 / DPR设备像素比例如在DPR2的Retina屏幕上截图中(200, 300)的像素点对应CSS坐标(100, 150)需要使用clickxy命令时应传入后者。结语chrome-cdp通过WebSocket直接与Chrome DevTools协议通信提供了一种轻量级、高效的方式来控制和调试Chrome浏览器。其设计理念使得AI代理能够轻松访问和操作浏览器内容为自动化测试、网页数据提取、无障碍测试等场景提供了强大支持。无论是开发者还是AI代理都可以通过简单的命令行接口利用Chrome DevTools协议的全部能力而无需深入了解协议细节。这正是chrome-cdp的价值所在简化复杂技术让强大功能触手可及。要开始使用chrome-cdp只需克隆仓库并按照说明启用Chrome的远程调试功能git clone https://gitcode.com/gh_mirrors/ch/chrome-cdp-skill然后您就可以立即体验这个强大工具带来的便利探索Chrome DevTools协议的无限可能。【免费下载链接】chrome-cdp-skillGive your AI agent access to your live Chrome session — works out of the box, connects to tabs you already have open项目地址: https://gitcode.com/gh_mirrors/ch/chrome-cdp-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

PHPCI配置文件详解：phpci.yml编写技巧与最佳实践

PHPCI配置文件详解：phpci.yml编写技巧与最佳实践【免费下载链接】PHPCI PHPCI is a free and open source continuous integration tool specifically designed for PHP. 项目地址: https://gitcode.com/gh_mirrors/ph/PHPCI PHPCI是一款专为PHP项目设计的免…...

2026/4/27 3:27:21 阅读更多 →

2025最新版：零代码构建Material Design界面的7个实战技巧

2025最新版：零代码构建Material Design界面的7个实战技巧【免费下载链接】material-design-lite Material Design Components in HTML/CSS/JS 项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite Material Design Lite是一个基于HTML/CSS/J…...

2026/4/27 3:26:51 阅读更多 →

生成式LSTM：从原理到实战的序列生成指南

1. 生成式长短期记忆网络入门指南第一次听说"生成式LSTM"这个概念时，我正在处理一个文本自动补全的项目。当时传统的LSTM模型虽然能记住上下文，但生成的文本总是缺乏创造性和连贯性。直到尝试了生成式LSTM，才真正体会到什么是"…...

2026/4/27 3:25:51 阅读更多 →

保姆级避坑指南：用MIM搞定MMSegmentation 2.0.0安装，告别版本兼容性报错

深度学习语义分割实战：MMSegmentation 2.0极简安装与避坑手册在计算机视觉领域，语义分割技术正以惊人的速度重塑着医疗影像分析、自动驾驶和工业质检等场景的应用边界。作为OpenMMLab生态中的重要成员，MMSegmentation 2.0凭借其模块化设计和…...

2026/4/26 0:05:40 阅读更多 →

Chrome-GPT：将大语言模型深度集成到浏览器的开发实践

1. 项目概述：当浏览器插件遇上大语言模型最近在折腾一个挺有意思的开源项目，叫“Chrome-GPT”。光看名字，你大概就能猜到它的核心玩法：把当下最火的大语言模型（LLM）能力，直接集成到我们每天都要…...

2026/4/26 0:05:44 阅读更多 →

别再用Node.js写MCP网关了！C++ 2024性能基准测试：相同硬件下吞吐量超Go 3.8倍，延迟降低62%

更多请点击： https://intelliparadigm.com 第一章：MCP协议核心原理与C网关设计全景概览 MCP（Modular Communication Protocol）是一种面向微服务间低延迟、高可靠通信的二进制协议，其核心在于“模块化帧结构”与“状态…...

2026/4/26 0:05:49 阅读更多 →

终极指南：如何通过Newtonsoft.Json配置实现高性能JSON序列化

终极指南：如何通过Newtonsoft.Json配置实现高性能JSON序列化【免费下载链接】Newtonsoft.Json Json.NET is a popular high-performance JSON framework for .NET 项目地址: https://gitcode.com/gh_mirrors/ne/Newtonsoft.Json Newtonsoft.Json&#xff08…...

2026/4/27 4:01:07 阅读更多 →