WebView2 CDP 示例 - Chrome DevTools Protocol 异步与同步调用

概述

演示 cWebView2Host 的 Chrome DevTools Protocol (CDP) 调用能力，同时展示异步和同步两种调用模式。使用菜单栏触发不同的 CDP 方法调用。

项目结构

下载源码 [ 注意：重新到bin目录注册 DLL 文件 ]

代码请到 VBMAN2 项目 demos/webview2/cdp 目录获取。

cdp/
  ├── Form1.frm              # 主窗体，包含菜单和 CDP 调用逻辑
  ├── vbman2_webview2.vbp    # VB6 项目文件
  └── vbman2_webview2.vbw    # VB6 工作区文件

核心代码解析

1. 声明与初始化(Form1.frm)

Dim WithEvents wv As cWebView2Host

Private Sub Form_Load()
    Set wv = New cWebView2Host
    wv.Initialize Me.hWnd, "https://vb6.pro"
End Sub

使用 WithEvents 以接收 DevToolsProtocolResponse 异步响应事件。

2. 同步 CDP 调用

Private Sub MenuSyncTitle_Click()
    Dim sTitle As String
    sTitle = wv.CallDevToolsProtocolMethodSync( _
        "Runtime.evaluate", _
        "{""expression"":""document.title""}")
    MsgBox "Sync Title -> " & sTitle, vbInformation
End Sub

Private Sub MenuSyncCookies_Click()
    Dim sCookies As String
    sCookies = wv.CallDevToolsProtocolMethodSync( _
        "Network.getCookies", _
        "{}")
    Debug.Print sCookies
End Sub

同步调用直接返回结果，无需事件处理，适用于简单查询操作。

3. 异步 CDP 调用

Private Sub MenuAsyncScreen_Click()
    wv.CallDevToolsProtocolMethod _
        "Page.captureScreenshot", _
        "{}", _
        "screenShot"
End Sub

Private Sub MenuAsyncDom_Click()
    wv.CallDevToolsProtocolMethod _
        "DOM.getDocument", _
        "{}", _
        "domDoc"
End Sub

异步调用第三个参数是自定义事件 ID，用于在响应事件中区分不同的调用。

4. 异步响应处理

Private Sub wv_DevToolsProtocolResponse(ByVal CustomEventId As Variant, ByVal JsonResponse As String)
    Select Case CustomEventId
        Case "screenShot"
            Debug.Print "[Async] Screenshot received"
        Case "domDoc"
            Debug.Print "[Async] DOM: " & Left(JsonResponse, 200)
        Case "pageUrl"
            Debug.Print "[Async] URL: " & JsonResponse
    End Select
End Sub

功能说明

1. 同步 CDP 调用

   • CallDevToolsProtocolMethodSync 阻塞等待结果
   • 直接使用函数返回值获取响应
   • 适合 Runtime.evaluate、Network.getCookies 等快速操作

2. 异步 CDP 调用

   • CallDevToolsProtocolMethod 立即返回，结果通过事件获取
   • 使用 CustomEventId 区分不同调用的响应
   • 适合 Page.captureScreenshot 等耗时操作

3. CDP 方法演示

   • Runtime.evaluate：执行 JS 表达式
   • Network.getCookies：获取 Cookie
   • Page.captureScreenshot：页面截图
   • DOM.getDocument：获取 DOM 文档
   • Browser.getVersion：获取浏览器版本

技术要点

1. 同步调用使用 Sleep + DoEvents 实现，不会冻结 VB6 窗体消息循环
2. 异步调用必须使用 WithEvents 声明才能接收 DevToolsProtocolResponse 事件
3. CustomEventId 是 Variant 类型，可以是字符串或数字，用于匹配请求和响应
4. CDP 参数必须是合法的 JSON 字符串，空参数传 "{}"

应用场景

1. 页面截图并保存
2. 获取 HttpOnly Cookie
3. 深度操作 DOM（绕过 JS 层）
4. 网络请求拦截和修改
5. 浏览器性能分析

扩展建议

1. 结合 CDP 截图和定时器实现自动巡检截图
2. 使用 Network.setExtraHTTPHeaders 注入自定义请求头
3. 使用 DOM.querySelector + DOM.setAttributeValue 实现 DOM 属性深度修改