Improved debug info in JS extension demos

Removed mutation observer from the JSRTTIExtension demo

demos/Delphi_VCL/JavaScript/JSExtension/uJSExtension.pas

@@ -57,6 +57,7 @@ const
 
   MINIBROWSER_CONTEXTMENU_SETJSEVENT   = MENU_ID_USER_FIRST + 1;
   MINIBROWSER_CONTEXTMENU_JSVISITDOM   = MENU_ID_USER_FIRST + 2;
+  MINIBROWSER_CONTEXTMENU_SHOWDEVTOOLS = MENU_ID_USER_FIRST + 3;
 
   MOUSEOVER_MESSAGE_NAME  = 'mouseover';
   CUSTOMNAME_MESSAGE_NAME = 'customname';
@@ -280,6 +281,7 @@ var
   TempExtensionCode : string;
   TempHandler       : ICefv8Handler;
 begin
+  try
     // This is a JS extension example with 2 functions and several parameters.
     // Please, read the "JavaScript Integration" wiki page at
     // https://bitbucket.org/chromiumembedded/cef/wiki/JavaScriptIntegration.md
@@ -298,9 +300,12 @@ begin
                          '  };' +
                          '})();';
 
-  try
     TempHandler := TTestExtensionHandler.Create;
-    CefRegisterExtension('myextension', TempExtensionCode, TempHandler);
+
+    if CefRegisterExtension('myextension', TempExtensionCode, TempHandler) then
+      {$IFDEF DEBUG}CefDebugLog('JavaScript extension registered successfully!'){$ENDIF}
+     else
+      {$IFDEF DEBUG}CefDebugLog('There was an error registering the JavaScript extension!'){$ENDIF};
   finally
     TempHandler := nil;
   end;
@@ -311,8 +316,7 @@ begin
   GlobalCEFApp                     := TCefApplication.Create;
   GlobalCEFApp.OnWebKitInitialized := GlobalCEFApp_OnWebKitInitialized;
   GlobalCEFApp.DisableFeatures     := 'NetworkService,OutOfBlinkCors';
-
+  {$IFDEF DEBUG}
-  {$IFDEF INTFLOG}
   GlobalCEFApp.LogFile             := 'debug.log';
   GlobalCEFApp.LogSeverity         := LOGSEVERITY_INFO;
   {$ENDIF}
@@ -343,6 +347,7 @@ begin
   model.AddSeparator;
   model.AddItem(MINIBROWSER_CONTEXTMENU_SETJSEVENT,   'Set mouseover event');
   model.AddItem(MINIBROWSER_CONTEXTMENU_JSVISITDOM,   'Visit DOM in JavaScript');
+  model.AddItem(MINIBROWSER_CONTEXTMENU_SHOWDEVTOOLS, 'Show DevTools');
 end;
 
 procedure TJSExtensionFrm.Chromium1BeforePopup(Sender: TObject;
@@ -368,6 +373,9 @@ procedure TJSExtensionFrm.Chromium1ContextMenuCommand(Sender: TObject;
   const browser: ICefBrowser; const frame: ICefFrame;
   const params: ICefContextMenuParams; commandId: Integer;
   eventFlags: Cardinal; out Result: Boolean);
+var
+  TempPoint : TPoint;
+  TempJSCode : string;
 begin
   Result := False;
 
@@ -376,22 +384,34 @@ begin
   case commandId of
     MINIBROWSER_CONTEXTMENU_SETJSEVENT :
       if (browser <> nil) and (browser.MainFrame <> nil) then
-        browser.MainFrame.ExecuteJavaScript(
+        begin
-          'document.body.addEventListener("mouseover", function(evt){'+
+          TempJSCode := 'document.body.addEventListener("mouseover", function(evt){'+
                           'function getpath(n){'+
                             'var ret = "<" + n.nodeName + ">";'+
                             'if (n.parentNode){return getpath(n.parentNode) + ret} else '+
                             'return ret'+
                           '};'+
-            'myextension.mouseover(getpath(evt.target))}'+   // This is the call from JavaScript to the extension with DELPHI code in uTestExtensionHandler.pas
+                          'myextension.mouseover(getpath(evt.target))}'+
-          ')', 'about:blank', 0);
+                        ')';
+
+          browser.MainFrame.ExecuteJavaScript(TempJSCode, 'about:blank', 0);
+        end;
 
     MINIBROWSER_CONTEXTMENU_JSVISITDOM :
       if (browser <> nil) and (browser.MainFrame <> nil) then
-        browser.MainFrame.ExecuteJavaScript(
+        begin
-          'var testhtml = document.body.innerHTML;' +
+          TempJSCode := 'var testhtml = document.body.innerHTML; ' +
-          'myextension.sendresulttobrowser(testhtml, ' + quotedstr(CUSTOMNAME_MESSAGE_NAME) + ');',  // This is the call from JavaScript to the extension with DELPHI code in uTestExtensionHandler.pas
+                        'myextension.sendresulttobrowser(testhtml, ' + quotedstr(CUSTOMNAME_MESSAGE_NAME) + ');';
-          'about:blank', 0);
+
+          browser.MainFrame.ExecuteJavaScript(TempJSCode, 'about:blank', 0);
+        end;
+
+    MINIBROWSER_CONTEXTMENU_SHOWDEVTOOLS :
+      begin
+        TempPoint.x := params.XCoord;
+        TempPoint.y := params.YCoord;
+        Chromium1.ShowDevTools(TempPoint, nil);
+      end;
   end;
 end;
 

demos/Delphi_VCL/JavaScript/JSRTTIExtension/uJSRTTIExtension.dfm

@@ -38,7 +38,7 @@ object JSRTTIExtensionFrm: TJSRTTIExtensionFrm
       Margins.Right = 5
       Align = alClient
       TabOrder = 0
-      Text = 'https://www.briskbard.com/forum/'
+      Text = 'https://www.google.com/'
       ExplicitHeight = 21
     end
     object GoBtn: TButton
@@ -60,7 +60,7 @@ object JSRTTIExtensionFrm: TJSRTTIExtensionFrm
     Height = 19
     Panels = <
       item
-        Width = 50
+        Width = 1000
       end>
   end
   object CEFWindowParent1: TCEFWindowParent

demos/Delphi_VCL/JavaScript/JSRTTIExtension/uJSRTTIExtension.pas

@@ -58,10 +58,10 @@ const
   MINIBROWSER_CONTEXTMENU_SETJSEVENT        = MENU_ID_USER_FIRST + 1;
   MINIBROWSER_CONTEXTMENU_JSVISITDOM        = MENU_ID_USER_FIRST + 2;
   MINIBROWSER_CONTEXTMENU_MUTATIONOBSERVER  = MENU_ID_USER_FIRST + 3;
+  MINIBROWSER_CONTEXTMENU_SHOWDEVTOOLS      = MENU_ID_USER_FIRST + 4;
 
   MOUSEOVER_MESSAGE_NAME        = 'mouseover';
   CUSTOMNAME_MESSAGE_NAME       = 'customname';
-  MUTATIONOBSERVER_MESSAGE_NAME = 'mutationobservermsgname';
 
 type
   TJSRTTIExtensionFrm = class(TForm)
@@ -162,7 +162,10 @@ begin
 {$IFDEF DELPHI14_UP}
   // Registering the extension. Read this document for more details :
   // https://bitbucket.org/chromiumembedded/cef/wiki/JavaScriptIntegration.md
-  TCefRTTIExtension.Register('myextension', TTestExtension);
+  if TCefRTTIExtension.Register('myextension', TTestExtension) then
+    {$IFDEF DEBUG}CefDebugLog('JavaScript extension registered successfully!'){$ENDIF}
+   else
+    {$IFDEF DEBUG}CefDebugLog('There was an error registering the JavaScript extension!'){$ENDIF};
 {$ENDIF}
 end;
 
@@ -171,6 +174,10 @@ begin
   GlobalCEFApp                     := TCefApplication.Create;
   GlobalCEFApp.OnWebKitInitialized := GlobalCEFApp_OnWebKitInitialized;
   GlobalCEFApp.DisableFeatures     := 'NetworkService,OutOfBlinkCors';
+  {$IFDEF DEBUG}
+  GlobalCEFApp.LogFile             := 'debug.log';
+  GlobalCEFApp.LogSeverity         := LOGSEVERITY_INFO;
+  {$ENDIF}
 end;
 
 procedure TJSRTTIExtensionFrm.GoBtnClick(Sender: TObject);
@@ -191,7 +198,7 @@ begin
   model.AddSeparator;
   model.AddItem(MINIBROWSER_CONTEXTMENU_SETJSEVENT,       'Set mouseover event');
   model.AddItem(MINIBROWSER_CONTEXTMENU_JSVISITDOM,       'Visit DOM in JavaScript');
-  model.AddItem(MINIBROWSER_CONTEXTMENU_MUTATIONOBSERVER, 'Add mutation observer');
+  model.AddItem(MINIBROWSER_CONTEXTMENU_SHOWDEVTOOLS,     'Show DevTools');
 end;
 
 procedure TJSRTTIExtensionFrm.Chromium1BeforePopup(Sender: TObject;
@@ -213,51 +220,46 @@ procedure TJSRTTIExtensionFrm.Chromium1ContextMenuCommand(Sender: TObject;
   eventFlags: Cardinal; out Result: Boolean);
 const
   ELEMENT_ID = 'keywords'; // ID attribute in the search box at https://www.briskbard.com/forum/
+var
+  TempPoint : TPoint;
+  TempJSCode : string;
 begin
   Result := False;
 
   // Here is the code executed for each custom context menu entry
-
   case commandId of
     MINIBROWSER_CONTEXTMENU_SETJSEVENT :
       if (browser <> nil) and (browser.MainFrame <> nil) then
-        browser.MainFrame.ExecuteJavaScript(
+        begin
-          'document.body.addEventListener("mouseover", function(evt){'+
+          TempJSCode := 'document.body.addEventListener("mouseover", function(evt){'+
                           'function getpath(n){'+
-              'var ret = "<" + n.nodeName + ">";'+
+                            'var ret = "<" + n.nodeName + ">"; '+
                             'if (n.parentNode){return getpath(n.parentNode) + ret} else '+
                             'return ret'+
-            '};'+
+                          '}; '+
                           'myextension.mouseover(getpath(evt.target))}'+   // This is the call from JavaScript to the extension with DELPHI code in uTestExtension.pas
-          ')', 'about:blank', 0);
+                        ')';
+
+          browser.MainFrame.ExecuteJavaScript(TempJSCode, 'about:blank', 0);
+        end;
 
     MINIBROWSER_CONTEXTMENU_JSVISITDOM :
       if (browser <> nil) and (browser.MainFrame <> nil) then
-        browser.MainFrame.ExecuteJavaScript(
+        begin
-          'var testhtml = document.body.innerHTML;' +
+          // This is the call from JavaScript to the extension with DELPHI code in uTestExtension.pas
-          'myextension.sendresulttobrowser(testhtml, ' + quotedstr(CUSTOMNAME_MESSAGE_NAME) + ');',  // This is the call from JavaScript to the extension with DELPHI code in uTestExtension.pas
+          TempJSCode := 'var testhtml = document.body.innerHTML; ' +
-          'about:blank', 0);
+                        'myextension.sendresulttobrowser(testhtml, ' + quotedstr(CUSTOMNAME_MESSAGE_NAME) + ');';
 
-    MINIBROWSER_CONTEXTMENU_MUTATIONOBSERVER :
+          browser.MainFrame.ExecuteJavaScript(TempJSCode, 'about:blank', 0);
-      // This MutatioObserver is based on this example https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
+        end;
-      // This observer is configured to execute the callback when the attributes in the search box at google.com
+
-      // changes its value. The callback calls a JavaScript extension called "myextension.sendresulttobrowser" to send
+    MINIBROWSER_CONTEXTMENU_SHOWDEVTOOLS :
-      // the "value" attribute to Delphi.
+      begin
-      // Delphi receives the the information in the Chromium1ProcessMessageReceived procedure and shows it in the status bar.
+        TempPoint.x := params.XCoord;
-      if (browser <> nil) and (browser.MainFrame <> nil) then
+        TempPoint.y := params.YCoord;
-        browser.MainFrame.ExecuteJavaScript(
+
-          'var targetNode = document.getElementById(' + quotedstr(ELEMENT_ID) + ');' +
+        Chromium1.ShowDevTools(TempPoint, nil);
-          'var config = { attributes: true, childList: false, subtree: false };'+
+      end;
-          'var callback = function(mutationsList, observer) {' +
-          '    for(var mutation of mutationsList) {' +
-          '         if (mutation.type == ' + quotedstr('attributes') + ') {' +
-          '            myextension.sendresulttobrowser(document.getElementById(' + quotedstr(ELEMENT_ID) + ').value, ' + quotedstr(MUTATIONOBSERVER_MESSAGE_NAME) + ');' +
-          '        }' +
-          '    }' +
-          '};' +
-          'var observer = new MutationObserver(callback);' +
-          'observer.observe(targetNode, config);',
-          'about:blank', 0);
   end;
 end;
 
@@ -289,12 +291,6 @@ begin
         FText := message.ArgumentList.GetString(0);
         PostMessage(Handle, MINIBROWSER_SHOWTEXTVIEWER, 0, 0);
         Result := True;
-      end
-     else
-      if (message.Name = MUTATIONOBSERVER_MESSAGE_NAME) then
-        begin
-          StatusBar1.Panels[0].Text := message.ArgumentList.GetString(0);
-          Result := True;
       end;
 end;
 

demos/Lazarus/JavaScript/JSExtension/JSExtension.lps

@@ -22,8 +22,8 @@
         <ResourceBaseClass Value="Form"/>
         <IsVisibleTab Value="True"/>
         <EditorIndex Value="1"/>
-        <TopLine Value="173"/>
+        <TopLine Value="303"/>
-        <CursorPos X="17" Y="207"/>
+        <CursorPos X="11" Y="326"/>
         <UsageCount Value="20"/>
         <Loaded Value="True"/>
         <LoadedDesigner Value="True"/>
@@ -50,7 +50,7 @@
         <DefaultSyntaxHighlighter Value="Delphi"/>
       </Unit3>
     </Units>
-    <JumpHistory Count="22" HistoryIndex="21">
+    <JumpHistory Count="23" HistoryIndex="22">
       <Position1>
         <Filename Value="uJSExtension.pas"/>
       </Position1>
@@ -138,6 +138,10 @@
         <Filename Value="uJSExtension.pas"/>
         <Caret Line="205" Column="75" TopLine="173"/>
       </Position22>
+      <Position23>
+        <Filename Value="uJSExtension.pas"/>
+        <Caret Line="61" Column="30" TopLine="47"/>
+      </Position23>
     </JumpHistory>
     <RunParams>
       <FormatVersion Value="2"/>

demos/Lazarus/JavaScript/JSExtension/uJSExtension.lfm

@@ -1,7 +1,7 @@
 object JSExtensionFrm: TJSExtensionFrm
-  Left = 185
+  Left = 483
   Height = 589
-  Top = 131
+  Top = 152
   Width = 978
   Caption = 'JSExtension'
   ClientHeight = 589

demos/Lazarus/JavaScript/JSExtension/uJSExtension.pas

@@ -59,6 +59,7 @@ const
 
   MINIBROWSER_CONTEXTMENU_SETJSEVENT   = MENU_ID_USER_FIRST + 1;
   MINIBROWSER_CONTEXTMENU_JSVISITDOM   = MENU_ID_USER_FIRST + 2;    
+  MINIBROWSER_CONTEXTMENU_SHOWDEVTOOLS = MENU_ID_USER_FIRST + 3;
 
   MOUSEOVER_MESSAGE_NAME  = 'mouseover';
   CUSTOMNAME_MESSAGE_NAME = 'customname';
@@ -304,7 +305,11 @@ begin
 
   try
     TempHandler := TTestExtensionHandler.Create;
-    CefRegisterExtension('myextension', TempExtensionCode, TempHandler);
+
+    if CefRegisterExtension('myextension', TempExtensionCode, TempHandler) then
+      {$IFDEF DEBUG}CefDebugLog('JavaScript extension registered successfully!'){$ENDIF}
+     else
+      {$IFDEF DEBUG}CefDebugLog('There was an error registering the JavaScript extension!'){$ENDIF};
   finally
     TempHandler := nil;
   end;
@@ -315,8 +320,7 @@ begin
   GlobalCEFApp                     := TCefApplication.Create;
   GlobalCEFApp.OnWebKitInitialized := GlobalCEFApp_OnWebKitInitialized;
   GlobalCEFApp.DisableFeatures     := 'NetworkService,OutOfBlinkCors';
-
+  {$IFDEF DEBUG}
-  {$IFDEF INTFLOG}
   GlobalCEFApp.LogFile             := 'debug.log';
   GlobalCEFApp.LogSeverity         := LOGSEVERITY_INFO;
   {$ENDIF}
@@ -347,6 +351,7 @@ begin
   model.AddSeparator;
   model.AddItem(MINIBROWSER_CONTEXTMENU_SETJSEVENT,   'Set mouseover event');
   model.AddItem(MINIBROWSER_CONTEXTMENU_JSVISITDOM,   'Visit DOM in JavaScript');
+  model.AddItem(MINIBROWSER_CONTEXTMENU_SHOWDEVTOOLS, 'Show DevTools');
 end;
 
 procedure TJSExtensionFrm.Chromium1BeforePopup(Sender: TObject;
@@ -374,6 +379,9 @@ procedure TJSExtensionFrm.Chromium1ContextMenuCommand(Sender: TObject;
   const browser: ICefBrowser; const frame: ICefFrame;
   const params: ICefContextMenuParams; commandId: Integer;
   eventFlags: Cardinal; out Result: Boolean);   
+var
+  TempPoint : TPoint;
+  TempJSCode : string;
 begin
   Result := False;
 
@@ -382,22 +390,34 @@ begin
   case commandId of
     MINIBROWSER_CONTEXTMENU_SETJSEVENT :
       if (browser <> nil) and (browser.MainFrame <> nil) then
-        browser.MainFrame.ExecuteJavaScript(
+        begin
-          'document.body.addEventListener("mouseover", function(evt){'+
+          TempJSCode := 'document.body.addEventListener("mouseover", function(evt){'+
                           'function getpath(n){'+
                             'var ret = "<" + n.nodeName + ">";'+
                             'if (n.parentNode){return getpath(n.parentNode) + ret} else '+
                             'return ret'+
                           '};'+
-            'myextension.mouseover(getpath(evt.target))}'+   // This is the call from JavaScript to the extension with DELPHI code in uTestExtensionHandler.pas
+                          'myextension.mouseover(getpath(evt.target))}'+
-          ')', 'about:blank', 0);
+                        ')';
+
+          browser.MainFrame.ExecuteJavaScript(TempJSCode, 'about:blank', 0);
+        end;
 
     MINIBROWSER_CONTEXTMENU_JSVISITDOM :
       if (browser <> nil) and (browser.MainFrame <> nil) then
-        browser.MainFrame.ExecuteJavaScript(
+        begin
-          'var testhtml = document.body.innerHTML;' +
+          TempJSCode := 'var testhtml = document.body.innerHTML; ' +
-          'myextension.sendresulttobrowser(testhtml, ' + quotedstr(CUSTOMNAME_MESSAGE_NAME) + ');',  // This is the call from JavaScript to the extension with DELPHI code in uTestExtensionHandler.pas
+                        'myextension.sendresulttobrowser(testhtml, ' + quotedstr(CUSTOMNAME_MESSAGE_NAME) + ');';
-          'about:blank', 0);
+
+          browser.MainFrame.ExecuteJavaScript(TempJSCode, 'about:blank', 0);
+        end;
+
+    MINIBROWSER_CONTEXTMENU_SHOWDEVTOOLS :
+      begin
+        TempPoint.x := params.XCoord;
+        TempPoint.y := params.YCoord;
+        Chromium1.ShowDevTools(TempPoint, nil);
+      end;
   end;
 end;
 

source/uCEFMiscFunctions.pas

@@ -378,6 +378,7 @@ var
 begin
   if (GlobalCEFApp <> nil) and
      GlobalCEFApp.LibLoaded and
+     (GlobalCEFApp.ProcessType = ptRenderer) and
      (length(name) > 0) and
      (length(code) > 0) then
     begin

source/uCEFv8Handler.pas

@@ -92,7 +92,7 @@ type
     public
       constructor Create(const value: TValue; SyncMainThread: Boolean = False); reintroduce;
       destructor Destroy; override;
-      class procedure Register(const name: ustring; const value: TValue; SyncMainThread: Boolean = False);
+      class function Register(const name: ustring; const value: TValue; SyncMainThread: Boolean = False) : boolean;
   end;
 {$ENDIF}
 
@@ -748,17 +748,21 @@ begin
   Result := True;
 end;
 
-class procedure TCefRTTIExtension.Register(const name: ustring; const value: TValue; SyncMainThread: Boolean);
+class function TCefRTTIExtension.Register(const name: ustring; const value: TValue; SyncMainThread: Boolean) : boolean;
 var
   TempCode    : ustring;
   TempHandler : ICefv8Handler;
 begin
+  try
     TempHandler := TCefRTTIExtension.Create(value, SyncMainThread);
     TempCode    := format('this.__defineSetter__(''%s'', function(v){native function $s();$s(v)});' +
                           'this.__defineGetter__(''%0:s'', function(){native function $g();return $g()});',
                           [name]);
 
-  CefRegisterExtension(name, TempCode, TempHandler);
+    Result := CefRegisterExtension(name, TempCode, TempHandler);
+  finally
+    TempHandler := nil;
+  end;
 end;
 
 {$IFDEF CPUX64}

update_CEF4Delphi.json

@@ -2,7 +2,7 @@
   "UpdateLazPackages" : [
     {
       "ForceNotify" : true,
-      "InternalVersion" : 27,
+      "InternalVersion" : 28,
       "Name" : "cef4delphi_lazarus.lpk",
       "Version" : "76.1.13.0"
     }