How To Use The MS Edge Browser In A Native Windows C++ App

In C++ Builder, you can easily develop your web browser or you can add web browsing ability to your applications. This means users can safely surf your link by using Web Browser components. Developing a full Web Browser may take a lot of time, instead of this, there are many components and libraries that we can use in C++ development. In RAD Studio, C++ Builder11 and 10.4.x, there is a new feature called EdgeBrowser which is using Edge Canary. It has new features and is much more compatible than previous web browsers and other libs or components.

In this post, you’ll get answers to these questions:

• How can I create a web browser VCL application easily?
• How can I add web browser ability to a part of my application?
• How can I use Edge browser in VCL applications?
• Can I use the latest WebView 2 to browse the web with the C++ Builder VCL app?
• How can I create a VCL application with the latest Microsoft-supported web browsing technologies?

By learning how to use ms edge browser in native windows in c++ app, it will help you to easily build C++ applications

Doesn’t the VCL already have a web browser component?

In VCL applications, we have two web browsers. WebBrowser (TWebBrowser) and the new Web Browser which is called EdgeBrowser (TEdgeBrowser) used in 10.4.x versions. EdgeBrowser component is using Microsoft’s WebView 2 control (Edge Chromium) as a web browser engine.

RAD Studio 11 also has the same components with some improvements. The latest RAD Studio comes with the WebBrowser with the Web Engine option. In Firemonkey applications EdgeBrowser is now formed as an engine in the WebBrowser. There is no EdgeBrowser in FMX applications, it is integrated as an engine into WebBrowser. We have more options to choose web engine, that is great.

How can I install the WebView2 component?

1. Install “Edge Canary” Edge Browser version on your Windows machine.
2. Download “Edge SDK” from the GetIt menu from within RAD Studio – or you can do it via this link: https://getitnow.embarcadero.com/?q=Edge+SDK&product=rad-studio&sub=all&sortby=date&categories=-1
3. Download WebView2 latest version from here  
4. Open the downloaded package by 7zip 
5. Copy required files to your Debug or Release output directory
6. If you have a 32bit project copy WebView2Loader.dll from bin/x86
7. – or if you have a 64bit project copy WebView2Loader.dll from bin/x64

How do I run the EdgeBrowser (TEdgeBrowser) VCL example?

1. Open the Sample example from;

C++Builder: “C:\Users\Public\Documents\Embarcadero\Studio\22.0\Samples\CPP\VCL\WebBrowser\Edge“

Delphi: “C:\Users\Public\Documents\Embarcadero\Studio\22.0\Samples\Object Pascal\VCL\WebBrowser\Edge“

2. Copy 32 or 64 bit WebView2Loader.dll to your output Debug or Release directories of this example as described above.

3. Compile and run the example.

How to use the EdgeBrowser (TEdgeBrowser) component in a VCL application?

1. We can create a new VCL application or we can enhance your existing application with the latest TEdgeBrowser component. Just drag it to your form, we can drag it into a specific area like Panel, Rectangle, Groupbox, or into a Tab Item. We can set its Align property to Client that can resize automatically by the resize of the application window.

2. Set the application to Debug or Release mode. Compile to generate Debug or Release output directories. Copy required files to your Debug or Release output directory. If you have a 32bit project copy WebView2Loader.dll from bin/x86or if you have a 64bit project copy WebView2Loader.dll from bin/x64 as described above.

3. Drag and drop an Edit (TEdit) box and a Button (TButton) to top. Add a URL, for example, https://www.embarcadero.com) to your edit box text. Drop the EdgeBrowser component UI on your form from the component palette, and add this line below on your mouse click event

or you can directly navigate your url as below;

Don’t forget to copy the 32 or 64 bit WebView2Loader.dll to your output directory.

Still if you have problems, check steps above, or for more details please read this post.

Embarcadero released RAD Studio 11 Alexandria. This release introduces several new features, enhancements, and quality updates in key areas including:   Provision apps for Windows 11, Compile for Android API 30, Compile for macOS M-series (Apple Silicon) processors, Design on high-DPI 4k+ screens, View VCL Styles in design time, New & modernized VCL components , Use enhanced remote desktop support to collaborate remotely and many new enhancements and bug fixes.

See What’s New in RAD Studio 11and Download RAD Studio 11 now

C++ Builder is the easiest and fastest C and C++ IDE for building simple or professional applications on the Windows, MacOS, iOS & Android operating systems. It is also easy for beginners to learn with its wide range of samples, tutorials, help files, and LSP support for code. RAD Studio’s C++ Builder version comes with the award-winning VCL framework for high-performance native Windows apps and the powerful FireMonkey (FMX) framework for cross-platform UIs.

There is a free C++ Builder Community Edition for students, beginners, and startups; it can be downloaded from here. For professional developers, there are Professional, Architect, or Enterprise versions of C++ Builder and there is a trial version you can download from here.