Execute Scripts and View Source with TEdgeBrowser

With the release of 10.4.2 Sydney, the TEdgeBrowser for Delphi, C++Builder, and RAD Studio now works with the released version of Microsoft Edge and the Microsoft Edge WebView2 Runtime. This VCL component offers a number of improvements over the existing TWebBrowser, and the one I want to show you now is how to render arbitrary HTML, run arbitrary JavaScript, and grab the HTML Source from a web page.

First off all, to install TEdgeBrowser there are three steps:

1. Install the EdgeView2 SDK from GetIt.
   • Through the GetIt Window in the IDE
   • or via GetItCmd and the RAD Studio Command Prompt (You can also use AutoGetIt)
     getitcmd -ae -i=EdgeView2SDK-1.0.664.37
2. Download and install the Microsoft EdgeView2 Runtime appropriate for your architecture
   • It comes in 3 varieties
     1. Evergreen Bootstraper – Downloads and installs the latest version of the runtime matching the current architecture. Use this to install with your application.
     2. Evergreen Standalone Installer – Offline installer for Win32 or Win64
     3. Fixed Version – Allows you to download and install previous versions instead of the latest one offered by the Evergreen installers.
   • If you are building a Win32 application, then install the x86 version. If you are building a Win64 application, then install the x64 version. Or install both!
3. At runtime your program needs to access to WebView2Loader.dll, the easiest way to do this is either place it on the path, or use a Post Build event
   • For Win32: copy /y “$(BDS)Redistwin32WebView2Loader.dll” “$(OUTPUTDIR)”
   • For Win64: copy /y “$(BDS)Redistwin64WebView2Loader.dll” “$(OUTPUTDIR)”

When deploying your application you need to include the correct WebView2Loader.dll and make sure the Microsoft EdgeView2 Runtime is installed. At some point that will be installed by default, but the easiest way is use the Evergreen Bootstrapper.

Displaying Arbitrary HTML

To load arbitrary HTML into the TEdgeView, call the NavigateToString method passing the HTML as a string.

And your HTML will immediately render in the browser. No need to save it to a file or other such silliness.

Executing Arbitrary JavaScript

You can execute JavaScript in the TEdgeBrowser with ExecuteScript method

This script is executed in the current page, just as if you opened the JavaScript console in the browser, so you are able to interact with the DOM as well.

View The Source

The fundamentals of viewing the source of a page start with the ExecuteScript method, but are a bit more involved. There is an event handler for when a your script finishes executing since it executes asynchronously. You can use that even to return a JSON Object. In this case, the JSON Object is the HTML Source.

This uses the DOM (Document Object Model) to grab the Document Element (the root element, or [crayon-673a36b75d388579123547-i/]) and request the outerHTML, which is all the HTML including the Document Element. We then use encodeURL to encode it. Now for the [crayon-673a36b75d38a500623007-i/]event handler

This event fires after every call to [crayon-673a36b75d38c315469695-i/], but the [crayon-673a36b75d38e141918691-i/]will be [crayon-673a36b75d38f899047117-i/] if no results are returns. So we just ignore the ‘null’ values. Otherwise we use the [crayon-673a36b75d390637307869-i/] to remove the encoding, and remove the quotes with [crayon-673a36b75d392605949226-i/].

You can take the results of this and send right back in with a call to [crayon-673a36b75d393395977405-i/].

Summary

Check out the demo RAD Studio-Demo Kit/10.4.2-demos/EdgeView/ on GitHub.

TEdgeBrowser is just one of the great new and improved features in 10.4.2 Sydney. If you haven’t upgraded you are missing out!