WebView2 でローカルファイルを読み込んで、WPFとWebView2でデータの受け渡しを試してみました。
完成形
Blocklyでビジュアルプログラミングをして、JavaScriptを実行してみました。フッター部で Blockly で作ったソースコードを表示しています。

概要
- WebView2 でローカルファイルを読み込んでいます。
- AvalonEdit に WebView2 から JavaScript を受け取って表示しています。
- JavaScript実行ボタンを押すと、AvalonEdit の JavaScript を WebView2 に投げて実行しています。

開発環境
- Windows 10 Home 20H2
- Visual Studio Community 2019
- .NET Core 3.1
- Microsoft.Web.WebView2 1.0.721-prerelease
- AvalonEdit 6.0.1
- MaterialDesignThemes 3.2.0
機能説明
じっくり知りたい人は、GitHub からソースコードをダウンロードして下さい。
ここではさっくり説明します。
WebView2 でローカルファイルを読み込む
// 実行ディレクトリを取得
var currentDirectory = Environment.CurrentDirectory;
// ローカルファイルのURIを作成
var uri = new Uri($"{currentDirectory}/AppData/index.html");
// WebView2にローカルファイルのURIを設定
webView.CoreWebView2.Navigate(uri.AbsoluteUri);
注意する点としては、ローカルファイルは絶対パスで指定してあげましょう。
あと、実行ディレクトリ内の index.html を参照するため、出力ディレクトリにコピーする設定に変えておきます。

WebView2 からデータを受け取る
public MainWindow()
{
InitializeComponent();
InitializeAsync();
}
async void InitializeAsync()
{
// WebView2の初期化が終わるまで待機
await webView.EnsureCoreWebView2Async(null);
// window.chrome.webview.postMessage を受け取るイベント設定
webView.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
}
private void CoreWebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
{
// Webから受け取ったデータをAvalonEditに設定
textEditor.Text = e.TryGetWebMessageAsString();
}
webView.CoreWebView2.WebMessageReceived
webView.CoreWebView2.WebMessageReceived このイベントで WebView2 からデータを受け取ることが出来ます。
WebView2 にデータを渡す
webView.CoreWebView2.ExecuteScriptAsync("runCode()");
今回は、JavaScript実行ボタンを押した時に、WebView2側の「runCodeファンクション」を実行するようにしています。
終わりに

参考

WPF アプリでの WebView2 の使用を開始する - Microsoft Edge Development
WebView2 for Windows Presentation Foundation (WPF) アプリの概要ガイドを参照してください。