Build your own simple browser with WebView2

First of all, I want to express my support for my friends and colleagues in Ukraine. For the last five years I have had the privilege of working daily with several teams of developers based in Kiev, and it is heartbreaking to see the havoc that is being wreaked on their nation right now. I pray that peace will come soon, and encourage all who are reading this to find practical ways of supporting Ukrainians at this time.

In this post I want to share how easy it is to build your own web browser with the WebView2 control.

If you're wondering why on earth I'd want to do this, part of the reason is that I often find myself recording video presentations that include showing a web browser. It's a real pain to use your regular browser to do this as it often contains many visual elements such as extension icons, favourite bars and search history that you need to edit out when producing a video for sharing online. I also want do do things like defaulting to a higher zoom setting than I normally use, and for the browser address bar to show the URL in a much bigger font size.

So I decided to see how hard it would be to make my own very simple web browser. Of course, WinForms and WPF have always had "web" UI controls, but these have been historically based on Internet Explorer, making them unsuitable for browsing modern websites. That's where WebView2 comes in. It's essentially an embeddable Microsoft Edge, which was perfect for my needs.

Let me share the steps I took to use it. I chose to make a WinForms project, but could equally have used WPF. My project file references the Microsoft.Web.WebView2 NuGet package.

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net6.0-windows</TargetFramework>
    <Nullable>enable</Nullable>
    <UseWindowsForms>true</UseWindowsForms>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.Web.WebView2" Version="1.0.1054.31" />
  </ItemGroup>

</Project>

Customization

With this in place, you can drag the WebView2 control onto the WinForms designer in Visual Studio. Customizing the control is pretty simple. I zoomed in a bit with:

webView21.ZoomFactor = 1.25;

And there are other properties you can configure by accessing the CoreWebView2 property. However, you mustn't access this until after the web view has initialized, so in my constructor I have:

webView21.CoreWebView2InitializationCompleted += OnWebViewInitializationComplete;

And then in my OnWebViewInitializationComplete event handler I have some additional customization, turning off the status bar tooltip at the bottom of the page, and handling the SourceChanged event:

webView21.CoreWebView2.SourceChanged += OnWebViewSourceChanged; 
webView21.CoreWebView2.Settings.IsStatusBarEnabled = false;

The reason I want to handle source changed, is that I have a text box on my webpage that I want to update whenever the web control navigates to a new page:

private void OnWebViewSourceChanged(object? sender, 
  Microsoft.Web.WebView2.Core.CoreWebView2SourceChangedEventArgs e)
{
    textBoxAddress.Text = webView21.Source.ToString();
}

And I also allow you to enter a new URL in that textbox, and press the enter key to navigate to a new page by setting the Source property.

private void OnTextBoxAddressKeyUp(object? sender, KeyEventArgs e)
{
    if (e.KeyCode == Keys.Enter)
    {
        e.Handled = true;
        webView21.Source = new Uri(textBoxAddress.Text);
    }
}

There's a few other minor features I added, such as calling webView21.CoreWebView2.Reload() to refresh the page when the user hits F5, but that was pretty much all I needed.

I've got a few other ideas for improving this to turn it into a tool I can easily use when giving live presentations as well, so might open source it at some point.

Here's what it looks like, with a Pluralsight color themed URL bar:

Browser screenshot

Customization

Navigation