由于 contextIsolation 发生变化，在电子渲染器进程中向 Web 应用程序发送命令

Posted 2023-03-22

【中文标题】由于 contextIsolation 发生变化，在电子渲染器进程中向 Web 应用程序发送命令

【英文标题】：Sending commands to the web app in electron renderer process since contextIsolation changes

【发布时间】：2022-01-07 12:13:57

【问题描述】：

我了解 contextIsolation 更改是出于安全目的而引入的，并且我了解了 contextBridge，它向渲染器进程中运行的 web 应用程序公开自定义 API，以便 web 应用程序可以控制正在其中运行的电子应用程序。

电子预加载脚本

const contextBridge = require("electron").contextBridge;
contextBridge.exposeInMainWorld("electronApi", 
  'doSomething' : function () 
     // some code to execute
  
);

网络应用

window.electronApi.doSomething();

这很清楚，我明白为什么要这样做。

但是，我不明白通信如何以另一种方式工作，那么电子如何执行网络应用程序命令？让我们看下面的例子，网络应用程序定义了 window.someWebAppMethod 并且电子应该执行它

网络应用

window.someWebAppMethod = function () 
  // do somehing web app related

电子预加载脚本

window.someWebAppMethod()

^^ 这不起作用，因为 contextIsolation 是 contextIsolation 的重点，但我仍然需要有某种方式从电子触发 Web 应用程序命令。最明显的原因是假设我有一个带有标记为“打开快速跳转”的命令的电子主菜单，它应该告诉渲染进程中加载​​的网络应用程序执行方法，该方法将显示网络应用程序的“快速跳转”功能。

也许我遗漏了一些非常明显的东西，但我仍然希望能得到任何帮助。

谢谢

【问题讨论】：

在Q & A 中，我展示了主进程和渲染器进程之间的 IPC 通信示例，包括主进程直接与渲染器进程对话。由于主进程拥有渲染器 BrowserWindow 实例，因此它可以使用它来访问其 WebContents 并以这种方式向渲染器发送消息。

【参考方案1】：

我找到了一种方法。不确定它是否明显或是否足够安全，但这里是：

电子预加载脚本

const contextBridge = require("electron").contextBridge;

let doSomethingInWebApp = null;

contextBridge.exposeInMainWorld("electronApi", 
  'exposeDoSomethingInWebApp' : function (callback) 
     doSomethingInWebApp = callback;
  
);

网络应用

if (window.electronApi && window.electronApi.exposeDoSomethingInWebApp) 
  window.electronApi.exposeDoSomethingInWebApp(function () 
    // execute whatever you need to execute in webapp
  );

电子预加载脚本

if (doSomethingInWebApp) 
  // execute previously defined custom behavior in web app
  doSomethingInWebApp();

所以它很简单，而且很有效。