SampleApps/WebView2APISample/assets/ScenarioWebMessage.html

<!DOCTYPE html>
<html>
<head>
    <title>ScenarioWebMessage</title>
    <script>
        "use strict";
        //! [chromeWebView]
        window.chrome.webview.addEventListener('message', arg => {
            if ("SetColor" in arg.data) {
                document.getElementById("colorable").style.color = arg.data.SetColor;
            }
            if ("WindowBounds" in arg.data) {
                document.getElementById("window-bounds").value = arg.data.WindowBounds;
            }
        });

        function SetTitleText() {
            let titleText = document.getElementById("title-text");
            window.chrome.webview.postMessage(`SetTitleText ${titleText.value}`);
        }
        function GetWindowBounds() {
            window.chrome.webview.postMessage("GetWindowBounds");
        }
        //! [chromeWebView]
    </script>
</head>
<body>
    <h1>WebMessage sample page</h1>
    <p>This page demonstrates basic interaction between the host app and the webview by
    means of Web Messages.</p>

    <h2>Posting Messages</h2>
    <p id="colorable">Messages can be posted from the host app to the webview using the
    functions <code>ICoreWebView2::PostWebMessageAsJson</code> and
    <code>ICoreWebView2::PostWebMessageAsString</code>. Try using the menu item
    "Script-&gt;Post Message JSON" to send the message <code>{"SetColor":"blue"}</code>.
    It should change the text color of this paragraph.</p>

    <h2>Receiving Messages</h2>
    <p>The host app can receive messages by registering an event handler with
    <code>ICoreWebView2::add_WebMessageReceived</code>. If you enter text and click
    "Send", this page will send a message to the host app which will change the text of
    the title bar.</p>
    <input type="text" id="title-text"/>
    <button onclick="SetTitleText()">Send</button>

    <h2>Round trip</h2>
    <p>The host app can send messages back in response to received messages. If you click
    "Get window bounds", the host app will report back the bounds of its window, which will
    appear in the text box.</p>
    <button onclick="GetWindowBounds()">Get window bounds</button><br>
    <textarea id="window-bounds" rows="4" readonly></textarea>
</body>
</html>