Electron启用上下文隔离后，通过contextBridge暴露ipcRenderer却出现window.electron未定义的问题求助

兄弟，我刚看完你的问题，这其实是个很多Electron新手都会踩的上下文隔离坑！先给你拆解原因，再给你解决方案：

核心原因：Preload脚本的上下文和渲染主世界是隔离的 #

你在preload.js里用contextBridge.exposeInMainWorld暴露的electron对象，是给渲染进程的主页面上下文用的，而preload脚本本身运行在一个独立的隔离上下文里——也就是说，preload里的window和你渲染页面（index.html）里的window根本不是同一个对象！

所以你在preload的DOMContentLoaded回调里打印window.electron，自然会显示undefined，但这其实不代表暴露失败了，只是你在错误的上下文里查看而已。

怎么验证暴露是否成功？ #

你需要在你的渲染页面（也就是dist/frontend-installers/index.html）里添加一段脚本，直接在页面的上下文里查看：

<!-- 在index.html的body末尾添加 -->
<script>
window.addEventListener('DOMContentLoaded', () => {
  console.log('渲染页面里的window.electron:', window.electron);
  // 试试调用ipcRenderer的方法，比如：
  // window.electron.ipcRenderer.send('test-message', 'hello from renderer');
});
</script>

打开DevTools的控制台，你就能看到这个打印出来的electron对象了，这才是正确的验证方式。

额外的安全建议（可选但推荐） #

Electron官方不建议直接暴露整个ipcRenderer对象，因为这样可能会带来安全风险。更好的做法是只暴露你实际需要用到的方法，比如invoke、send、on这些，在preload.js里改成这样：

if (process.contextIsolated) {
  try {
    contextBridge.exposeInMainWorld('electron', {
      // 只暴露需要的方法
      ipcInvoke: (channel, data) => ipcRenderer.invoke(channel, data),
      ipcSend: (channel, data) => ipcRenderer.send(channel, data),
      ipcOn: (channel, listener) => ipcRenderer.on(channel, listener)
    });
    console.log("ipcRenderer方法暴露成功!");
  } catch (error) {
    console.error("暴露ipcRenderer方法出错:", error);
  }
}

这样既满足了功能需求，又遵循了Electron的安全最佳实践。

再确认一下你的配置 #

你的main.js里的webPreferences配置是对的：nodeIntegration: false和contextIsolation: true，这是Electron推荐的安全配置，不用改。

总结一下：preload里的window和渲染页面的window不是同一个，别在preload里验证暴露结果，去渲染页面里看就对了！

备注：内容来源于stack exchange，提问作者Ahmad Irshad