Khoa Pham
Khoa Pham
Feb 18 · 2 min read

I use electron.js for my many desktop apps. One of them is PushNotification which is very helpful for testing push notifications in iOS and Android apps.

It works well until I package it, I can’t copy and paste using hot keys anymore. It turns out that this is due to electron-packager that I use. After running electron-packager, the app does not accept copy, paste anymore. This is because the release build does not have menu with key binding to the clipboard by default. We can solve this by manually declaring the menu.

Menu in electron.js

Menu component in electron is for native application menus and context menus. It is is only available in the main process, but you can also use it in the render process via the remote module. Depending on the platform, macOS has a completely different style of application menu from Windows and Linux.

Menu exposes accelerator, which are Strings that can contain multiple modifiers and a single key code, combined by the +character, and are used to define keyboard shortcuts throughout your application.

Accelerator is very useful for supporting Keyboard shortcuts. You can use the Menu module to configure keyboard shortcuts that will be triggered only when the app is focused. To do so, specify an accelerator property when creating a MenuItem.

Manually recreating Menu

Take a look at main.js in electron.js app where I need to create the menu manually.

// https://pracucci.com/atom-electron-enable-copy-and-paste.html
function createMenu() {
const application = {
label: "Application",
submenu: [
{
label: "About Application",
selector: "orderFrontStandardAboutPanel:"
},
{
type: "separator"
},
{
label: "Quit",
accelerator: "Command+Q",
click: () => {
app.quit()
}
}
]
}
...
}

After these changes, the packaged app has proper support for hot keys.

Push Notifications app

You can follow the discussion on GitHub for more information https://github.com/onmyway133/blog/issues/67

Fantageek

Simple apps that make sense

Khoa Pham

Written by

Khoa Pham

My apps https://onmyway133.github.io/

Fantageek

Fantageek

Simple apps that make sense

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade