该chrome.webview.postMessage方法是一个特定于 WebView2 的 JavaScript 函数，它允许 Web 内容通过CoreWebView2.WebMessageReceived事件向宿主应用程序发送消息。它以 HTML 标准window.postMessageDOM API 为模式，但除了 chrome.webview.postMessage 将消息发布到主机应用程序和 window.postMessage 将消息发布到其他窗口之外，还有一些不同之处：

window.postMessage(message, targetOrigin, [transfer]);
window.chrome.webview.postMessage(message);

差异

消息参数

它们都将一个message对象作为第一个参数，通过值传递给目标。消息由 window.postMessage 使用结构化克隆算法 (SCA) 进行序列化，而 window.chrome.webview.postMessage 使用 JSON。两者之间最大的区别是 SCA 可以处理消息对象中的引用循环，而 JSON 会抛出。

原点参数

window.postMessage 方法用于将消息发布到其他窗口，并且存在窗口可能不在正确的来源并且不允许接收消息数据的风险。origin 参数允许调用者指定允许接收数据的来源。

在 WebView2 的情况下，没有这样的参数，因为消息被发送到本质上受信任的主机应用程序（它是受信任的，因为它托管 Web 内容并且能够检查用户数据文件夹、注入脚本等）。

传递参数

window.postMessage 的可选传输参数允许将特定类型的 JavaScript 对象移动到目标窗口。这包括诸如消息端口和大量数据之类的东西。

WebView2 目前不支持这种情况，同样 chrome.webview.postMessage 也没有这个参数。

转发到 chrome.webview.postMessage

如果您想将 window.postMessage 消息发送到宿主应用程序，最简单的方法是订阅目标窗口的 window.onmessage 事件

window.addEventListener("message", e => {
    if (shouldForwardToWebView2(e)) {
        window.chrome.webview.postMessage(e.data);
    }
});

如果您无法订阅该事件，您还可以填充 window.postMessage 方法：

const originalPostMessage = window.postMessage.bind(window);
window.postMessage = function (message, origin, transfer) {
    if (shouldForwardToWebView2(message)) {
        window.chrome.webview.postMessage(message);
    }
    originalPostMessage(message, origin, transfer);
};

填充这样的方法比较棘手，因为此填充代码中的任何错误都可能破坏尝试使用 postMessage 的任何内容，这与事件处理程序不同，后者的故障范围仅限于该事件处理程序。

在任一情况下，您可能希望过滤转发到 WebView2 的消息，以确保您不会从其他库或源发送不相关的消息，您不希望发送数据以限制攻击面。

此外，这仅在您要转发到 WebView2 的消息不依赖于transfer.