1

I'm trying to use custom-electron-titlebar : https://github.com/AlexTorresSk/custom-electron-titlebar#readme . When I put in the renderer process :

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

I get the error require is not defined enter image description here

When I move everything in the main process 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 });
 });

I get the error: navigator is not defined .

Searching I found this answer: ElectronJS ReferenceError: navigator is not defined : "This can't be executed in main process. The main process is for managing the renderer process. There won't be any navigator at Electron main process. And navigator is property of browser. The renderer is responsible to render the code to browserWindow. So you can access the navigator of browserWindow at renderer not main. So please move this to your renderer where you'd like to customize the title bar. "

But how to keep customTitlebar within the renderer process, if I get the error 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 */
    }

For security reasons, I MUST keep nodeIntegration:false and contextIsolation: true

  • Electron: v 12.0.0
  • node: v 14.5.0
  • O.S: Ubuntu 18.04 Desktop

How to solve the problem?

Raphael10
  • 2,508
  • 7
  • 22
  • 50

1 Answers1

0

You need to do the creation of the custom-electron-titlebar in the renderer process because it needs to change the content of the page displayed by the BrowserWindow, where it will add a custom titlebar that behaves like a native one.

As it is recommended for security reasons that you disable nodeIntegration, you should do all of this in a preload script.

Note that the custom-electron-titlebar also needs access to the remote module which you can provide by setting enableRemoteModule to true in the BrowserWindow's webPreferences.

It might be easier for you if you just take a look at a working example of the custom-electron-titlebar in use: https://github.com/timlg07/custom-electron-titlebar-minimal-example

timlg07
  • 547
  • 6
  • 20
  • I'm currently already using preload script within my Electron app for IPC safe communication between renderer process and main process. And for the same security reasons I need to keep enableRemoteModule to false – Raphael10 Mar 07 '21 at 10:08
  • Then you'll have to either take the security risk and use the library as-is or modify it so that it's usable without the remote module. (Or don't use the library at all and live with the default title bar / build your own solution.) – timlg07 Mar 07 '21 at 12:11