Electron - 将自定义事件从 Menu 发送到渲染器

Question

I stumbled across a problem that I had a lot of problem finding documentation for while creating an Electron app. This is a Question / Answer on how to have a custom Electron menu item communicate with the application frontend.

Please let me know if this kind of post is useful or if some parts need to be elaborated.

---

For one of my apps I wanted my frontend to display pictures inside a directory. When the user clicks on his right arrow key I want to go to the next picture. I wanted this behavior to be handled by the inbuilt Electron Menu Accelerator .

I have built my app separating my main.js from my menu templates like so:

app
├── main.js
├── renderer.js
├── index.html
├── templates
        ├── menu.js => uses objects from picture.js and about.js to build & return a menu
        ├── picture.js
        ├── about.js
├── ... (rest of files)

My picture.js looked something like this:

const picture = {
    label: 'Picture',
    role: 'help',
    submenu: [
      {
        label: 'Previous',
        accelerator: 'Left',
        click: function() {
            // this needs to be figured out
        },
      },
      {
        label: 'Next',
        accelerator: 'Right',
        click: function() {
            // this needs to be figured out
        },
      }
    ],
}

exports.picture = picture;

My gut-feeling told me to fiddle around with ipcMain , but this approach just didn't work. I got a lot of messages saying that ipc is not defined or that the method send of undefined would not work.

Here is how I managed to solve my problem:

Answer 1

What we know: For communication between the Menu and the frontend, we need to create an event in main.js . And it is main.js that will send an event to renderer.js .

What we found while searching: It is possible to send messages from the main process to the renderer process using webContents.send

How to apply it: We need 'app' (the application object) to be called and 'emit' an event. This is why we had to change the 'picture' object to being a function taking one argument: app.

const fileMenu = () => {
  return {
    label: 'Picture',
    role: 'help',
    submenu: [
      {
        label: 'Previous',
        accelerator: 'Left',
        click: () => app.emit('prevPicture'),
      },
      {
        label: 'Next',
        accelerator: 'Right',
        click: () => app.emit('nextPicture'),
      }
    ],
  }
}

exports.fileMenu = fileMenu;

And then we just need to add the argument in main:

// LOTS OF CODE ...
// mainWindow is the name of the Electron BrowserWindow object that holds our menu and app

app.on('ready', function() {
  const template = new AppMenu([fileMenu(app), editMenu, windowMenu, aboutMenu]).getTemplate();
  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);
  createWindow();
});

// OTHER CODE ...
app.on('prevPicture', () => {mainWindow.webContents.send('prevPicture');});
app.on('nextPicture', () => {mainWindow.webContents.send('nextPicture');});

// REST OF CODE ...

This allows us to use a simple ipc.on('prevPicture', () => doWhatever) in our renderer.js file and create custom keyboard shortcuts that will affect the frontend in Electron.