Delphi 10.4.1 及更高版本的 TEdgeBrowser：如何捕获 F12 (OpenDevToolsWindow)？

Question

我在 Delphi 10.4.1 中使用TEdgeBrowser。效果很好。

唯一令人烦恼的问题是，当TEdgeBrowser 获得焦点时，它会抓取 F12 和 CTRL+SHIFT+C 并显示 OpenDevToolsWindow。这很好，除了我想在加载之前更改表单的一些最顶层属性（否则，DevTools 窗口将位于 MainForm 后面）。

有没有办法从父 MainForm 捕获 F12 ？我尝试过 Application 和 MainForm 键捕获，但都无法捕获 TEdgeBrowser 键事件（当 TEdgeBrowser 具有焦点时）。

procedure TMainForm.ApplicationEvents1Message(var Msg: tagMSG;
  var Handled: Boolean);
begin
  case Msg.Message of
    WM_KEYDOWN, WM_KEYUP:
      begin
      if Msg.WParam = VK_F11 then
         begin
         SetStatusLog(EID_KEYPRESS,'F11');
         Handled := true;
         end
      else if Msg.WParam = VK_F12 then
         begin
{ do something here and consider F12 handled, preventing F12 from going to TEdgeBrowser???}
         SetStatusLog(EID_KEYPRESS,'F12');
         Handled := true;
         end;
      end;
  end;
end;

还有其他方法可以解决这个问题吗？

另外，我可以通过编程方式启动 OpenDevToolsWindow 吗？

Answer 1

我使用了两种方法来处理这个问题。 (1) 您可以调用 Set_AreBrowserAcceleratorKeysEnabled(0) 来禁用浏览器的加速键（但这可能包括禁用比您想要的更多的功能，这并不是您真正要求的。）并且它需要一些额外的工作才能访问此界面，因为它不包含在当前的 TEdgeBrowser 中。此外，我在某处读到 AcceleratorKey 事件仍然会触发，即使您在 EdgeBrowser 中禁用它们，所以如果您使用该方法，您可以处理它们。 (2) 使用 AddScriptToExecuteOnDocumentCreated 注入一些可以阻止默认行为的 Javascript（如果需要）并向您的应用发送消息（您将在 OnWebMessageReceived 上获取）以便您可以处理事件。

选项 1：

您需要定义以下内容才能访问您需要的接口，因为它们是在 TEdgeBrowser 之后引入的：

const
  IID_ICoreWebview2Settings2: TGUID = '{EE9A0F68-F46C-4E32-AC23-EF8CAC224D2A}'; //Introduced: SDK  1.0.864.35
  IID_ICoreWebview2Settings3: TGUID = '{FDB5AB74-AF33-4854-84F0-0A631DEB5EBA}'; //Introduced: SDK  1.0.864.35

type
  ICoreWebView2Settings2 = interface(ICoreWebView2Settings)
    ['{EE9A0F68-F46C-4E32-AC23-EF8CAC224D2A}']
    function Get_UserAgent(out UserAgent: PWideChar): HResult; stdcall;
    function Set_UserAgent(UserAgent: PWideChar): HResult; stdcall;
  end;

  ICoreWebView2Settings3 = interface(ICoreWebView2Settings2)
    ['{FDB5AB74-AF33-4854-84F0-0A631DEB5EBA}']
    function Get_AreBrowserAcceleratorKeysEnabled(out AreBrowserAcceleratorKeysEnabled: Integer): HResult; stdcall;
    function Set_AreBrowserAcceleratorKeysEnabled(AreBrowserAcceleratorKeysEnabled: Integer): HResult; stdcall;
  end;

然后在你的 OnCreateWebViewCompleted 事件中你可以做

var
  Settings3: ICoreWebView2Settings3;
  HR: HRESULT;
begin
  Sender.SettingsInterface.QueryInterface(IID_ICoreWebView2Settings3, Settings3);
  if Assigned(Settings3) then
  begin
    HR := Settings3.Set_AreBrowserAcceleratorKeysEnabled(0);
    if not SUCCEEDED(HR) then
      {Do something - Set_AreBrowserAcceleratorKeysEnabled failed};
  end
  else
    {Do something - ICoreWebView2Settings3 interface not found.};
  end;  

选项 2：

在您的 OnCreateWebViewCompleted 事件中，您可以执行以下操作

const
  JavaScript =
    '  document.addEventListener(''keydown'', function(event){' + sLineBreak +
    '    if (event.code == "F12") {' + sLineBreak +
    '      Result = "#KEY_EVENT#" + event.code;' + sLineBreak +
    '      event.preventDefault();' + sLineBreak +
    '      window.chrome.webview.postMessage(Result);' + sLineBreak +
    '    };' + sLineBreak +
    '  });'; 

{...}                                                                       
begin
  Sender.DefaultInterface.AddScriptToExecuteOnDocumentCreated(JavaScript,
    Callback<HResult, PChar>.CreateAs<ICoreWebView2AddScriptToExecuteOnDocumentCreatedCompletedHandler>(
    function(ErrorCode: HResult; Id: PWideChar): HResult stdcall
    begin
      if not(Succeeded(ErrorCode)) then
        {Do something if this function failed.  It gets called later when a document id created.  Or you can pass nil for the Callback};
      Result := 1;
    end));

注意，在选项 2 中，请参阅 TEdgeBrowser 代码作为定义回调的示例。它在 TEdgeBrowser 的实现部分中定义。我只是在我自己表单的单元实现部分中复制了它。

Answer 2

@stackman

我似乎无法使用推荐的解决方案，因为它需要更改页面代码。我想将 EdgeBrowser 指向任何站点，并且仍然可以控制按键。

procedure TForm1.Button1Click(Sender: TObject);
{$J+}
const
  STEP: integer = 1;
var
 Js: string;
begin
  case STEP of
    1: web.CreateWebView;
    2: web.Navigate('https://stackoverflow.com/questions/70089520/tedgebrowser-for-delphi-10-4-1-and-later-how-to-trap-f12-opendevtoolswindow?noredirect=1#comment123929534_70089520');
    3: begin //Step 2 must have finished!
         Js := Concat('aaa = new Object; ',
                      'aaa.Message = function(Msg) ',
                      '{ ',
                      '   alert(Msg); ',
                      '}');
                      //DevTools-->Console: type aaa
                      web.ExecuteScript(Js);

        end;
     else
        begin
          Js := 'aaa.Message("Hallo Welt!")';
          web.ExecuteScript(Js);
        end;
   end;
   STEP := STEP + 1;
 end;

Console Source