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?

Fetiparous

Answer 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.

Filia

Answer 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.

Orvilleorwell

Answer 3

You can set productName to your app name in the package.json of your app.

Inflationary

Please do not add images. Take at the best practices described here about how to ask a question – Gilleod

@Gilleod to be fair I think images help a lot in questions and answers, I think where they don't help is if you're taking a picture of code you're trying to get help with, though even then it can be called for sometimes. Where the pics aren't helpful is if you give them without context or if the pic itself doesn't add context to the question or answer. I would also say the pic isn't necessarily adding value here, the rest of the text in their answer does enough, but yeah, u wouldn't make a blanket no-pics suggestion personally. – Fetiparous

@Gilleod and the only reason I take the time to write that out is bc hello world seems like a new user so it's worth pointing out the nuance – Fetiparous

the picture didn't solve the problem either. – Stilwell

Answer 4

If you really need this in dev you can simply edit the file node_modules/electron/dist/Electron.app/Contents/Info.plist change the value below CFBundleName

<key>CFBundleName</key>
<string>Works Like a Charm</string>

Additionally you can install patch-package

npm i -D patch-package

Then

patch-package electron

this will generate patch which will take your changes and save in ./patches

add the prepare script to your package.json

{
   "scripts": {
     "prepare": "patch-package"
   }
}

thats how I dealt with my case

Stomy

Answer 5

You can set the name by adding title to the options you pass, when creating the BrowserWindow or use the instance method win.setTitle("My App"). The default value for that is Electron (Source)

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

    // ...
}

Scholem

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