custom-electron-titlebar ReferenceError: navigator is not defined

Question

When I try to do custom-electron-titlebar in index.js, I get an error.

my index.js code :

    const { app, BrowserWindow } = require('electron');
    const customTitlebar = require('custom-electron-titlebar');
    var path = require('path');

    let mainWindow;

    function onClosed() {
    mainWindow = null;
}
app.on('ready', () => {

    mainWindow = new BrowserWindow({
        width: 350,
        height: 210,
        frame: false
    })
    new customTitlebar.Titlebar({
        backgroundColor: customTitlebar.Color.fromHex('#444')
    });

    customTitlebar.setTitle('asd')

    mainWindow.setMenuBarVisibility(false)
    mainWindow.loadURL(`file:\\${__dirname}\\index.html`)
    mainWindow.on('closed', onClosed)
});

if i run this i get this error :

ReferenceError: navigator is not defined
at Object.<anonymous> (<mypath>\node_modules\custom- 
electron-titlebar\lib\browser\browser.js:130:19)
at Module._compile (internal/modules/cjs/loader.js:968:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:986:10)
at Module.load (internal/modules/cjs/loader.js:816:32)
at Module._load (internal/modules/cjs/loader.js:728:14)
at Module._load (electron/js2c/asar.js:717:26)
at Function.Module._load (electron/js2c/asar.js:717:26)
at Module.require (internal/modules/cjs/loader.js:853:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (D:\Programing\Projects\ElectronProjects\Calculator\node_modules\custom- 
electron-titlebar\lib\common\dom.js:7:17)

i imported "custom-electron-titlebar", but its not working.

Answer 1

navigator is a browser API that is only available in the Renderer process. You're calling require('custom-electron-titlebar') from the Main process, which doesn't have access to that API.

You'd have to run the import the library from your Renderer process or add it in an HTML script tag, as per the Usage docs of custom-electron-titlebar .

For more information on the Electron process model, you can check out the docs .

The main process creates web pages by creating BrowserWindow instances. Each BrowserWindow instance runs the web page in its own renderer process. When a BrowserWindow instance is destroyed, the corresponding renderer process is also terminated.

The main process manages all web pages and their corresponding renderer processes. Each renderer process is isolated and only cares about the web page running in it.

In web pages, calling native GUI related APIs is not allowed because managing native GUI resources in web pages is very dangerous and it is easy to leak resources. If you want to perform GUI operations in a web page, the renderer process of the web page must communicate with the main process to request that the main process perform those operations.