Unable to override app name on mac os electron menu

Question

I'm banging my head against the wall on this one. I'm trying to override the name of a demo electron app to give it a custom name instead of just Electron. I created a module for doing this:

const {app, Menu} = require('electron')

const template = [
    {
        label: 'New Name',
        submenu:[
            {
                label: 'Test',
                click: (menuItem, browserWindow, event) => {
                    console.log('menu item clicked')
                }
            },
            {role: 'quit'}
        ]
    },
    {
        label: 'test test',
        submenu:[
            {
                label: 'Test',
                click: (menuItem, browserWindow, event) => {
                    console.log('menu item clicked')
                }
            },
            {role: 'quit'}
        ]
    }
]

installApplicationMenu = function (){
    const menu = Menu.buildFromTemplate(template)
    let result = Menu.setApplicationMenu(menu)
}


module.exports = {
    installApplicationMenu
}

And I'm invoking this module after creating my window:

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

const {installApplicationMenu} = require('./MenuInstaller')


require('electron-reload')(__dirname,{
    electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
})

let win


function createWindow(){
    win = new BrowserWindow({
        width: 800,
        height: 600
    })

    win.loadURL(
        url.format({
            pathname: path.join(__dirname, 'index.html'),
            protocol: 'file:',
            slashes: true
        })
    )

    win.on('closed', () => {
        win = null
    })

}

app.on('ready', function (){
    createWindow()
    installApplicationMenu()
})


app.on('activate', () => {
    if(win === null) createWindow()
})

When I do this the second menu set gets it's custom name of test test but the main menu name is still Electron:

I've been comparing the code to a different app I created where I was able to override the default name and I can't spot what's keeping the override from working in this case.

Any ideas?

Solution 1

When you run your application in development environment using;

./node_modules/.bin/electron main.js

or

electron main.js

You are actually running a prebuilt electron executable that runs file specified by you. So in this case, the OS will display the name under which the application was built and packaged.

If you wish to change it, you need to package it. i.e. build your own distributable package. And to do this, there is an awesome package electron-builder

So install it;

npm install --save-dev electron-builder

And then build the package;

./node_modules/.bin/build -m

Don't forget to set productName in package.json. It will be displyed in the menu on macOS, for example.

-m is for macOS.

And you'll see packages in /dist directory. However, If you have a custom application format, it may fail to build, so refer to README or wiki for details about application structure.

Solution 2

I'm just getting back into Electron after not using it for nearly 2 years. From what I remember, you can't change the app name unless you package the app. Try something like this electron packager: https://github.com/electron-userland/electron-packager.

Comments

[bobbyrne01]

this sets the name of aBrowserWindow, not the app menu name on os x