RAD Studio 10.4.1 new Chromium-based Microsoft Edge browser's TEdgeBrowser control usage

1. TEdgeBrowser installation and deployment instructions

1.1, TEdgeBrowser use environment installation

TWebBrowser uses the IE browser provided by the operating system before Win10; as long as IE is installed on Windows, it will work.
Microsoft Edge was not yet part of the operating system component. Therefore, it needs to be installed on the computer before it can be used.
Chromium-based Microsoft Edge browser (Canary channel version WebView2 SDK, Dev channel version) downloaded from https://www.MicrosoftEdgeInsider.com/cn/download.
The WebView2 control is currently available through NuGet on https://www.nuget.org/packages/Microsoft.Web.WebView2 or through the GetIt package manager.
If it fails to install, please use my Baidu version below:
link: https ://pan.baidu.com/s/16U7t-yRMHaz19cO0m6rgJg
Extraction code: 8191
Copy this content and open Baidu Netdisk --Share from Baidu Netdisk V6 Super Member Karma

(Please refer to: https://github.com/webview/webview/tree/master/dll/x86 )

1.2. Installation of the dynamic link library that TEdgeBrowser relies on

After installation, TEdgeBrowser will work, and its controls will render Web content in the UI:

1. Installation: Need to install the Microsoft installation package of WebView2: 64-bit, 32-bit
2. Installation: Microsoft Edge browser development version: MicrosoftEdgeDev
3. It will be divided into two sets of files, x86 and x64: webview.dll and WebView2Loader.dll, Copy them to: C:\Windows\System32 and C:\Windows\SysWOW64
4. Install the following 3. Two files (x86 I installed):
regsvr32 /i WebView2Loader.dll
regsvr32 /i webview.dll
5. Copy files :
Copy the two x86 files in 4. to: [Delphi10.4Update1 installation folder]\bin\.

Second, the use of TEdgeBrowser under delphi 10.4.1

1. Very simple browsing application

https://chromedevtools.github.io/devtools-protocol/tot/

https://chromium.googlesource.com/chromium/src/+log/master/third_party/blink/renderer/core/inspector/browser_protocol.json

1.1. Output content and introduction:


默认开始初始化(UI设计时的)EdgeBrowser1或初始化动态产生的TEdgeBrowser
LICoreWebView2接口TGUID:{189B8AAF-0426-4748-B9AD-243F537EB46B}
EdgeBrowser浏览器内部执行的进程ID必须放在其事件中取引用>0的,否则访问的是其基础进程ID(0):0
窗体加载TEdgeBrowser组件时就完成了WebView2组件的初始化

必须EdgeBrowser1.WebViewCreated,否则接口调用报错!
有这样一些接口:
DefaultInterface: ICoreWebView2
ControllerInterface: ICoreWebView2Controller
EnvironmentInterface: ICoreWebView2Environment
SettingsInterface: ICoreWebView2Settings

TEdgeBrowser:支持异步产生WebView控件：
有这样一些方法:
TEdgeBrowser.CreateWebView
TEdgeBrowser.CloseWebView
TEdgeBrowser.CloseBrowserProcess

EdgeBrowser浏览器内部执行的进程ID必须放在其事件中取引用:12504

TEdgeBrowser需要初始化一些参数,以使一些方法或接口生效:

    EdgeBrowser1.BuiltInErrorPageEnabled :=true; //:替代了浏览器内部错误提示
    EdgeBrowser1.ZoomControlEnabled :=true; //:控制用户是否可以影响WebView的缩放
    EdgeBrowser1.DevToolsEnabled :=true; //:控制用户是否能够使用上下文菜单或键盘快捷键打开DevTools窗口

    EdgeBrowser1.StatusBarEnabled :=false;//:控制是否显示状态栏
    EdgeBrowser1.DefaultContextMenusEnabled :=true;//:控制是否在WebView中向用户显示默认上下文菜单
      //:若false:则网页代码中所有涉及Menu的事件将被屏蔽
{
    EdgeBrowser1.DefaultScriptDialogsEnabled :=true;//:控制在显示JavaScript对话框时是否启动OnScriptDialogOpening
    EdgeBrowser1.ScriptEnabled :=true;//:控制是否在以后的所有导航视图中启用JavaScript的执行
      //:特别注意:这两个属性:只要引用无论false或true,
        //,网页下载的原生js将不在生效:由代码控制
//}
EdgeBrowser1.WebMessageEnabled :=true;

开始访问TEdgeBrowser的接口对象0
调用JavaScript也是类似的方式ExecuteScript()

成功浏览网页

TEdgeBrowser组件在执行Navigate时,触发开始浏览网页！

TEdgeBrowser组件NavigationID:2,SizeRatio1
:正在调取页面内容https://www.cpuofbs.com/main.html

TEdgeBrowser组件CapturePreview输出呈现部分的图片:CapturePreview01.png ,AResult=0

1.2. The code is as follows:

unit uEdgeBrowser01;

interface

uses
  Winapi.Windows, Winapi.Messages,
  System.SysUtils, System.Variants, System.Classes,
  Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs,
  WebView2,
  Winapi.ActiveX, Vcl.Edge, Vcl.StdCtrls, Vcl.Buttons, Vcl.ExtCtrls;

type
  TForm_EdgeBrowser01 = class(TForm)
    EdgeBrowser1: TEdgeBrowser;
    Panel1: TPanel;
    BitBtn_Navigate: TBitBtn;
    Panel2: TPanel;
    Memo1: TMemo;
    BitBtn_CapturePreview: TBitBtn;
    procedure BitBtn_NavigateClick(Sender: TObject);
    procedure EdgeBrowser1NavigationStarting(Sender: TCustomEdgeBrowser;
      Args: TNavigationStartingEventArgs);
    procedure EdgeBrowser1ContentLoading(Sender: TCustomEdgeBrowser;
      IsErrorPage: Boolean; NavigationID: TUInt64);
    procedure EdgeBrowser1CreateWebViewCompleted(Sender: TCustomEdgeBrowser;
      AResult: HRESULT);
    procedure EdgeBrowser1CapturePreviewCompleted(Sender: TCustomEdgeBrowser;
      AResult: HRESULT);
    procedure BitBtn_CapturePreviewClick(Sender: TObject);
    procedure FormCreate(Sender: TObject);
    procedure FormShow(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form_EdgeBrowser01: TForm_EdgeBrowser01;

implementation

{$R *.dfm}

procedure TForm_EdgeBrowser01.FormCreate(Sender: TObject);
var LICoreWebView2:ICoreWebView2;
begin
  Memo1.Lines.Add('默认开始初始化(UI设计时的)EdgeBrowser1或初始化动态产生的TEdgeBrowser');
  GetInterface( StringToGUID('{189B8AAF-0426-4748-B9AD-243F537EB46B}'),LICoreWebView2);
  if LICoreWebView2 = EdgeBrowser1.DefaultInterface then
    Memo1.Lines.Add('LICoreWebView2接口TGUID:'+'{189B8AAF-0426-4748-B9AD-243F537EB46B}' );
  //GUIDToString StringToGUID
end;

procedure TForm_EdgeBrowser01.FormShow(Sender: TObject);
begin
  Memo1.Lines.Add('EdgeBrowser浏览器内部执行的进程ID必须放在其事件中取引用>0的,否则访问的是其基础进程ID(0):'
    +EdgeBrowser1.BrowserProcessID.ToString );
end;

procedure TForm_EdgeBrowser01.BitBtn_NavigateClick(Sender: TObject);
var LHResult_PostWebMessage:HResult;
begin
  if EdgeBrowser1.WebViewCreated then//:必须的,否则接口调用报错:
  begin
    Memo1.Lines.Add('必须EdgeBrowser1.WebViewCreated,否则接口调用报错!'+sLineBreak
      +'有这样一些接口:'+sLineBreak
      +'DefaultInterface: ICoreWebView2'+sLineBreak
      +'ControllerInterface: ICoreWebView2Controller'+sLineBreak
      +'EnvironmentInterface: ICoreWebView2Environment'+sLineBreak
      +'SettingsInterface: ICoreWebView2Settings'+sLineBreak
      );
    Memo1.Lines.Add('TEdgeBrowser:支持异步产生WebView控件：'+sLineBreak
      +'有这样一些方法:'+sLineBreak
      +'TEdgeBrowser.CreateWebView'+sLineBreak
      +'TEdgeBrowser.CloseWebView'+sLineBreak
      +'TEdgeBrowser.CloseBrowserProcess'+sLineBreak
      );
    Memo1.Lines.Add('EdgeBrowser浏览器内部执行的进程ID必须放在其事件中取引用:'
      +EdgeBrowser1.BrowserProcessID.ToString +sLineBreak );
    Memo1.Lines.Add('TEdgeBrowser需要初始化一些参数,以使一些方法或接口生效:' +sLineBreak
      +'EdgeBrowser1.BuiltInErrorPageEnabled :=true;' +sLineBreak
      +'EdgeBrowser1.DefaultContextMenusEnabled :=true;' +sLineBreak
      +'EdgeBrowser1.ZoomControlEnabled :=true;' +sLineBreak
      +'EdgeBrowser1.StatusBarEnabled :=true;' +sLineBreak
      +'EdgeBrowser1.DevToolsEnabled :=true;' +sLineBreak
      +'EdgeBrowser1.DefaultScriptDialogsEnabled :=true;' +sLineBreak
      +'EdgeBrowser1.ScriptEnabled :=true;' +sLineBreak
      +'EdgeBrowser1.WebMessageEnabled :=true;' +sLineBreak
      );

    EdgeBrowser1.BuiltInErrorPageEnabled :=true; //:替代了浏览器内部错误提示
    EdgeBrowser1.ZoomControlEnabled :=true; //:控制用户是否可以影响WebView的缩放
    EdgeBrowser1.DevToolsEnabled :=true; //:控制用户是否能够使用上下文菜单或键盘快捷键打开DevTools窗口

    EdgeBrowser1.StatusBarEnabled :=false;//:控制是否显示状态栏
    EdgeBrowser1.DefaultContextMenusEnabled :=true;//:控制是否在WebView中向用户显示默认上下文菜单
      //:若false:则网页代码中所有涉及Menu的事件将被屏蔽
{
    EdgeBrowser1.DefaultScriptDialogsEnabled :=true;//:控制在显示JavaScript对话框时是否启动OnScriptDialogOpening
    EdgeBrowser1.ScriptEnabled :=true;//:控制是否在以后的所有导航视图中启用JavaScript的执行
      //:特别注意:这两个属性:只要引用无论false或true,
        //,网页下载的原生js将不在生效:由代码控制
//}

    EdgeBrowser1.WebMessageEnabled :=true;//:必须的,否则接口PostWebMessageAsString调用报错:

    LHResult_PostWebMessage
      :=EdgeBrowser1.DefaultInterface.PostWebMessageAsString(
        PWideChar('{ICoreWebView2:true}') ) ;//:0接口函数执行成功 -1失败
    if LHResult_PostWebMessage> -1 then
      Memo1.Lines.Add('开始访问TEdgeBrowser的接口对象'
        +IntToStr(LHResult_PostWebMessage) +sLineBreak
        +'调用JavaScript也是类似的方式ExecuteScript()' +sLineBreak
        );
      //:开始访问TEdgeBrowser的接口对象

    TThread.CreateAnonymousThread(
      procedure
      begin
        TThread.Synchronize( nil,
        procedure //var AHTMLContent: string;
        begin
          //EdgeBrowser1.NavigateToString(AHTMLContent);
          if EdgeBrowser1.Navigate( //:Navigate:如果返回了错误码:=true,否则:=false
            'https://www.cpuofbs.com/main.html' )=false then
          Memo1.Lines.Add('成功浏览网页' +sLineBreak );

        end);
      end
    ).Start;
  end;
end;

procedure TForm_EdgeBrowser01.EdgeBrowser1ContentLoading(
  Sender: TCustomEdgeBrowser; IsErrorPage: Boolean; NavigationID: TUInt64);
begin
  Memo1.Lines.Add('TEdgeBrowser组件NavigationID:'+IntToStr(NavigationID)
    +',SizeRatio'+EdgeBrowser1.SizeRatio.ToString +sLineBreak
    +':正在调取页面内容'+EdgeBrowser1.LocationURL +sLineBreak);
end;

procedure TForm_EdgeBrowser01.EdgeBrowser1CreateWebViewCompleted(
  Sender: TCustomEdgeBrowser; AResult: HRESULT);
begin
  Memo1.Lines.Add('窗体加载TEdgeBrowser组件时就完成了WebView2组件的初始化'+sLineBreak );
end;

procedure TForm_EdgeBrowser01.EdgeBrowser1NavigationStarting(
  Sender: TCustomEdgeBrowser; Args: TNavigationStartingEventArgs);
begin
  Memo1.Lines.Add('TEdgeBrowser组件在执行Navigate时,触发开始浏览网页！'+sLineBreak );
end;

procedure TForm_EdgeBrowser01.BitBtn_CapturePreviewClick(Sender: TObject);
begin
  if EdgeBrowser1.WebViewCreated then
  begin
    EdgeBrowser1.ZoomFactor:=100/100;
    EdgeBrowser1.CapturePreview(
      System.SysUtils.ExtractFilePath(
        System.ParamStr(0))+'CapturePreview01.png',PNG);
  end;

end;

procedure TForm_EdgeBrowser01.EdgeBrowser1CapturePreviewCompleted(
  Sender: TCustomEdgeBrowser; AResult: HRESULT);
begin
  Memo1.Lines.Add('TEdgeBrowser组件CapturePreview输出呈现部分的图片:CapturePreview01.png ,AResult='+IntToStr(AResult)+sLineBreak );
end;


end.

object Form_EdgeBrowser01: TForm_EdgeBrowser01
  Left = 0
  Top = 0
  Caption = 'TEdgeBrowser'#24212#29992'01'
  ClientHeight = 563
  ClientWidth = 533
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  OnCreate = FormCreate
  OnShow = FormShow
  PixelsPerInch = 96
  TextHeight = 13
  object Panel1: TPanel
    Left = 0
    Top = 503
    Width = 533
    Height = 60
    Align = alBottom
    TabOrder = 0
    ExplicitTop = 522
    object BitBtn_Navigate: TBitBtn
      Left = 40
      Top = 6
      Width = 73
      Height = 43
      Caption = #27983#35272#32593#39029
      Font.Charset = GB2312_CHARSET
      Font.Color = clWindowText
      Font.Height = -13
      Font.Name = #24494#36719#38597#40657
      Font.Style = []
      ParentFont = False
      TabOrder = 0
      OnClick = BitBtn_NavigateClick
    end
    object BitBtn_CapturePreview: TBitBtn
      Left = 128
      Top = 6
      Width = 137
      Height = 43
      Caption = #25429#33719#21576#29616#20869#23481#20026#22270#29255
      Font.Charset = GB2312_CHARSET
      Font.Color = clWindowText
      Font.Height = -13
      Font.Name = #24494#36719#38597#40657
      Font.Style = []
      ParentFont = False
      TabOrder = 1
      OnClick = BitBtn_CapturePreviewClick
    end
  end
  object Panel2: TPanel
    Left = 0
    Top = 0
    Width = 533
    Height = 503
    Align = alClient
    Caption = 'Panel2'
    TabOrder = 1
    ExplicitWidth = 704
    ExplicitHeight = 522
    object EdgeBrowser1: TEdgeBrowser
      Left = 1
      Top = 345
      Width = 531
      Height = 157
      Align = alClient
      TabOrder = 0
      OnCapturePreviewCompleted = EdgeBrowser1CapturePreviewCompleted
      OnContentLoading = EdgeBrowser1ContentLoading
      OnCreateWebViewCompleted = EdgeBrowser1CreateWebViewCompleted
      OnNavigationStarting = EdgeBrowser1NavigationStarting
      ExplicitTop = 312
      ExplicitHeight = 190
    end
    object Memo1: TMemo
      Left = 1
      Top = 1
      Width = 531
      Height = 344
      Align = alTop
      Lines.Strings = (
        'Memo1')
      ScrollBars = ssVertical
      TabOrder = 1
    end
  end
end

1.3. Running effect (I don’t want TWebbrowser to support Bootstrap response anymore)

2. Interact with JavaScript

For details, see the next article to continue sharing:

Attachment: Related blog posts of this blog:

1. " Interaction between TEdgeBrowser and javascript of RAD Studio 10.4.1-Chromium-based Edge Browser Control Usage 2 "

2. "Delphi Restful Interaction between Client JavaScript and Middleware Server"