.Net WebView2 Project: Embedding WEB Pages with Chromium Kernel

The WebView2 project is uniquely advantaged, backed by Microsoft's Windows 10 and Windows 11 operating systems. At the very least, the generated project files are very small—mine is 3.6MB. Compared to CefSharp projects that often exceed 100MB, this significantly reduces distribution size, making it well worth in-depth exploration.

Prerequisites for Development

1. Runtime

• WebView2 - Microsoft Edge Developer: https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section

You can also verify through the Control Panel that this runtime is already installed.

If not, download and install it from the link above.

Specific URL: https://go.microsoft.com/fwlink/p/?LinkId=2124703

2. NuGet Package

The following NuGet package needs to be added:

Microsoft.Web.WebView2

After installation, my default UI framework is WinForms.

• Sample reference: https://github.com/MicrosoftEdge/WebView2Samples

Create a new project (using WinForms as reference)

If WebView2 does not appear, restart the project and it will show up.

For convenience, set the Dock property to Fill to fill the entire area.

Now, add the basic environment code to start the page.

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        Resize += new EventHandler(Form_Resize);
        webView21.CoreWebView2InitializationCompleted += WebView21_CoreWebView2InitializationCompleted;
        Initialize();
    }
    /// <summary>
    /// Enable adaptive page scaling
    /// </summary>
    private void Form_Resize(object sender, EventArgs e)
    {
        webView21.Size = ClientSize - new Size(webView21.Location);
    }
    /// <summary>
    /// WebView initialized
    /// </summary>
    private void WebView21_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
    {
        webView21.CoreWebView2.Navigate("https://www.baidu.com/");
    }
    /// <summary>
    /// WebView2 initialization
    /// </summary>
    async void Initialize()
    {
        var result = await CoreWebView2Environment.CreateAsync(null, Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "cache"), null);
        await webView21.EnsureCoreWebView2Async(result);
    }
}

The page can be freely resized, which is very convenient.

The following line adds a local cache; if you log in, the session persists even after restart because the data is stored locally.

var result = await CoreWebView2Environment.CreateAsync(null, Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "cache"), null);

webView21.CoreWebView2.OpenDevToolsWindow();

Open the developer tools (can also be accessed via right-click and "Inspect" on the page).

Next, we want to execute JavaScript: input some content and then perform a search.

To implement this, you need to add a button.

Add the following script:

/// <summary>
/// Button click event
/// </summary>
private async void button1_Click(object sender, EventArgs e)
{
    // Open developer tools (can also be accessed via right-click and "Inspect")
    // webView21.CoreWebView2.OpenDevToolsWindow();

    // Fill in the search content
    await webView21.CoreWebView2.ExecuteScriptAsync("document.querySelector('#kw').value='1234'");
    // Trigger the search
    await webView21.CoreWebView2.ExecuteScriptAsync("document.querySelector('#su').click();");
}

This is the result:

At this point, we have implemented a complete WebView2 project example.

The corresponding code is available at:

• GitHub: https://github.com/kesshei/WebView2Demo
• Gitee: https://gitee.com/kesshei/web-view2-demo