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:

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

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.

• javascript
• delphi
• chromium
• embedded-v8

• 2 Wow, Delphi-6 where you have to do all Unicode by hand and Chromium with full Unicode support. Now that sounds like an impedance mismatch to me :) – Jeroen Wiert Pluimers Commented Aug 1, 2011 at 8:04
• "Impedance mismatch". There's an electronics engineer in the room folks. :) You're right, but Delphi 6 is still my favorite IDE. At least for now. – Robert Oschler Commented Aug 2, 2011 at 4:11
• I wish I was an electronics engineer; I never had the chance studying it, but still have the feeling that knowing about electronic engineering and having a feel for what can go wrong there is tremendously useful in the IT. I understand you like Delphi 6, but urge to you look at more current versions. Recently I had to go back, and there was so much I missed... – Jeroen Wiert Pluimers Commented Aug 2, 2011 at 10:01

1 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.)