pascal/CEF4Delphi
1
0
Fork 0
mirror of https://github.com/salvadordf/CEF4Delphi.git synced 2025-06-12 22:07:39 +02:00
Code Issues Actions Releases Activity

Improved debug info in JS extension demos

Browse Source 
Removed mutation observer from the JSRTTIExtension demo
This commit is contained in:
Salvador Díaz Fau
2019-09-12 11:40:52 +02:00
parent f6973112aa
commit 8b948745ef
9 changed files with 163 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
demos/Delphi_VCL/JavaScript/JSExtension/uJSExtension.pas
View File

@ -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,27 +281,31 @@ var
TempExtensionCode : string;
TempHandler : ICefv8Handler;
begin
// 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
TempExtensionCode := 'var myextension;' +
'if (!myextension)' +
' myextension = {};' +
'(function() {' +
' myextension.mouseover = function(a) {' +
' native function mouseover();' +
' mouseover(a);' +
' };' +
' myextension.sendresulttobrowser = function(b,c) {' +
' native function sendresulttobrowser();' +
' sendresulttobrowser(b,c);' +
' };' +
'})();';
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
TempExtensionCode := 'var myextension;' +
'if (!myextension)' +
' myextension = {};' +
'(function() {' +
' myextension.mouseover = function(a) {' +
' native function mouseover();' +
' mouseover(a);' +
' };' +
' myextension.sendresulttobrowser = function(b,c) {' +
' native function sendresulttobrowser();' +
' sendresulttobrowser(b,c);' +
' };' +
'})();';
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 INTFLOG}
{$IFDEF DEBUG}
GlobalCEFApp.LogFile := 'debug.log';
GlobalCEFApp.LogSeverity := LOGSEVERITY_INFO;
{$ENDIF}
@ -341,8 +345,9 @@ procedure TJSExtensionFrm.Chromium1BeforeContextMenu(Sender: TObject;
begin
// Adding some custom context menu entries
model.AddSeparator;
model.AddItem(MINIBROWSER_CONTEXTMENU_SETJSEVENT, 'Set mouseover event');
model.AddItem(MINIBROWSER_CONTEXTMENU_JSVISITDOM, 'Visit DOM in JavaScript');
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(
'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
')', 'about:blank', 0);
begin
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))}'+
')';
browser.MainFrame.ExecuteJavaScript(TempJSCode, 'about:blank', 0);
end;
MINIBROWSER_CONTEXTMENU_JSVISITDOM :
if (browser <> nil) and (browser.MainFrame <> nil) then
browser.MainFrame.ExecuteJavaScript(
'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
'about:blank', 0);
begin
TempJSCode := 'var testhtml = document.body.innerHTML; ' +
'myextension.sendresulttobrowser(testhtml, ' + quotedstr(CUSTOMNAME_MESSAGE_NAME) + ');';
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;

4
demos/Delphi_VCL/JavaScript/JSRTTIExtension/uJSRTTIExtension.dfm
View File

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

84
demos/Delphi_VCL/JavaScript/JSRTTIExtension/uJSRTTIExtension.pas
View File

@ -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(
'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 uTestExtension.pas
')', 'about:blank', 0);
begin
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 uTestExtension.pas
')';
browser.MainFrame.ExecuteJavaScript(TempJSCode, 'about:blank', 0);
end;
MINIBROWSER_CONTEXTMENU_JSVISITDOM :
if (browser <> nil) and (browser.MainFrame <> nil) then
browser.MainFrame.ExecuteJavaScript(
'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 uTestExtension.pas
'about:blank', 0);
begin
// This is the call from JavaScript to the extension with DELPHI code in uTestExtension.pas
TempJSCode := 'var testhtml = document.body.innerHTML; ' +
'myextension.sendresulttobrowser(testhtml, ' + quotedstr(CUSTOMNAME_MESSAGE_NAME) + ');';
MINIBROWSER_CONTEXTMENU_MUTATIONOBSERVER :
// This MutatioObserver is based on this example https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
// 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
// the "value" attribute to Delphi.
// Delphi receives the the information in the Chromium1ProcessMessageReceived procedure and shows it in the status bar.
if (browser <> nil) and (browser.MainFrame <> nil) then
browser.MainFrame.ExecuteJavaScript(
'var targetNode = document.getElementById(' + quotedstr(ELEMENT_ID) + ');' +
'var config = { attributes: true, childList: false, subtree: false };'+
'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);
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;
@ -289,13 +291,7 @@ 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;
end;
procedure TJSRTTIExtensionFrm.FormShow(Sender: TObject);