1

我正在尝试使用 custom-electron-titlebar ：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 : "This can't be executed in main process.main process is for manage the renderer process. Electron main process不会有任何navigator。而navigator是浏览器的属性。渲染器负责将代码渲染到浏览器窗口。因此您可以在渲染器而不是主渲染器访问浏览器窗口的导航器。因此，请将其移至您要自定义标题栏的渲染器。"

但是，如果出现错误，如何将 customTitlebar 保留在渲染器进程中require is not defined？

  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

  • 电子：v 12.0.0
  • 节点：v 14.5.0
  • 操作系统：Ubuntu 18.04 桌面

如何解决问题？

4

1 回答 1

0

您需要在渲染器进程中创建自定义电子标题栏，因为它需要更改 BrowserWindow 显示的页面内容，它将添加一个行为类似于原生标题栏的自定义标题栏。

由于出于安全原因建议您禁用nodeIntegration，您应该在预加载脚本中执行所有这些操作。

请注意，custom-electron-titlebar 还需要访问远程模块，您可以通过在 BrowserWindow 的 webPreferences 中设置enableRemoteModule来提供该模块。true

如果您只看一下正在使用的 custom-electron-titlebar 的工作示例，对您来说可能会更容易：https ://github.com/timlg07/custom-electron-titlebar-minimal-example

于 2021-03-05T21:17:16.723 回答