C#/VBアプリケーションとWebView2コントロール（WebページのJavaScript）間のデータ送受信

C#/VBアプリケーションとWebView2コントロール間の通信

アプリケーションとWebView2内のWebコンテンツとの間で、データのやり取りを行うことができます。

アプリからJavaScriptの処理を実行するExecuteScriptAsyncメソッドや、 アプリから文字やJsonデータをJavaScriptに送ったり(JavaScriptで受信イベントが発生)、 JavaScriptコードにてアプリに文字を送ることが可能です。

VB/C#からWebページのJavaScriptにデータを送る方法

VB/C#から、現在WebView2で表示しているWebページのJavaScriptにデータを送るには、PostWebMessageAsStringメソッドまたはPostWebMessageAsJsonメソッドを使用します。
この２つのメソッドは、文字列を送る場合はPostWebMessageAsStringメソッド、Jsonパラメータを送る場合はPostWebMessageAsJsonメソッドを使用します。

JavaScript側でデータを受け取る為に、messageイベントハンドラを追加します。
VB/C＃にて現在表示しているページに対して、動的にJavaScriptにmessageイベントハンドラ定義を追加してやります。
追加後にVB/C＃からPostWebMessageを実行すれば、JavaScriptでメッセージイベントを受けて処理を行います。

下記コードでは、Formでボタン押下するとJavaScriptで受け取ったメッセージをalert表示します。

							'WebViewコントロール初期化時に、AddScriptToExecuteOnDocumentCreatedAsyncメソッドにてJavaScriptにmessageイベントハンドラを追加する。
							'※今回はAddScriptToExecuteOnDocumentCreatedAsyncメソッドでmessageイベントハンドラを追加していますが、
							'　ExecuteScriptAsyncメソッドで追加しても良いです。
							Private Async Sub InitializeAsync()
								Await WebView2.EnsureCoreWebView2Async(Nothing)
								Await WebView2.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.chrome.webview.addEventListener('message',  function(e) { alert('message received:' + e.data);});")
							End Sub
				
							'Webページ(JavaScript)にmessageイベントを発生させ文字を送付する。
							Private Async Sub btnSendMessageToJS_Click(sender As Object, e As EventArgs) Handles btnJS.Click
								WebView2.CoreWebView2.PostWebMessageAsString("test")
							End Sub
						
							//'WebViewコントロール初期化時に、AddScriptToExecuteOnDocumentCreatedAsyncメソッドにてJavaScriptにmessageイベントハンドラを追加する。
							async void InitializeAsync()
							{
								await webView2.EnsureCoreWebView2Async(null);
								await webView2.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.chrome.webview.addEventListener('message',  function(e) { alert('message received:' + e.data);});");
							}
				
							//Webページ(JavaScript)にmessageイベントを発生させ文字を送付する。
							//※今回はAddScriptToExecuteOnDocumentCreatedAsyncメソッドでmessageイベントハンドラを追加していますが、
							//　ExecuteScriptAsyncメソッドで追加しても良いです。	        private void btnSendJS_Click(object sender, EventArgs e)
							{
								webView2.CoreWebView2.PostWebMessageAsString("test");
							}

JavaScriptからメッセージを送り、VB/C#で受け取る方法

JavaScriptからVB／C＃側にメッセージを送るにはwindow.chrome.webview.postMessage()メソッドを使います。
引数を指定することで任意のデータを渡すことができます。
VB／C#側でメッセージを受け取るため、WebMessageReceivedイベントハンドラに受信時の処理を定義します。

この方法はJavaScriptからVB／C#に一方的にメッセージを送るものなので、JavaScript側に値を返すこと等はできません。

下記コードでは、Web画面でボタン押下すると入力した文字をJavaScriptがVB/C#に通知し、VB/C#は受け取ったメッセージを表示します。
html側のコード

							<html>
							    <body>
							        <input type="text" id="url">
							        <input type="button" value="メッセージ送信" onclick="window.chrome.webview.postMessage(document.getElementById('url').value);">
							    </body>
							</html>

C#／VB側のコード
							'メッセージ受信のイベントハンドラを定義します。JavaScriptからメッセージを受信したときに実行します。
							Private Sub MessageReceived(sender As Object, args As Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs) Handles WebView2.WebMessageReceived
								Dim text As String = args.TryGetWebMessageAsString()
								MsgBox(text)
							End Sub
						
							private async void Form1_Load(object sender, EventArgs e)
							{
								await InitializeAsync();
							}
							
							//WebView2の初期化後、メッセージ受信のイベントハンドラを定義します。
							async void InitializeAsync()
							{
								await webView2.EnsureCoreWebView2Async(null);
								webView2.CoreWebView2.WebMessageReceived += MessageReceived;
							}
							
							//JavaScriptからメッセージを受信したときに実行します。
							private void MessageReceived(object sender, Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs args)
							{
								String text = args.TryGetWebMessageAsString();
								MessageBox.Show(text);
							}
						
							private async void Form1_Load(object sender, EventArgs e)
							{
								await InitializeAsync();
							}
					
							//WebView2の初期化
							private async Task InitializeAsync()
							{
								await webView2.EnsureCoreWebView2Async(null);
								webView2.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;    //Webページからのメッセージ受信
							}
					
							//Webページからのメッセージ受信時の処理
							private void CoreWebView2_WebMessageReceived(object? sender, CoreWebView2WebMessageReceivedEventArgs e)
							{
								string text = e.TryGetWebMessageAsString();  //送信文字を取得
								MessageBox.Show(text);
							}

注意

WebMessageReceivedイベントのTryGetWebMessageAsStringメソッドで取得できる型は文字列である必要があります。
JavaScriptのpostMessageで文字列以外を送ってしまうと、TryGetWebMessageAsStringメソッドの呼び出し時にSystem.ArgumentExceptionが発生します。
toStringメソッドで変換してから送りましょう。
await webView2.CoreWebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.getElementsByName('radioname')[1].checked.toString());");

参考

Windows Forms アプリでの WebView2 の概要 (プレビュー)
WebView2 Class
Microsoft.Web.WebView2.Core Namespace
WebView2Browser