使用 contextBridge 暴露 API 给渲染进程

1. 本节内容

这一节将介绍如何在开启 contextIsolation 的情况下，使用 contextBridge 来给渲染进程暴露 Electron API，使用系统的原生能力。

2. demos.1 - 使用 contextBridge 暴露 API 给渲染进程

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

let win
function createWindow() {
  win = new BrowserWindow({
    webPreferences: {
      // contextIsolation: true,
      // 这里可以省略 contextIsolation 字段，因为它的默认值就是 true。

      preload: join(__dirname, 'preload.js'),
    },
  })

  win.loadFile('index.html')

  ipcMain.on('TdahuyouPlugin-showNotification', (_, { title, body }) => {
    if (Notification.isSupported()) {
      const notification = new Notification({ title, body })
      notification.show()
    }
  })
}

app.whenReady().then(createWindow)

开启上下文隔离之后，Electron API 将只在预加载脚本 preload.js 中可用，在渲染进程 index.html 中不可用。
哪些 API 需要暴露给渲染进程，统一在 preload.js 中定义。
暴露的方式，其实就是丢到渲染进程的全局变量 window 身上：
- 下面这是控制台的打印结果：
- 图 0
参考链接：
- https://www.electronjs.org/zh/docs/latest/api/context-bridge
  - 查看渲染进程模块 contextBridge 的相关描述。
- https://www.electronjs.org/zh/docs/latest/api/structures/web-preferences
  - 查看 WebPreferences 配置的数据结构。
最终效果
- 图 0
- 图 1
- 图 2
- 点击页面上的按钮【Show Notification】后，会在桌面右上角弹出提示窗。
- 这个提示 Notification 是系统级别的，只能在主进程访问此 API。
- 该示例通过上下文桥接的方式，将 API 的调用暴露给渲染进程，并绑定鼠标点击事件，当页面上的按钮被点击之后，触发消息通知。

Discussions

正在载入评论…