проблема с пользовательским электронным заголовком, когда nodeIntegration: false

Я пытаюсь использовать 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: навигатор не определен: это может не выполняться в основном процессе. Основной процесс предназначен для управления процессом визуализации. В основном процессе Electron не будет никакого навигатора. А навигатор - это свойство браузера. Средство визуализации отвечает за отображение кода в browserWindow. Таким образом, вы можете получить доступ к навигатору браузера в рендерере, а не в главном. Поэтому, пожалуйста, переместите это в свой рендерер, где вы хотите настроить строку заголовка.

Но как сохранить 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

Как решить проблему?


electron custom-titlebar
person Raphael10    schedule 04.03.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно создать собственный электронный заголовок в процессе рендеринга, потому что он должен изменить содержимое страницы, отображаемой BrowserWindow, где он добавит пользовательскую панель заголовка, которая ведет себя как собственная.

Поскольку из соображений безопасности рекомендуется отключать nodeIntegration, все это следует делать в сценарии предварительной загрузки.

Обратите внимание, что пользовательской электронной панели заголовка также требуется доступ к удаленному модулю, который вы можете предоставить, установив enableRemoteModule на true в веб-настройках BrowserWindow.

Для вас может быть проще, если вы просто взглянете на рабочий пример использования custom-electron-titlebar: https://github.com/timlg07/custom-electron-titlebar-minimal-example

person timlg07    schedule 05.03.2021
comment
В настоящее время я уже использую скрипт предварительной загрузки в своем приложении Electron для безопасной связи IPC между процессом рендеринга и основным процессом. И по тем же соображениям безопасности мне нужно оставить для параметра enableRemoteModule значение false. - person Raphael10; 07.03.2021
comment
Тогда вам придется либо рискнуть безопасностью и использовать библиотеку как есть, либо изменить ее так, чтобы ее можно было использовать без удаленного модуля. (Или вообще не используйте библиотеку и живите с заголовком по умолчанию/создайте собственное решение.) - person timlg07; 07.03.2021