electron - nodeIntegration :false 时的自定义 Electron 标题栏问题

Question

我正在尝试使用自定义 Electron 标题栏:https://github.com/AlexTorresSk/custom-electron-titlebar#readme .当我放入渲染器进程时:

import customTitlebar from 'custom-electron-titlebar'; 
        _getTitleBar() {
            return new customTitlebar.Titlebar({
                backgroundColor: customTitlebar.Color.fromHex('#333'),
            });
} 

我收到错误 require is not defined
当我移动主进程中的所有内容时 main.ts :

import customTitlebar from 'custom-electron-titlebar'
ipcMain.on("customTitlebar-from-A", (event, args) => {
  let titlebar = new customTitlebar.Titlebar({
    backgroundColor: customTitlebar.Color.fromHex('#333'),
  });
  WindowTypeA.webContents.send("customTitlebar-to-A", { titlebar });
 });

我收到错误: navigator is not defined .
搜索我找到了这个答案:
ElectronJS ReferenceError: navigator is not defined :
“这不能在主进程中执行。主进程用于管理渲染器进程。Electron主进程不会有任何导航器。导航器是浏览器的属性。
渲染器负责将代码渲染到 browserWindow。因此，您可以在非主渲染器上访问 browserWindow 的导航器。
因此，请将其移至您想要自定义标题栏的渲染器。 "
但是，如果我收到错误 require is not defined，如何将 customTitlebar 保留在渲染器进程中?

  WindowTypeA = new BrowserWindow({
    width: 800,
    height: 600,
    titleBarStyle: "hidden",
    webPreferences: {
      nodeIntegration: false,
      enableRemoteModule: false,
      contextIsolation: true,
      nodeIntegrationInWorker: false,
      nodeIntegrationInSubFrames: false,
      webSecurity: true,
      webviewTag: false,
      preload: path.join(__dirname, "./preload/preload.js"), /* eng-disable PRELOAD_JS_CHECK */
    }

出于安全原因，我必须保留 nodeIntegration:false和 contextIsolation: true

Electron :v 12.0.0

节点:v 14.5.0

操作系统:Ubuntu 18.04 桌面

如何解决问题？

Answer 1

您需要在渲染器进程中创建自定义 Electron 标题栏，因为它需要更改 BrowserWindow 显示的页面内容，它将添加一个行为类似于原生标题栏的自定义标题栏。
出于安全原因，建议您禁用 nodeIntegration ，您应该在预加载脚本中完成所有这些操作。
请注意，custom-electron-titlebar 还需要访问远程模块，您可以通过设置 enableRemoteModule 来提供该模块。至true在 BrowserWindow 的 webPreferences 中。
如果您只看一下正在使用的自定义 Electron 标题栏的工作示例，对您来说可能会更容易:https://github.com/timlg07/custom-electron-titlebar-minimal-example