CODEWITHSUNDEEP
electron
Chris Schmitz
Chris Schmitz

Reputation: 20980

Unable to override app name on mac os electron menu

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:

screenshot of menus not set

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?

Upvotes: 31

Views: 15887

Answers (5)

Michał Grzegorzewski
Michał Grzegorzewski

Reputation: 489

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>

enter image description here

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

Upvotes: 3

Hello world
Hello world

Reputation: 61

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

enter image description here

Upvotes: 5

RoyalBingBong
RoyalBingBong

Reputation: 1129

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'
    })

    // ...
}

Upvotes: -4

Harsh Vakharia
Harsh Vakharia

Reputation: 2194

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.

Upvotes: 58

Tim Mickey
Tim Mickey

Reputation: 361

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.

Upvotes: 8

Related Questions