How to send (emulate) keybinding to webContents in electron?

Question

I'm building electron application that makes a desktop interface for a website. On the website, I already have registered keybindings, like Shift+? that shows the table of all available keybindings.

I have to create an app menu of actions that correspond to the keybindings. Technically, when a user clicks on a menu item, it should trigger the keybinding on a webpage. Example:

When user press Help on the menu → Shift+? keybinding is being triggered → webpage detects keypress → webpage shows the table of all registered keybindings appears.

The problem is that I can't send the Shift+? keybinding to the webContents. These attempts are failing:

webContents.sendInputEvent({type:'char', keyCode: 'Shift+?' });
webContents.sendInputEvent({type:'keydown', keyCode: 'Shift+?' });
webContents.sendInputEvent({type:'keyup', keyCode: 'Shift+?'});

How can I force the webpage to perform an action based on specific keybinding (a.k.a send keybinding to the webpage)?

UPD: I've found out few details. The order of events should be keyDown, char, keyUp. I made a handy function for sending keybindings:

function sendKeybinding(win, keyCode) {
  win.webContents.sendInputEvent({ type: 'keyDown', keyCode });
  win.webContents.sendInputEvent({ type: 'char', keyCode });
  win.webContents.sendInputEvent({ type: 'keyUp', keyCode });
}

The MenuItem that uses this might look like this:

{
  label: 'Show Keymap',
  accelerator: ['Shift+/', '?'],
  click(menuItem, browserWindow) {
    sendKeybinding(browserWindow, '?');
  },
}

Also, there is a hatch in a case with Shift+?: ? can be entered only with Shift pressed, so actually, there is a two accelerators Shift+/ and ?.

However, I still don't know how to enter the keybinding like CmdOrControl+B.

Have you tried using the `modifiers` property of argument object? Like `modifiers = []; modifiers.push('shift'); sendInputEvents({type: 'keyDown', modifiers, keyCode}) ` — pergy, Nov 22 '17 at 06:15

pergy · Accepted Answer · 2017-12-05T09:57:13.603

Additionally to the event order you found out, you can use the modifiers property of sendInputEvents argument to send shift/ctrl/alt etc. modifiers with the key input. See docs for further details

With the following code HTML can detect the shortcut you want:

main.js

const {app, BrowserWindow, Menu} = require('electron')
const path = require('path')

function sendKeybinding (win, keyCode) {
  let modifiers = []
  modifiers.push('shift') // 'control', 'meta', etc.
  win.webContents.sendInputEvent({ type: 'keyDown', modifiers, keyCode })
  win.webContents.sendInputEvent({ type: 'char', modifiers, keyCode })
  win.webContents.sendInputEvent({ type: 'keyUp', modifiers, keyCode })
}

app.on('ready', function () {
  let win = new BrowserWindow()
  win.loadURL(path.resolve(__dirname, 'keybind.html'))
  const menuTemplate = [
    {
      label: 'Show Keymap',
      click (menuItem, browserWindow) {
        sendKeybinding(browserWindow, '?')
      }
    }
  ]
  const menu = Menu.buildFromTemplate(menuTemplate)
  Menu.setApplicationMenu(menu)
})

keybind.html

<html>
<body>
<p id="demo">Pressed Key: </p>
<script>
document.onkeypress = function (event) {
  var elem = document.getElementById("demo")
  elem.innerHTML = 'Pressed Key: ' + event.key
  if (event.shiftKey) elem.innerHTML += ' + Shift '
  if (event.ctrlKey) elem.innerHTML += ' + Ctrl '
  if (event.metaKey) elem.innerHTML += ' + Win/Cmd '
}
</script>
</body>
</html>

Seems like it works for `Shift`. However, how can I handle `Cmd` keypress? — denysdovhan, Nov 22 '17 at 17:36
It's going to map to [`event.metaKey`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey) on html side, so add modifier `meta` (but i don't have mac, cannot test) — pergy, Nov 23 '17 at 15:12
@pergy i need ctrl+wheel, but replacing the 2nd input with 'mouseWheel' event doesn't work, any possible reasons? (already changed modifiers Shift -> Ctrl) — Dee, May 12 '22 at 15:31
@Dee you may miss event properties like delta, canscroll etc. See possible properties [here](https://www.electronjs.org/docs/latest/api/structures/mouse-wheel-input-event) — pergy, May 13 '22 at 07:05

How to send (emulate) keybinding to webContents in electron?

1 Answers1