Blog

All Blog Posts  |  Next Post  |  Previous Post

Get the most out of the Edge Web Browser in Delphi

Tuesday, June 27, 2023

In the latest release of TMS FNC Core and the TMS VCL UI Pack, two huge new features were added in our web browser component for Windows: TMSFNCEdgeWebBrowser and AdvWebBrowser.
This component was previously introduced with some edge chromium specific features and in this version two new features were added.

DevTools protocol

The Chrome DevTools Protocol allows for tools to access the full power of the Edge Chromium browser, that is used as our web browser component. It gives you the ability to handle events or call specific methods in a lot of different domains (DOM, Network, logging, Input, Debugger, ...).

Console Messages

It might be helpful to retrieve the messages that enter the console. For this, we created the event OnGetConsoleMessage that automatically subscribes on Log.entryAdded and Runtime.ConsoleAPICalled. The JSON response is already parsed to a level and the message as a string. (In case you want to retrieve the raw JSON response, you can still subscribe to the event explained later on.)

Methods

To execute a method you will need the domain and the method name concatenated with a '.', and if it is required then the parameters will need to be added as JSON text. In this example we'll retrieve the browser version, and no parameters are needed.

  TMSFNCEdgeWebBrowser.CallDevToolsProtocolMethod('Brower.getVersion', '{}');
  // The JSON parameters '{}' aren't required in the method.

The response is retrieved in the event OnDevToolsMethodCompleted which returns a JSON text.

{
    "jsVersion": "11.4.19.20",
    "product": "Edg\/114.0.1823.58",
    "protocolVersion": "1.3",
    "revision": "@913ab82f672fae52e03cb56700e4b1d2a0a0fa31",
    "userAgent": "Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/114.0.0.0 Safari\/537.36 Edg\/114.0.1823.58"
}

Events

Another way to retrieve information via the DevTools Protocol is via the events that are triggered.

First subscribe for an event, this is done in the same way as with the methods.
In this example we will get an event when a data chunk was received over the network. 

TMSFNCEdgeWebBrowser1.SubscribeDevtools('Network.dataReceived');
In the OnDevToolsSubscribedEvent event, the information is found as JSON text on all subscribed events.

{
    "dataLength": 0,
    "encodedDataLength": 61,
    "requestId": "18752.30",
    "timestamp": 25897.920259
}


Download Management

With this feature it is possible to handle the downloads that are initiated via the browser.

On a new download the event OnDownloadStarted is triggered. In this event it is possible to choose that download will run silent, so no popup window is shown. It is also possible to set the result file path and there is the option to pause or cancel the download.

While the download is in progress there are two events that will be triggered to give an update: OnDownloadStateChanged and OnDownloadBytesReceivedChanged.

All of the downloads since the initialization of the web browser can be found in the Downloads property of the browser. From each of the downloads in this collection, it is also possible to pause, resume or cancel the download.


These two new implementations will give you the ability to get a lot more out of the web browser component. In both TMS FNC Core and the TMS VCL UI Pack



Gjalt Vanhouwaert




This blog post has not received any comments yet.



Add a new comment

You will receive a confirmation mail with a link to validate your comment, please use a valid email address.
All fields are required.



All Blog Posts  |  Next Post  |  Previous Post