第3章：Electron的核心概念(2)-CSDN博客

本文链接：https://blog.csdn.net/imdeity/article/details/139990467

3.4 预加载脚本

预加载脚本在渲染进程加载前执行，允许在渲染器上下文中暴露自定义 API，并提供与主进程安全通信的桥梁。使用预加载脚本可以提高应用的安全性，尤其是在启用了 contextIsolation 的情况下。

3.4.1 创建预加载脚本

预加载脚本在 webPreferences 中指定。以下是一个简单的预加载脚本示例：

示例代码

preload.js：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (message) => ipcRenderer.send('message', message),
  onMessage: (callback) => ipcRenderer.on('reply', (event, args) => callback(args))
});

主进程：

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

let mainWindow;

const createWindow = () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')  // 指定预加载脚本
    }
  });

  mainWindow.loadFile('index.html');
};

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

渲染进程：

<!DOCTYPE html>
<html>
  <head>
    <title>IPC Example with Preload</title>
  </head>
  <body>
    <h1>Check the console</h1>
    <script>
      window.electronAPI.sendMessage('Hello from renderer');
      window.electronAPI.onMessage((message) => {
        console.log(message); // 输出 'Hello from main'
      });
    </script>
  </body>
</html>

通过使用预加载脚本，你可以确保在

渲染进程中暴露的 API 是受控且安全的。这种方法特别适用于在启用了 contextIsolation 时，确保主进程与渲染进程之间的通信安全。

3.5 进程间通信（IPC）

IPC 是主进程和渲染进程之间进行通信的重要机制。Electron 提供了 ipcMain 和 ipcRenderer 模块来实现进程间通信。

3.5.1 ipcMain 模块

ipcMain 模块在主进程中使用，用于接收渲染进程发送的消息并进行处理。

示例代码

const { ipcMain } = require('electron');

ipcMain.on('message', (event, arg) => {
  console.log(arg); // 输出 'Hello from renderer'
  event.reply('reply', 'Hello from main');
});

3.5.2 ipcRenderer 模块

ipcRenderer 模块在渲染进程中使用，用于发送消息到主进程和接收主进程的回复。

示例代码

<!DOCTYPE html>
<html>
  <head>
    <title>IPC Example</title>
  </head>
  <body>
    <h1>Check the console</h1>
    <script>
      const { ipcRenderer } = require('electron');

      ipcRenderer.send('message', 'Hello from renderer');

      ipcRenderer.on('reply', (event, arg) => {
        console.log(arg); // 输出 'Hello from main'
      });
    </script>
  </body>
</html>

3.6 使用 contextBridge 提高安全性

在启用了 contextIsolation 的情况下，可以使用 contextBridge 模块来暴露安全的 API 给渲染进程。这可以防止渲染进程直接访问 Node.js 的功能，从而提高安全性。

3.6.1 contextBridge 示例

使用 contextBridge 将安全的 API 暴露给渲染进程。

示例代码

preload.js：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (message) => ipcRenderer.send('message', message),
  onMessage: (callback) => ipcRenderer.on('reply', (event, args) => callback(args))
});

主进程：

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

let mainWindow;

const createWindow = () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true  // 启用上下文隔离
    }
  });

  mainWindow.loadFile('index.html');
};

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

渲染进程：

<!DOCTYPE html>
<html>
  <head>
    <title>Context Bridge Example</title>
  </head>
  <body>
    <script>
      window.electronAPI.sendMessage('Hello from renderer');
      window.electronAPI.onMessage((message) => {
        console.log(message); // 输出 'Hello from main'
      });
    </script>
  </body>
</html>

通过本章内容，你已经了解了 Electron 的核心概念，包括主进程和渲染进程的角色与功能、预加载脚本的使用、以及如何通过 IPC 进行进程间通信，并且在启用 contextIsolation 时，使用 contextBridge 提高应用的安全性。在接下来的章节中，我们将深入探讨如何实现更多高级功能和最佳实践，帮助你进一步掌握 Electron 开发。