February 25, 2022
Implementing keyboard shortcuts in electron
DURATION
13mincategories
Tags
share
When we use our native desktop applications, utilizing keyboard shortcuts is second nature. For example, when we use any word processor, like Microsoft Word, then commands like ctrl+b, ctrl+i, and many more make our work a lot easier. So it’s obvious that when we make apps we should give our users these shortcuts as well.
Today we will be learning how to create such shortcuts for your apps.
Set up a sample project in the following way.
Install node on your system
Run
npm init -yto initialize node projectRun
npm i –save-dev electron nodemonto install Electron and nodemonPut these scripts in the package.json file.
1 2 3 4"scripts": { "start": "electron .", "watch": "nodemon --exec electron ." },
Create index.html and index.js
Put the following code in index.html
1 2 3 4 5 6 7 8 9<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html>
Put the following code in index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const {
app,
BrowserWindow
} = require("electron");
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile("index.html");
};
app.whenReady()
.then(() => {
createWindow();
});
Run
npm run watch
There are two kinds of shortcuts you can add to the app.
Local shortcuts
Global shortcuts
Local Shortcuts
These shortcuts can be triggered only when the application is in focus. These are made by providing an accelerator property to the MenuItems. Menu items are what you see present in the top left corner of your app window.
First, let’s see how you create a menu. Import Menu and MenuItem from the Electron module. Or, modify the first line of index.js like this.
const { app, BrowserWindow, Menu, MenuItem } = require('electron')
To create a new menu we use the Menu() constructor.
const menu = new Menu()
Now, we can add as many MenuItems as we want to it.
1 2 3 4 5 6 7menu.append(new MenuItem({ label: 'Electron', submenu: [{ role: 'message', label: 'Show message' }] }))
Now we tell our electron app to use this menu.
Menu.setApplicationMenu(menu)
If you run the app you will see the menu works fine.
Now let’s add a shortcut to it.
Modify the MenuItem like this.
1
2
3
4
5
6
7
8
9
10
11
menu.append(new MenuItem({
label: 'Electron',
submenu: [{
role: 'message',
label: 'Show message',
accelerator: process.platform === 'darwin' ? 'Alt+Cmd+I' : 'Alt+Shift+I',
click: () => {
console.log('Electron rocks!')
}
}]
}))
We have added a key called ‘accelerator’ which tells us the shortcut keys which are different for Mac (Apple’s operating system) and non-Mac machines. The click function tells its functionality. Now open the app and press Alt+Shift+I. You shall see the following in your terminal.
Our local shortcut works!
Global Shortcuts:
Let’s see how you set up global shortcuts, which can be triggered even when your app is not in focus. Be careful with these as you can accidentally give commands to your app even when it’s not in focus.
We need the globalShortCut module to use these shortcuts.
Modify the first statement of your index.js like this.
const { app, BrowserWindow, globalShortcut } = require('electron')
Now let’s define the global shortcuts. We use the register() method to set these shortcuts, which takes two methods. One is the key combination and the other is the function that executes when the combo is pressed. Modify the app.whenReady() function like this.
1
2
3
4
5
6
7
app.whenReady()
.then(() => {
globalShortcut.register('Alt+CommandOrControl+I', () => {
console.log('Electron loves global shortcuts!')
})
})
.then(createWindow)
Now save the file and press Alt+Ctrl+i or Alt+Cmd+i, depending on your machine, and you will see that this works even when the window is not in focus.
