window.postMessage与window.chrome.webview.postMessage区别及WebView2捕获方案

• window.postMessage是HTML5标准API，设计用于浏览器环境下不同源的页面、iframe之间的跨上下文通信，消息仅在渲染层的页面上下文之间传递，不会发送到WebView2的.NET宿主层，因此默认不会触发WebMessageReceived事件。
• window.chrome.webview.postMessage是WebView2专属的非标准扩展API，专门用于实现Web页面与WebView2宿主应用之间的跨层通信，调用该API发送的消息会直接传递到.NET层，触发WebMessageReceived事件。

无需修改第三方页面代码，通过给WebView2注入JS钩子即可实现捕获，步骤如下：

1. 监听WebView2的CoreWebView2InitializationCompleted事件，确保WebView2核心初始化完成后执行注入操作。
2. 调用AddScriptToExecuteOnDocumentCreatedAsync方法注入Hook脚本，该脚本会在页面自身JS执行前运行，重写window.postMessage逻辑，在不影响原页面功能的前提下将消息转发到宿主层：

window.postMessage = new Proxy(window.postMessage, {
  apply(target, thisArg, args) {
    // 提取postMessage的入参
    const [messageData, targetOrigin, transfer] = args;
    // 转发给.NET宿主
    window.chrome.webview.postMessage({
      capture_type: "window_post_message",
      data: messageData,
      origin: window.location.origin
    });
    // 执行原postMessage逻辑，不影响页面原有功能
    return Reflect.apply(target, thisArg, args);
  }
});

3. 在.NET层的WebMessageReceived事件中，判断消息的capture_type字段，若为window_post_message则取出对应数据处理即可。

额外注意事项 #

如果需要捕获第三方页面内嵌iframe中发送的window.postMessage，需要额外监听CoreWebView2.FrameCreated事件，给每个新创建的iframe也注入上述相同的Hook脚本。

内容的提问来源于stack exchange，提问作者dotNET