Electron中preload.js使用contextBridge后如何在其他文件调用暴露方法

你通过contextBridge暴露的hello方法已经挂载到渲染进程的全局window对象下，直接在渲染进程侧的业务代码中调用即可，完整的操作流程如下：

1. 先确认preload配置生效 #

首先要保证你创建BrowserWindow的主进程代码中，已经正确配置了preload和必要的安全参数，这是contextBridge生效的前提：

const { BrowserWindow } = require('electron')
const path = require('path')

const mainWindow = new BrowserWindow({
  // 其他窗口配置...
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'), // 此处路径要和你preload.js的实际存放路径匹配
    contextIsolation: true, // 必须开启，Electron 12+ 版本已经默认开启
    nodeIntegration: false // 建议关闭，符合Electron安全规范
  }
})

2. 渲染进程中调用hello方法 #

所有运行在渲染进程上下文的代码（包括页面内嵌脚本、Vue/React等前端框架的业务代码、单独引入的JS文件），都可以直接调用window.api.hello()触发消息发送。
举个绑定到按钮点击的示例：

<button id="sendBtn">发送消息</button>
<script>
document.getElementById('sendBtn').addEventListener('click', () => {
  window.api.hello()
  console.log('hi-there 消息已发送到主进程')
})
</script>

可选：TypeScript项目类型补充 #

如果你的项目用了TypeScript，需要添加全局类型声明避免类型报错，在项目类型声明文件（比如src/global.d.ts）中添加如下内容：

export {}
declare global {
  interface Window {
    api: {
      hello: () => void
    }
  }
}

注意事项 #

• 该方法仅能在渲染进程中调用，主进程不需要通过该方式发IPC消息
• 不要手动关闭contextIsolation配置，否则会导致contextBridge失效，无法获取到window.api对象

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