Electron中preload.js导入dialog返回undefined，如何正确暴露API到渲染进程？

问题原因 #

Electron的API按适用环境分为三类：主进程专属、渲染进程专属、两类进程都可用。dialog、inAppPurchase都属于主进程专属API，只能在主进程代码中直接导入使用，preload脚本运行在渲染进程的隔离上下文环境，自然无法导入这些API，和上下文隔离本身没有关系。

当前Electron版本已移除不安全的remote模块，所有主进程API的跨进程调用都需要通过IPC（进程间通信）实现，这也是官方唯一推荐的安全实现方式。

具体实现步骤 #

1. 主进程代码配置 #

首先在主进程中监听渲染进程的IPC调用，执行dialog相关逻辑：

// 主进程 main.js
const { app, BrowserWindow, dialog, ipcMain } = require('electron')
const path = require('path')

let mainWindow
function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 配置preload脚本路径
      preload: path.join(__dirname, 'preload.js'),
      // 保持默认配置即可，不需要修改
      contextIsolation: true,
      nodeIntegration: false
    }
  })

  mainWindow.loadFile('index.html')
}

// 监听渲染进程发来的show-error-box事件
ipcMain.on('show-error-box', (event, title, content) => {
  dialog.showErrorBox(title, content)
})

app.whenReady().then(() => {
  createWindow()
})

2. preload脚本配置 #

通过contextBridge暴露封装好的方法给渲染进程，方法内部负责向主进程发送IPC消息：

// preload.js
import { contextBridge, ipcRenderer } from 'electron'

contextBridge.exposeInMainWorld('electron', {
  showErrorDialog: (title, content) => {
    ipcRenderer.send('show-error-box', title, content)
  }
})

如果需要获取主进程API的返回值（比如调用文件选择对话框需要拿到用户选择的文件路径），可以用ipcRenderer.invoke搭配ipcMain.handle实现异步返回：

// 示例：带返回值的调用
// preload.js 中新增
showOpenDialog: (options) => ipcRenderer.invoke('show-open-dialog', options)

// 主进程 main.js 中新增
ipcMain.handle('show-open-dialog', async (event, options) => {
  const result = await dialog.showOpenDialog(mainWindow, options)
  return result.filePaths
})

3. 渲染进程调用 #

渲染进程直接调用preload暴露的全局方法即可：

// 渲染进程代码
window.electron.showErrorDialog('错误提示', '操作失败，请重试')

// 带返回值的调用示例
const filePaths = await window.electron.showOpenDialog({ properties: ['openFile'] })

安全注意事项 #

• 不要直接把ipcRenderer的完整方法暴露给渲染进程，必须封装成具体的业务方法，避免恶意代码调用任意IPC接口发起攻击
• 所有从渲染进程传递到主进程的参数都要做合法性校验，避免参数注入攻击

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