【Electron开发者必看】揭秘Electron预加载脚本，提升应用性能与安全性！什么是Electron预加载脚本？

什么是Electron预加载脚本？

在Electron应用开发中，预加载脚本（Preload Script）是一个非常重要的概念。它允许你在渲染进程（web页面）和主进程之间创建一个安全的桥梁。预加载脚本运行在Node.js环境中，但位于渲染进程的上下文中，这使得它具有比普通渲染器更高的权限.

预加载脚本的作用

预加载脚本主要有以下几个关键作用：

1. 访问Node.js API

预加载脚本可以访问Node.js API，这意味着你可以在网页内容中使用Node.js的功能，例如文件系统操作、网络请求等.

2. 安全交互

由于预加载脚本运行在一个隔离的环境中，它可以安全地与网页内容交互，避免了直接暴露Node.js API给渲染进程的安全风险.

3. 暴露自定义API

通过预加载脚本，你可以使用contextBridge模块将自定义API暴露给渲染进程，这样网页内容就可以调用这些API来执行特定的操作.

如何使用预加载脚本

要使用预加载脚本，你需要在Electron的BrowserWindow配置中指定预加载脚本文件。以下是一个简单的示例：

// main.js

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

let mainWindow;

function createWindow() {
    // 创建浏览器窗口
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            preload: path.join(__dirname, 'preload.js'), // 指定预加载脚本
            devTools: true,
        },
    });

    // 加载应用的 HTML 文件
    mainWindow.loadFile('index.html');

    // 当窗口关闭时，释放窗口对象
    mainWindow.on('closed', () => {
        mainWindow = null;
    });
}

// Electron 初始化完成后创建窗口
app.whenReady().then(() => {
    createWindow();

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

// 当所有窗口都关闭时退出应用（macOS 上的行为不同）
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

在preload.js文件中，你可以写入以下代码来暴露自定义API：

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

contextBridge.exposeInMainWorld('myAPI', {
    sendMessage: (message) => ipcRenderer.send('message', message),
    receiveMessage: (callback) => ipcRenderer.on('message', callback),
});

contextBridge.exposeInMainWorld('versions', {
    node: () => process.versions.node,
    chrome: () => process.versions.chrome,
    electron: () => process.versions.electron,
    // 除函数之外，我们也可以暴露变量
});

renderer.js

function showMessage() {
    document.getElementById(
        'content'
    ).innerText = `本应用正在使用 Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), 和 Electron (v${versions.electron()})`;
}

showMessage();

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Electron Demo</title>
    </head>
    <body>
        <!-- <button onclick="readFile()">Read File</button> -->
        <div id="content"></div>

        <script src="./renderer.js"></script>
    </body>
</html>

总结

Electron预加载脚本提供了一种安全、高效的方式来扩展你的网页应用的功能。通过正确地使用预加载脚本，你可以充分利用Node.js和Electron的能力，构建出功能强大且安全的桌面应用程序.