Electron.js创建带是/否按钮确认弹窗的调用异常排查

• 内置dialog模块是Electron主进程专属API，直接在渲染进程引入electron包解构拿dialog，拿到的必然是undefined。
• 直接访问electron.remote报错，是因为Electron 14及之后版本默认移除了内置remote模块，没有手动安装配置的情况下remote本身不存在，自然无法读取其下的dialog属性。
• 第三方npm的dialog包是通用系统简易弹窗工具，并非Electron生态适配包，本身就不支持自定义是/否按钮、区分按钮点击和窗口关闭事件的能力，无法满足需求。

官方推荐的安全实现方式是通过IPC通信，让主进程负责弹窗调用，渲染进程只负责发请求和拿结果，不需要开启高风险的remote权限。

1. 主进程代码（main.js） #

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

let mainWindow
function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true // 开启上下文隔离，是Electron默认推荐的安全配置
    }
  })
  mainWindow.loadFile('index.html')

  // 注册IPC处理函数，响应渲染进程的弹窗请求
  ipcMain.handle('show-confirm', async (_, content, title) => {
    const result = await dialog.showMessageBox(mainWindow, {
      type: 'question',
      title: title || '操作确认',
      message: content,
      buttons: ['是', '否'], // 按钮顺序对应返回值的response索引
      defaultId: 0, // 默认聚焦“是”按钮
      cancelId: 1 // 点击窗口关闭按钮时，返回的索引值，和“否”按钮保持一致
    })
    return result.response === 0
  })
}

app.whenReady().then(createWindow)

2. 预加载脚本（preload.js） #

const { contextBridge, ipcRenderer } = require('electron')
// 把安全的调用方法暴露给渲染进程
contextBridge.exposeInMainWorld('appAPI', {
  openConfirm: (content, title) => ipcRenderer.invoke('show-confirm', content, title)
})

3. 渲染进程调用 #

// 页面业务逻辑中调用
const confirmBtn = document.querySelector('#action-btn')
confirmBtn.addEventListener('click', async () => {
  const isAgree = await window.appAPI.openConfirm('确定要执行当前操作吗？')
  if (isAgree) {
    // 点击“是”的业务逻辑
    console.log('用户确认操作')
  } else {
    // 点击“否”/关闭弹窗的业务逻辑
    console.log('用户取消操作')
  }
})

非必要不推荐的remote实现方式：remote模块会直接开放主进程能力给渲染进程，存在明显安全风险，如果一定要用，需要先安装@electron/remote依赖，在主进程完成初始化和对应窗口的权限开启后，才能在渲染进程通过require('@electron/remote').dialog调用弹窗API。

内容的提问来源于stack exchange，提问作者The Flaming Man