How to expose "native functions" to Javascript in a web page using Chromium and Delphi 6?

Question

I have successfully embedded Chromium into my Delphi 6 projects with the help of Delphi Chromium Embedded. Now I want to be able to execute Javascript code and the have results returned to my host Delphi app. My current method is to call ExecuteJavascript() and use a DOM element that the Javascript call writes its results to, and poll that element in a TTimer method from Delphi to retrieve the results. However, I read about using native functions and V8 extensions to have the Javascript call "call back" into my Delphi code as a way to receive results instead:

http://magpcss.org/ceforum/viewtopic.php?f=7&t=180

I would like to try this and I also would like to know how to attach Delphi based event listeners to DOM elements in the web page (onblur, onmousedown, etc.). I am looking for some samples that would show me how to do these two things if anyone knows where to find them.

Answer 1

Attaching listeners is quite easy (only in older versions of CEF):

procedure MouseDownCallback(const Event: ICefDomEvent);
begin
  ShowMessage('Mouse down on '+Event.Target.Name);
end;

procedure AttachMouseDownListenerProc(const Doc: ICefDomDocument);
begin
  Doc.Body.AddEventListenerProc('mousedown', True, MouseDownCallback);
end;

procedure TMainForm.Button1Click(Sender: TObject);
begin
  ChromiumComponent.Browser.MainFrame.VisitDomProc(AttachMouseDownListenerProc);
end;

Regarding the extended functions for getting JavaScript results directly: the trunk doesn't contain them (yet?). Seems to be work in progress.

Edit:

Getting rid of polling via extensions:

It is indeed possible for your JavaScript code to call back into your Delphi code using extensions. Furthermore you can send values from JavaScript to Delphi - this could be used to transfer results without the need to poll.

First in your initialization section register the extension, which creates a JavaScript object later to be used when calling back:

procedure RegisterExtension;
var
  Code:string;
begin

  Code :=
   'var cef;'+
   'if (!cef)'+
   '  cef = {};'+
   'if (!cef.test)'+
   '  cef.test = {};'+
   '(function() {'+
   '  cef.test.__defineGetter__(''test_param'', function() {'+
   '    native function GetTestParam();'+
   '    return GetTestParam();'+
   '  });'+
   '  cef.test.__defineSetter__(''test_param'', function(b) {'+
   '    native function SetTestParam();'+
   '    if(b) SetTestParam(b);'+
   '  });'+
   '  cef.test.test_object = function() {'+
   '    native function GetTestObject();'+
   '    return GetTestObject();'+
   '  };'+
   '})();';

  CefRegisterExtension('example/v8', Code, TMyHandler.Create as ICefv8Handler);
end;

initialization
  RegisterExtension;

TMyHandler's Execute will be invoked later. TMyHandler is defined as

TMyHandler = class(TCefv8HandlerOwn)
protected
  function Execute(const name: ustring; const obj: ICefv8Value;
    const arguments: TCefv8ValueArray; var retval: ICefv8Value;
    var exception: ustring): Boolean; override;
end;

The implementation for demonstration purposes is simple for now:

function TMyHandler.Execute(const name: ustring; const obj: ICefv8Value; const arguments: TCefv8ValueArray; var retval: ICefv8Value; var exception: ustring): Boolean;
begin
  ShowMessage('Execute!');
end;

Now to test calling into Delphi from JavaScript simply do:

ChromiumComponent.Browser.MainFrame.ExecuteJavaScript('cef.test.test_object().GetMessage();', 'about:blank', 0);

This should display the message box saying "Execute!".

I pulled the demo script from a sample named cefclient which you can find in the \demos\cefclient folder in the component root dir. The extension sample code is a bit hidden and mingled with other demo code. But of special interest for us is the implementation of TExtension.Execute (the equivalent to my TMyHandler.Execute). There you can find how to determine which function is being called and how to pass parameters. (Link to the code.)