WebView2 プロジェクトは、Microsoft のオペレーティングシステムである Windows 10 および Windows 11 のサポートを受けており、最低限、生成されるプロジェクトファイルのサイズは非常に小さく、私の場合は 3.6MB です。CefSharp プロジェクトが軽く 100MB を超えるサイズになるのと比較すると、配布サイズを大幅に削減できるため、十分に研究する価値があります。
開発に必要な条件
- ランタイム
- WebView2 - Microsoft Edge Developer: https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section
コントロールパネルからも、このランタイムが既にインストールされていることを確認できます。
インストールされていない場合は、上記のアドレスからダウンロードしてインストールしてください。
具体的なアドレス: https://go.microsoft.com/fwlink/p/?LinkId=2124703
- NuGet パッケージ
以下の NuGet パッケージを導入する必要があります。
Microsoft.Web.WebView2
インストール後、ここではデフォルトで WinForms UI フレームワークを使用しています。
- サンプルリファレンス: https://github.com/MicrosoftEdge/WebView2Samples
新しいプロジェクトを作成します（WinForms を参考として）。
WebView2 が表示されない場合は、プロジェクトを再起動すると表示されるようになります。
同時に、見やすくするために Dock プロパティを Fill に設定して全画面表示にします。
ここで、基本的な環境コードを追加すると、ページが起動できるようになります。
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
Resize += new EventHandler(Form_Resize);
webView21.CoreWebView2InitializationCompleted += WebView21_CoreWebView2InitializationCompleted;
Initialize();
}
/// <summary>
/// ウィンドウリサイズに合わせて WebView2 を自動調整
/// </summary>
private void Form_Resize(object sender, EventArgs e)
{
webView21.Size = ClientSize - new Size(webView21.Location);
}
/// <summary>
/// WebView2 の初期化完了イベント
/// </summary>
private void WebView21_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
{
webView21.CoreWebView2.Navigate("https://www.baidu.com/");
}
/// <summary>
/// WebView2 の初期化
/// </summary>
async void Initialize()
{
var result = await CoreWebView2Environment.CreateAsync(null, Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "cache"), null);
await webView21.EnsureCoreWebView2Async(result);
}
}
このページは自由にリサイズでき、非常に便利です。
この行でローカルキャッシュを有効にしています。この設定により、ログインしたアカウントは再起動後も保持されます（データがローカルキャッシュに保存されるため）。
var result = await CoreWebView2Environment.CreateAsync(null, Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "cache"), null);
webView21.CoreWebView2.OpenDevToolsWindow();
開発者ツールを開きます（右クリック →「要素を検証」からも開けます）。
次に、JavaScript スクリプトを実行して、何か文字を入力してから検索ボタンをクリックします。
この機能を実現するには、ボタンを追加する必要があります。
以下のスクリプトを追加するだけです。
/// <summary>
/// ボタンクリックイベント
/// </summary>
private async void button1_Click(object sender, EventArgs e)
{
//開発者ツールを開く（右クリック →「要素を検証」からも開けます）
// webView21.CoreWebView2.OpenDevToolsWindow();
//検索ボックスに内容を入力
await webView21.CoreWebView2.ExecuteScriptAsync("document.querySelector('#kw').value='1234'");
//検索を実行
await webView21.CoreWebView2.ExecuteScriptAsync("document.querySelector('#su').click();");
}
これが実装結果です。
以上で、完全な WebView2 プロジェクトのサンプルが完成しました。
以下は対応するコードのアドレスです。