How to create a Chromium Browser with Tabs in C# using CefSharp

By FoxLearn 7/16/2024 9:11:46 AM   18.44K
Using Chromium Browser with tabs involves creating a Windows Forms in C# and integrating CefSharp as the embedded browser.

Here's a step-by-step guide on how to CefSharp in C# Windows Forms Application.

Open your Visual Studio, then click New Project, then select Visual C# on the left, then Windows and then select Windows Forms Application. Enter your project name and then click OK button.

How to make a Chromium Browser with Tabs in C#

To create a Windows Forms application with a Chromium browser and tabs using CefSharp in C#, you can follow these steps

First, You need to install the CefSharp.WinForms from NuGet package into your project. You can do this via NuGet Package Manager or via Package Manager Console

Install-Package CefSharp.WinForms

Right click on your project select Manage NuGet Packages -> Enter 'cefsharp' at the search box -> Install

cefsharp winforms example

After installing the library, you need to rebuild your project, then you can see the chromium browser in the Visual Studio toolbox.

CefSharp is the the easiest way to embed a full-featured standards-complaint web browser into your C# or VB.NET app. CefSharp has browser controls for WinForms and WPF apps, and a headless (offscreen) version for automation projects too. CefSharp is based on Chromium Embedded Framework, the open source version of Google Chrome.

CefSharp is a .NET wrapper around the Chromium Embedded Framework (CEF), a web browser control based on the Google Chromium project.

Below are some key features of CefSharp:

  1. Chromium Embedded Framework (CEF): CEF is an open-source framework for embedding a full-featured HTML5 web browser into other applications.

  2. .NET Wrapper: CefSharp provides a .NET wrapper around the CEF library, allowing developers to easily integrate web browser functionality into their .NET applications without having to deal with the complexities of CEF's native API.

  3. Customization: CefSharp allows for extensive customization and extension through its API. You can easily modify browser behavior, handle events, inject JavaScript code into web pages, and create custom UI elements around the browser control.

  4. Platform Support: CefSharp supports various platforms including Windows Forms, WPF (Windows Presentation Foundation), and .NET Core.

It's a good library that makes it easy for developers to integrate web browser functionality into your .NET applications

Open your main form in the designer, then add Button, TextBox, TabControl and Chromium Browser from the Visual Studio toolbox onto your form.

You can make a simple design as below

chromiumwebbrowser c#

Double-click on your main forrm, then add a Form_Load event handler allows you to initialize CefSharp

//chromiumwebbrowser c#
ChromiumWebBrowser chrome;
// cefsharp winforms example
private void Form1_Load(object sender, EventArgs e)
{
    CefSettings settings = new CefSettings();
    //Initializa
    Cef.Initialize(settings);
    txtUrl.Text = "https://www.google.com";
    ChromiumWebBrowser chrome = new ChromiumWebBrowser(txtUrl.Text);
    this.tabControl.TabPages[0].Controls.Add(chrome);
    chrome.Dock = DockStyle.Fill;
    chrome.AddressChanged += Chrome_AddressChanged;
    chrome.TitleChanged += Chrome_TitleChanged;
}

Add a AddressChanged event handler allows you to update url to the textbox control.

private void Chrome_AddressChanged(object sender, AddressChangedEventArgs e)
{
    //Update url in multiple thread
    this.Invoke(new MethodInvoker(() =>
    {
        txtUrl.Text = e.Address;
    }));
}

Add a TitleChanged event handler allows you to change tile to tab control.

private void Chrome_TitleChanged(object sender, TitleChangedEventArgs e)
{
    this.Invoke(new MethodInvoker(() =>
    {
        tabControl.SelectedTab.Text = e.Title;
    }));
}

Add a click event handler to the NewTab button allows you to create a new chromium browser in tab control.

//c# chromiumwebbrowser
private void btnNewTab_Click(object sender, EventArgs e)
{
    TabPage tab = new TabPage();
    tab.Text = "New tab";
    tabControl.Controls.Add(tab);
    tabControl.SelectTab(tabControl.TabCount - 1);
    ChromiumWebBrowser chrome = new ChromiumWebBrowser("https://www.google.com");
    chrome.Parent = tab;
    chrome.Dock = DockStyle.Fill;
    txtUrl.Text = "https://www.google.com";
    chrome.AddressChanged += Chrome_AddressChanged;
    chrome.TitleChanged += Chrome_TitleChanged;
}

Add a click event handler to Go button allows you load browse the website.

private void btnGo_Click(object sender, EventArgs e)
{
    chrome.Load(txtUrl.Text);
}

Add a click event handler to the Refresh button allows you to refresh the website

private void btnRefresh_Click(object sender, EventArgs e)
{
    chrome.Refresh();
}

Add a click event handler to the Forward button allows you to next page

private void btnForward_Click(object sender, EventArgs e)
{
    if (chrome.CanGoForward)
        chrome.Forward();
}

Add a click event handler to the Forward button allows you to back

private void btnBack_Click(object sender, EventArgs e)
{
    if (chrome.CanGoBack)
        chrome.Back();
}

Add a FormClosing event handler allows you to shut down CefSharp properly when the form is closing to avoid any memory leaks.

private void Form1_FormClosing(object sender, FormClosingEventArgs e)
{
    Cef.Shutdown();
}

You need to change your CPU target base on 32bit or 64 bit Operating System, then build and run your application. This is simple cefsharp example chromium c#, when run the application you will see chromium-based browser control embedded within your Windows Forms application.

VIDEO TUTORIALS