CODEWITHSUNDEEP
electroncustom-titlebar
Raphael10
Raphael10

Reputation: 3096

custom-electron-titlebar issue when nodeIntegration:false

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

How to solve the problem?

Upvotes: 1

Views: 1519

Answers (1)

timlg07
timlg07

Reputation: 626

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

Upvotes: 0

Related Questions