Electron Global Shortcut alternative without reserving the key

Question

How can i capture keypress in Electron without globalShortcut and without losing the key functionality. For example i want to capture Tab press but without losing it's ability to indent for example in visual studio code.

I use Electron 13.0 because if i use higher some required modules don't work.

I tried iohook but throws iohook.node module not found. I think it doens't have support for Electron 13 yet.

Anyone ideea how can i do accomplish this? Thank you !

savageGoat · Answer 1 · 2022-10-05T22:18:55.803

Electron can be a bit of a headache when it comes to communicate between the window and the main process, and for good reason: Security.

However, this problem has two solutions:

Not recommended: plain ipcRenderer required with { nodeIntegration: true } and window.electron in index.html, that can cause a lot of trouble, don't do that, you give access to the user to all nodejs functions, like fs, child_process, ...
Recomended: preload. Preload makes the bridge between the process and the window allowing you to pick what you want to share with the window, in this case, ipcRenderer without the whole electron access.

Read more about Electron secuity here

First, create a preload.js to pass scope isolated ipcRenderer.send function to the window

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

const exposedAPI = {
  sendMessage: (message) => {
    ipcRenderer.send('my-event', string);
  }
};


contextBridge.exposeInMainWorld("electron", exposedAPI);

More about contextBridge here

In the main electron script

// main.js
const { ipcRenderer } = require('electron');

...

const window = new BrowserWindow({
    ...
    preload: 'my/preload/path/preload.js', // Here preload is loaded when the window is created
})

...

ipcRenderer.on('my-event', (string) => {
     // do struff with string
});

Great full example here

Finally, the window where you want to capture the event from without changing the behaviour

// index.html or your-script.js
document.addEventListener('keydown', (evt) => { // keyup, keydown or keypress
    window.electron.exposedAPI.sendMessage('key was pressed');
});

Electron Global Shortcut alternative without reserving the key

1 Answers1