推荐订阅源

首先指定一个端口号让Chrome启动调试端口,(比如9222).

然后控制端请求链接获取webSocketUrl:

get->http://localhost:9222/json/version
response->
{
   "Browser": "Chrome/146.0.7680.165",
   "Protocol-Version": "1.3",
   "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36",
   "V8-Version": "14.6.202.26",
   "WebKit-Version": "537.36 (@4b989da09e15a7dc0de0785cb5ff232aadae3f0f)",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/browser/6add6d6c-1e34-42d0-ad9e-ea2ba6c89d46"
}

Chome启动的调试服务只能本地访问,所以远程操控需要在Chrome本机建立一个中间件负责转发服务端(比如AI)与Chrome的消息.

CDP交互
根据webSocketDebuggerUrl建立websocket连接
连接成功后:
第一步: 找到目标页面

request->
{
    "id": 3,
    "method": "Target.getTargets"
}
response->
{
    "id": 3,
    "result": {
        "targetInfos": [
            {
                "targetId": "554623D25BC2C68CC7D297D75B961907",
                "type": "page",
                "title": "\u6b61\u8fce\u9032\u5165\u5370\u5237\u7ba1\u7406\u7cfb\u7d71",
                "url": "https://www.cnblogs.com",
                "attached": false,
                "canAccessOpener": false,
                "browserContextId": "1879DCC4254178FA61BF5A50BD5AE5F8"
            }
        ]
    }
}

第二步:选择目标页面

request->
{
    "id": 3,
    "method": "Target.attachToTarget",
    "params": {
      "targetId": "554623D25BC2C68CC7D297D75B961907",
      "flatten": true
    }
}
response->
{
    "id": 3,
    "result": {
        "sessionId": "534C416CD626D79CBC8188AB019CCB87"
    }
}

第三步:使用sessionId发送操作

request->
{
    "sessionId": "534C416CD626D79CBC8188AB019CCB87",
    "id": 3,
    "method": "Runtime.evaluate",
    "params": {
      "expression": "document.title"
    }
}
response->
{
    "id": 3,
    "result": {
        "result": {
            "type": "string",
            "value": "\u6b61\u8fce\u9032\u5165\u5370\u5237\u7ba1\u7406\u7cfb\u7d71"
        }
    },
    "sessionId": "064E8FC93CE1DADF3DB527D314E54215"
}

参考网址:
CDP (Chrome DevTools Protocol) 完整指南：从原理到 OpenClaw 实践

协议监控：查看和发送 CDP 请求  |  Chrome DevTools  |  Chrome for Developers

使用新的命令编辑器高效编写 Chrome Devtools 协议 (CDP) 命令  |  Blog  |  Chrome for Developers

https://github.com/aslushnikov/getting-started-with-cdp