Chromium Embedded Framework Browser Tabs Close Button in C#

Chromium Embedded Framework (CEF).

Chromium embedded framework is an open source framework for embedding the Chromium web browser into another application. This allows developers to add web browsing functionality to their applications, as well as the ability to use HTML, CSS and JavaScript to create application user interfaces.

It's a simple framework for embedding Chromium-based browsers in other applications.

How to Create Chromium Embedded Framework Browser Tabs Close Button in C#

To create a close button for Chromium Embedded Framework (CEF) browser tabs using CefSharp in a C# Windows Forms Application.

You can follow these steps:

Creating a new Windows Forms application project, then open your form designer.

Drag and drop TextBox, Button and Panel controls from the Visual Studio toolbox to your project, then modify your UI as shown below.

First, Ensure you have installed the CefSharp NuGet package in your project. You can do this by right-clicking on your project in Visual Studio, selecting "Manage NuGet Packages", and searching for "CefSharp". Install the appropriate package for your project.

How to use CefSharp in C#

CefSharp is an open source framework allows you to embed a chromium browser in a windows forms application. The CefSharp Chromium-based browser component (WinForms control).

CefSharp lets you embed Chromium in .NET apps. It is a lightweight .NET wrapper around the Chromium Embedded Framework. It can be used from C# or VB, or any other CLR language. CefSharp provides both WPF and WinForms web browser control implementations.

Creating an AppContainer class, then make it inherits from the TitleBarTabs control.

public partial class AppContainer : TitleBarTabs
{
    public AppContainer()
    {
        InitializeComponent();
        AeroPeekEnabled = true;
        TabRenderer = new ChromeTabRenderer(this);
        Icon = Properties.Resources.chrome;
    }

    public override TitleBarTab CreateTab()
    {
        return new TitleBarTab(this)
        {
            Content = new frmMain { Text = "New Tab" }
        };
    }
}

The CreateTab method is used to create a new tab with a ChromiumWebBrowser instance, and the close button is added dynamically to each tab page. When the close button is clicked, the corresponding tab page is removed from the tab control.

Whenever you want to open a new browser tab, create a new instance of ChromiumWebBrowser from CefSharp and add it to a new tab page in the TitleBarTab.

Adding the Form_Load event handler to your main form, then add the ChromiumWebBrowser to the Panel control.

// Create a new instance of ChromiumWebBrowser
ChromiumWebBrowser browser;
private void FrmMain_Load(object sender, EventArgs e)
{
    browser = new ChromiumWebBrowser(txtUrl.Text);
    browser.Dock = DockStyle.Fill;
    this.pContainer.Controls.Add(browser);//Add browser to Panel control
}

Finally, Add the click event handler to the Go button allows you to load new website when clicking on the Go button.

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

Similarly, Add the KeyPress event handler to the TextBox control allows you to load new website when you entering URL from the TextBox control.

private void TxtUrl_KeyPress(object sender, KeyPressEventArgs e)
{
    if (e.KeyChar == (char)13)//enter key
        browser.Load(txtUrl.Text);
}

Open the Program class, then modify your code allows you to open the chromium browser in new tab control as shown below.

static void Main()
{
    Application.EnableVisualStyles();
    Application.SetCompatibleTextRenderingDefault(false);
    //Application.Run(new frmMain());
    AppContainer container = new AppContainer();
    container.Tabs.Add(new EasyTabs.TitleBarTab(container)
    {
        Content = new frmMain
        {
            Text = "New Tab"
        }
    });
    container.SelectedTabIndex = 0;
    TitleBarTabsApplicationContext applicationContext = new TitleBarTabsApplicationContext();
    applicationContext.Start(container);
    Application.Run(applicationContext);
}

Don't forget to select the cpu target to x64 or x86 when rebuilding your project based on your windows version.

Through the c# example above, you've learned how to use cefsharp (chromium embedded framework c#) to create a simple web browser based on the chromium framework in windows forms application using c# .net.

VIDEO TUTORIAL