Electron in Practice: Registering Shortcuts

Preface

This article introduces how to register keyboard shortcuts in an Electron app.

Main Process

Registering shortcuts in the main process is straightforward — just make sure to do it after app ready.

Common key mappings: https://www.electronjs.org/docs/latest/api/accelerator

// Register
globalShortcut.register(shortcutKey, shortcutCallback);

// Unregister
globalShortcut.unregister(shortcutKey);

Also, remember to clean up all registered shortcuts when the app quits.

app.on('will-quit', () => {
  globalShortcut.unregisterAll();
});

Renderer Process

Registering shortcuts in the renderer process is a bit more involved.

An npm package has been created for this — feel free to use it: https://code.insistime.com/#/qiao-x-shortcut

Initialize IPC Listener in the Main Process

import { shortcutIPCInit } from 'qiao-x-shortcut';

shortcutIPCInit({
  shortcutCallbackName: () => console.log('shortcutCallbackName from main process'),
});

Preload Setup

shortcut-preload.js

// electron
import { ipcRenderer } from 'electron';

/**
 * shortcutGlobalIPC
 * @returns res
 */
export const shortcutGlobalIPC = async (shortcutKey, shortcutCallbackName) => {
  return await ipcRenderer.invoke('ipc-shortcut-global', shortcutKey, shortcutCallbackName);
};

preload.js

// electron
import { contextBridge } from 'electron';

// custom preload
import { shortcutGlobalIPC } from './shortcut-preload.js';

// preload
contextBridge.exposeInMainWorld('electron', {
  shortcutGlobalIPC,
});

Calling from the Renderer Process

await window.electron.shortcutGlobalIPC('Command+Control+X', 'shortcutCallbackName');

Result

After registering the shortcut Command+Control+X in the renderer process,

the effect is as follows — each time the shortcut is pressed, the main process logs a message:

shortcutCallbackName from main process
shortcutCallbackName from main process
shortcutCallbackName from main process