I'm trying make a custom titlebar on electron. But when i started my app, i take "ReferenceError: navigator is not defined" issue. Please help. This is the code snippet from my main.js

My Codes

// 1. Require the installed module
const customTitlebar = require('custom-electron-titlebar');
// 2. Create the custom titlebar with your own settings
//    To make it work, we just need to provide the backgroundColor property
//    Other properties are optional.
let MyTitleBar = new customTitlebar.Titlebar({ backgroundColor: customTitlebar.Color.fromHex('#03a9f4')});

I'm trying make a custom titlebar on electron. But when i started my app, i take "ReferenceError: navigator is not defined" issue. Please help. This is the code snippet from my main.js

My Codes

// 1. Require the installed module
const customTitlebar = require('custom-electron-titlebar');
// 2. Create the custom titlebar with your own settings
//    To make it work, we just need to provide the backgroundColor property
//    Other properties are optional.
let MyTitleBar = new customTitlebar.Titlebar({ backgroundColor: customTitlebar.Color.fromHex('#03a9f4')});

• javascript
• electron
• custom-titlebar

• lmk where you import this custom-electron-titlebar – tpikachu Commented Jan 17, 2020 at 17:50
• in main.js m8 :. – Valor Commented Jan 18, 2020 at 21:26
• please use this at your renderer – tpikachu Commented Jan 20, 2020 at 10:47
• your main process is just for managing the renderer process. there is no navigator at main – tpikachu Commented Jan 20, 2020 at 10:47

1 Answer 1

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.

This will be working very well.