Search code examples
delphitedgebrowser

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

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?

Solution

  • 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>

    enter image description here