Chrome extensions in DotNetBrowser

We’re happy to announce that Chrome extensions in DotNetBrowser are in public preview!

This article demonstrates how to install the uBlock Origin extension in DotNetBrowser and how to interact with it from the code.

An extension launched in DotNetBrowser

Chrome extensions in a web view bring new capabilities into your software at no cost. With extensions, you can block ads, improve accessibility, use developer tools of JavaScript libraries, and many more.

Extensions support is almost ready. And while we’re finishing it up, we offer the community a preview build. Try the demo application or add a couple of NuGet packages to your project to check it out.

Clone the demo application

Here’s how to get the demo application:

1. Clone DotNetBrowser-Examples repository.

   git clone https://github.com/TeamDev-IP/DotNetBrowser-Examples.git
   

2. Switch to the extensions-preview branch:

   git checkout extensions-preview
   

3. Get a free 30-day trial license. Fill out the form, and you will receive an email with the license key immediately.

Sending…

Sorry, the sending was interrupted

Please try again. If the issue persists, contact us at info@teamdev.com.

Go back

Read and agree to the terms to continue. Get my free trial

I have read and agreed to the terms of the individual license agreement. I agree with the processing of my personal data in accordance with privacy statement.

Your personal DotNetBrowser trial key and quick start guide will arrive in your Email Inbox in a few minutes.

4. Put your license key into the dotnetbrowser.license file in the root of the repository.
5. Open the solution in Visual Studio 2019 or newer.
6. Right-click the solution in “Solution Explorer” and select “Restore NuGet Packages.”
7. Build the solution and run the Extensions project.

Use in the existing project

If you already use DotNetBrowser, you can get the preview build from NuGet:

1. Add DotNetBrowser EAP feed:

   dotnet nuget add source "https://pkgs.dev.azure.com/teamdev-products/66fbd081-377c-4af2-a64d-fee8ca740ed4/_packaging/dotnetbrowser-eaps/nuget/v3/index.json" --name "DotNetBrowser EAP NuGet feed"
   

2. Switch to the preview build of DotNetBrowser:

   dotnet add package DotNetBrowser -v "2.22.1-b3483-eap"
   dotnet add package DotNetBrowser.WPF -v "2.22.1-b3483-eap"
   

Install the extension

Installing an extension is straightforward: find it in Chrome Web Store and pass the URL to DotNetBrowser.

In the code below, we install the uBlock Origin extension:

// A URL of uBlock Origin extension in Chrome Web Store.
var url = "https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm/related?hl=en";

// Explicitly grant the permission to install extensions.
var extensions = engine.Profiles.Default.Extensions;
extensions.ValidatePermissionsHandler =
    new Handler<ValidatePermissionsParameters, ValidatePermissionsResponse>(
         p => ValidatePermissionsResponse.Grant()
    );

// Install the extension and wait until installed.
var extension = extensions.Install(url).Result;

If the extension is not in the store, specify the path to the CRX3 file:

var url = "C:\\extensions\\my-extension.crx";

Interact with extension

Every extension has an icon in the Chrome toolbar. When a user clicks on the icon, the extension usually does something. For example, it may show a small pop-up or silently change the content of the page.

In DotNetBrowser, there isn’t a toolbar or icon to click on. So instead, we provide the API to “click on the icon” from code:

extension.GetAction(browser).Click();

If the extension wants to show a pop-up, DotNetBrowser will open it as a new window. But you can change this behavior.

The extension’s pop-up is a regular IBrowser instance. So you can do anything: show it inside the existing window, make it transparent, or turn it into a modal dialog. In fact, you may decide not to show it at all.

In this example, we don’t display the pop-up and do some automation instead:

using DotNetBrowser.Browser.Handlers;
...
browser.OpenExtensionActionPopupHandler =
    new Handler<OpenExtensionActionPopupParameters, 
                OpenExtensionActionPopupResponse>(p =>
    {
        // As soon as the frame is loaded, automate necessary actions.
        p.PopupBrowser.Navigation.FrameLoadFinished += (s, e) =>
        {
            if (e.Frame.IsMain)
            {
                // Click on the actual switch button in the uBlock pop-up.
                e.Frame.GetElementById("switch").Click();
            }
        };
        // Allow the extension to load content in the pop-up browser. 
        return OpenExtensionActionPopupResponse.Open();
    });

Give us extensions to check

Integrating Chrome extensions into DotNetBrowser marks a significant step forward, offering more possibilities for enhancing .NET applications. With this update, we invite developers to explore and provide feedback.

Let us know your thoughts and which extensions you want to use.