Electron使用menubar库时主进程与渲染进程IPC通信失效如何解决

问题原因及修复方案 #

你的代码存在两个核心问题导致IPC通信失败：

• IPC发送时机错误：你在app的ready事件中发送消息，此时menubar窗口的页面还未完成加载，renderer.js中的ipcRenderer监听逻辑还没注册，消息发送后没有接收方。需要使用menubar实例自带的ready事件，等窗口完全初始化完成后再发消息。
• 渲染进程权限配置缺失：Electron默认关闭nodeIntegration、开启contextIsolation，你直接在渲染进程中用require引入模块会执行失败，ipcRenderer的监听逻辑根本没有运行。需要在menubar配置中补充browserWindow的权限参数。

修复后的完整代码 #

app.js

const { app } = require('electron');
const Menubar = require('menubar');

const menubar = Menubar.menubar({
  index: `file://${__dirname}/index.html`,
  preloadWindow: true,
  icon: './assets/img/icon.png',
  // 新增浏览器窗口配置，开放渲染进程Node相关权限
  browserWindow: {
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  }
});

try {
  require('electron-reloader')(module)
} catch (_) { }

// 替换原有的app.on('ready')，使用menubar的ready事件触发IPC发送
menubar.on('ready', () => {
  // 可选：打开渲染进程控制台方便调试
  // menubar.window.webContents.openDevTools()
  menubar.window.webContents.send('test');
});

renderer.js、index.html

这两个文件的代码无需修改，配置生效后ipcRenderer的监听就能正常运行。

注：如果是生产环境使用，更推荐用preload脚本暴露IPC接口的方案替代直接开启nodeIntegration，安全性更高。

内容的提问来源于stack exchange，提问作者methuselah