NET WebView2 project, implement Chromium kernel embedded in WEB page

The WebView 2 project is uniquely endowed with the support of Microsoft operating systems Win10 and Win11. At the very least, the generated project file is very small. My side is 3.6M, which is greatly reduced compared to the CefSharp project's 100M size. Therefore, it is worth studying in depth.

Conditions needed for development

1. runtime

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

Through the control panel, we can also see that this runtime has been installed.

If not, you need to download and install it at the address above.

具体地址: https://go.microsoft.com/fwlink/p/?LinkId=2124703

2. NuGet package

The following NuGet packages need to be introduced

Microsoft.Web.WebView2

After installing it, I use the WinFrom UI framework by default.

• 案例参考: https://github.com/MicrosoftEdge/WebView2Samples

New project (winrom as reference)

If WebView 2 does not appear, you can restart the project and it will be there

At the same time, for the convenience of viewing, we just select the Dock attribute as Fill Full Fill

At this time, we can 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>
        /// 实现自适应页面缩放
        /// </summary>
    private void Form_Resize(object sender, EventArgs e)
    {
        webView21.Size = ClientSize - new Size(webView21.Location);
    }
    /// <summary>
    /// webview 加载完毕
    /// </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);
    }
}

This page can be stretched freely, which is very convenient.

This line has been added to the local cache. At this time, if you log in to the account and restart it, the account will still exist because the data is stored in the local cache.

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

webView21.CoreWebView2.OpenDevToolsWindow();

Open developer tools (you can open developer tools by right-clicking and checking the page)

Then, we have to execute the js script, ready to enter a content, and then click Search.

To achieve this function, a new button is needed

Add the following scripts

/// <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();");
}

This is the achieved effect

So far, we have implemented a completed WebView 2 project case.

Below is the corresponding code address:

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