Building a JavaScript ↔ C# Bridge with WebView2 in .NET 8

As desktop development evolves, integrating web-based interfaces with powerful C# backend logic is becoming more common. Thanks to Microsoft’s WebView2, developers can now build hybrid desktop applications that combine the flexibility of HTML/JavaScript with the performance of native .NET.

One of WebView2’s most powerful features is two-way communication between JavaScript and C#—commonly called a bridge. This feature allows:

• Calling C# functions from JavaScript
• Executing JavaScript from C#
• Sending and receiving messages back and forth seamlessly

---

🔧 Setup

Before you begin, make sure:

1. You’re using .NET 8
2. Your app includes the WebView2 control (WinForms or WPF)
3. The Microsoft.Web.WebView2 NuGet package is installed

---

💬 JavaScript → C# Communication

To send a message from JavaScript to C#, use:

window.chrome.webview.postMessage("helloFromJS");

In C#, handle the message using the WebMessageReceived event:

webView.CoreWebView2.WebMessageReceived += WebView_WebMessageReceived;

private void WebView_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
{
    string message = e.TryGetWebMessageAsString();
    MessageBox.Show("From JavaScript: " + message);
}

---

🧭 C# → JavaScript Communication

To run JavaScript from C#, use ExecuteScriptAsync():

csharpCopyEditawait webView.ExecuteScriptAsync("alert('Hello from C#')");

You can also call specific JS functions:

await webView.ExecuteScriptAsync("handleMessageFromDotNet('data from C#')");

In JavaScript, define the function to receive the call:

function handleMessageFromDotNet(data) {
    console.log("Received from C#: " + data);
}

---

🔁 Full Bridge (Back-and-Forth Communication)

JavaScript:

<button onclick="sendMessage()">Send to C#</button>

<script>
function sendMessage() {
    window.chrome.webview.postMessage("ping");
}

function handleMessageFromDotNet(data) {
    alert("Reply from C#: " + data);
}
</script>

C#:

webView.CoreWebView2.WebMessageReceived += (s, e) =>
{
    string msg = e.TryGetWebMessageAsString();
    if (msg == "ping")
    {
        webView.ExecuteScriptAsync("handleMessageFromDotNet('pong from C#')");
    }
};

---

🔒 Security Tips & Best Practices

• Prefer JSON format for structured messages instead of raw strings
• Never pass unvalidated user input into ExecuteScriptAsync
• Sanitize all data coming from or going to the browser context

---

🚀 Final Thoughts

With WebView2 in .NET 8, you can create rich desktop apps that blend the best of web and native technologies. The JavaScript ↔ C# bridge feature is perfect for:

• Local admin panels
• Hybrid desktop tools
• Internal utilities with a web-based UI

Try implementing this in your project and experience how smooth cross-context communication can be in a modern .NET app.