pascal/CEF4Delphi
1
0
Fork 0
mirror of https://github.com/salvadordf/CEF4Delphi.git synced 2024-11-24 08:02:15 +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
Show Stats 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);

10
demos/Lazarus/JavaScript/JSExtension/JSExtension.lps
View File

@ -22,8 +22,8 @@
<ResourceBaseClass Value="Form"/>
<IsVisibleTab Value="True"/>
<EditorIndex Value="1"/>
<TopLine Value="173"/>
<CursorPos X="17" Y="207"/>
<TopLine Value="303"/>
<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"/>

4
demos/Lazarus/JavaScript/JSExtension/uJSExtension.lfm
View File

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

60
demos/Lazarus/JavaScript/JSExtension/uJSExtension.pas
View File

@ -58,7 +58,8 @@ const
MINIBROWSER_SHOWTEXTVIEWER = WM_APP + $100;
MINIBROWSER_CONTEXTMENU_SETJSEVENT = MENU_ID_USER_FIRST + 1;
MINIBROWSER_CONTEXTMENU_JSVISITDOM = MENU_ID_USER_FIRST + 2;
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 INTFLOG}
{$IFDEF DEBUG}
GlobalCEFApp.LogFile := 'debug.log';
GlobalCEFApp.LogSeverity := LOGSEVERITY_INFO;
{$ENDIF}
@ -345,8 +349,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;
@ -373,7 +378,10 @@ end;
procedure TJSExtensionFrm.Chromium1ContextMenuCommand(Sender: TObject;
const browser: ICefBrowser; const frame: ICefFrame;
const params: ICefContextMenuParams; commandId: Integer;
eventFlags: Cardinal; out Result: Boolean);
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(
'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;

7
source/uCEFMiscFunctions.pas
View File

@ -376,10 +376,11 @@ function CefRegisterExtension(const name, code: ustring; const Handler: ICefv8Ha
var
TempName, TempCode : TCefString;
begin
if (GlobalCEFApp <> nil) and
if (GlobalCEFApp <> nil) and
GlobalCEFApp.LibLoaded and
(length(name) > 0) and
(length(code) > 0) then
(GlobalCEFApp.ProcessType = ptRenderer) and
(length(name) > 0) and
(length(code) > 0) then
begin
TempName := CefString(name);
TempCode := CefString(code);

18
source/uCEFv8Handler.pas
View File

@ -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
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]);
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}

2
update_CEF4Delphi.json
View File

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