TNotes.electron

Appearance

0002. 使用 contextBridge 暴露 API 给渲染进程

0002. 使用 contextBridge 暴露 API 给渲染进程 ​

1. 📝 概述 ​

  • 学会在开启 contextIsolation 的情况下，使用 contextBridge 来给渲染进程暴露 Electron API，使用系统的原生能力。

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

javascript
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)
javascript
const { contextBridge, ipcRenderer } = require('electron')

const TdahuyouAPI = {
  showNotification: (opts) => {
    // { title: string, body: string, ... }
    ipcRenderer.send('TdahuyouPlugin-showNotification', {
      body: opts.body,
      title: opts.title,
    })
  },
  // other apis ...
}

if (process.contextIsolated) {
  contextBridge.exposeInMainWorld('TdahuyouPlugin', TdahuyouAPI)
} else {
  window.TdahuyouPlugin = TdahuyouAPI
}

/* 
if (process.contextIsolated) {
  contextBridge.exposeInMainWorld('TdahuyouPlugin', TdahuyouAPI)
} else {
  window.TdahuyouPlugin = TdahuyouAPI
}

这部分代码最终会将 TdahuyouAPI 暴露给渲染进程
相当于执行了 window.TdahuyouPlugin = TdahuyouAPI
可以在渲染进程中通过 window.TdahuyouPlugin 调用我们封装的 TdahuyouAPI
*/
html
<!DOCTYPE html>
<html>
  <head>
    <title>Plugin Demo</title>
  </head>
  <body>
    <h1>
      通过 contextBridge
      实现上下文桥接，让你可以在渲染进程中间接地访问主进程模块
    </h1>

    <button id="btn">Show Notification</button>

    <script>
      console.log('window.TdahuyouPlugin:', window.TdahuyouPlugin)
      document.getElementById('btn').addEventListener('click', () => {
        TdahuyouPlugin.showNotification({
          title: '提示的标题',
          body: '提示的内容',
        })
      })
    </script>
  </body>
</html>
  • 开启上下文隔离之后，Electron API 将只在预加载脚本 preload.js 中可用，在渲染进程 index.html 中不可用。
  • 哪些 API 需要暴露给渲染进程，统一在 preload.js 中定义。
  • 暴露的方式，其实就是丢到渲染进程的全局变量 window 身上：
    • 下面这是控制台的打印结果：
    • 图 0
  • 参考链接：
  • 最终效果
    • 图 0
    • 图 1
    • 图 2
    • 点击页面上的按钮【Show Notification】后，会在桌面右上角弹出提示窗。
    • 这个提示 Notification 是系统级别的，只能在主进程访问此 API。
    • 该示例通过上下文桥接的方式，将 API 的调用暴露给渲染进程，并绑定鼠标点击事件，当页面上的按钮被点击之后，触发消息通知。

Discussions