TEdgeBrowser component: calling native code from a script running on the embedded web page

Question

Currently we use TWebBrowser component to embed IE to our desktop application. To call a Delphi code from a script running in the embedded browser we have implemented support for the window.external object as described here: http://www.delphidabbler.com/articles/article-22

Now, for many reasons, we need to switch to a modern browser. We already upgraded to Delphi 10.4 which introduces new TEdgeBrowser component (MS Edge based on Chromium). Is it possible to use the window.external also for TEdgeBrowser? If so, how? Or is there other way how to call native code from a script in the embedded browser?

One thing that you can do with plain old Windows `TWebBrowser` is use the browser emulation mode to get the latest classic Edge rendering. This gives you the functionality of a modern browser. This might also be useful for you in the near term given that the new Chromium Edge based MS web browser component is not officially released yet. Which means that if you are deploying to customer machines, then using the new Chromium Edge based MS web browser component presents headaches. — David Heffernan, Jun 15 '20 at 08:41
@DavidHeffernan thanks for the reply. Our application is used in the critical infrastructure and the customer (gas industry corporate) wants to switch to the Chromium for security reasons. Also they encounter some issues that registry settings for IE emulation mode are reset to default on the end-user stations (probably because of a domain settings). So we are looking for another solution. TEdgeBrowser was my favorite. I also found the CEF4Delphi project – https://github.com/salvadordf/CEF4Delphi but it seems the implementation can be big adventure... — stepand76, Jun 15 '20 at 11:07
`TEdgeBrowser` seems to use [WebView2](https://learn.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/win32) with which it should be possible to register a (Delphi) handler to receive Javascript calls to 'window.chrome.webview.postMessage'. — Ondrej Kelle, Jun 15 '20 at 11:24
Just to pick up on the browser emulation mode, it is possible to override any machine wide settings in your own application. I'm not trying to push you that way, just wanted to state that information. — David Heffernan, Jun 15 '20 at 11:28
@OndrejKelle I also found this, but don't know how to write in Delphi. Don't know where to start. There is tons of COM objects and interfaces... — stepand76, Jun 15 '20 at 13:01
The "Getting started" link I gave you has an example, in "Step 6". — Ondrej Kelle, Jun 15 '20 at 13:13
In my code it is sufficient to set a suitable user agent, and since I am also serving the HTML, I add a custom header `X-UA-Compatible` with value `IE=edge`. But I think that there are other ways for different scenarios. — David Heffernan, Jun 15 '20 at 17:59

score 8 · Accepted Answer · answered Jul 06 '20 at 15:56

Finally it was pretty simple. Thanks to TOndrej for the "Getting started" link which help me to figure it out. I also realized that it works with MS Edge Beta (84.0.522.28), so no Canary required as described by Marco Cantu here: https://blog.marcocantu.com/blog/2020-may-edge-browser-component.html. I hope it will work with official MS Edge soon. Here are some code snippets:

Delphi:

procedure TForm1.Button1Click(Sender: TObject);
begin
  EdgeBrowser1.Navigate(ExtractFilePath(ParamStr(0))  + 'index.html');
end;

procedure TForm1.EdgeBrowser1WebMessageReceived(Sender: TCustomEdgeBrowser; Args: TWebMessageReceivedEventArgs);
var
  Msg: PChar;
begin
  Args.ArgsInterface.Get_webMessageAsJson(Msg);
  MessageBox(Handle, Msg, PChar(EmptyStr), MB_OK);
end;

HTML:

<!DOCTYPE html>
<html>
<body>
    <p onclick="handleClick()">Click me</p>
    <script>
        function handleClick() {
            window.chrome.webview.postMessage({ data: 'Message from Edge Chromium', url: window.document.URL });
        }
    </script>
</body>
</html>

TEdgeBrowser component: calling native code from a script running on the embedded web page

1 Answers1