【Electron入门】进程环境和隔离

窗口管理 ：创建 / 销毁窗口实例BrowserWindow ，其相当于一个小的EventEmitter ，窗口将在单独的渲染器进程中加载一个网页。窗口中的webContents 代表的是 渲染进程 内部的网页内容（Web 页面），可以执行向++渲染进程通信、网页内容生命周期监听、访问/控制devtools++等

javascript 复制代码

// main.js
const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('https://github.com')

const contents = win.webContents
console.log(contents)

应用程序的生命周期：监听app生命周期、做相应处理

javascript 复制代码

// quitting the app when no windows are open on non-macOS platforms
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

调用api与操作系统交互 ：Electron 有着多种控制原生桌面功能的模块，例如菜单、对话框以及托盘图标。下面举个例子🌰，创建应用菜单！

javascript 复制代码

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

app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadURL('https://example.com');

  // 创建菜单template
  const menuTemplate = [
    {
      label: '文件',
      submenu: [
        { label: '打开文件', click: () => console.log('打开文件') },
        { type: 'separator' }, // 分割线
        { label: '退出', role: 'quit' }
      ]
    },
    {
      label: '编辑',
      submenu: [
        { label: '撤销', role: 'undo' },
        { label: '重做', role: 'redo' },
        { type: 'separator' },
        { label: '剪切', role: 'cut' },
        { label: '复制', role: 'copy' },
        { label: '粘贴', role: 'paste' }
      ]
    }
  ];

  // 设置应用菜单
  const menu = Menu.buildFromTemplate(menuTemplate); //从模版设置菜单实例
  Menu.setApplicationMenu(menu);  // 放入应用菜单
});

2、渲染进程（renderer）

1️⃣ 运行环境：渲染器负责渲染网页内容。所以实际上，运行于++渲染器进程中的代码是须遵照网页web标准++的。

二、预加载脚本

由于主进程和渲染进程的运行环境完全不同，且默认情况下 ，二者无权直接访问互相之间的环境。

所以出现了预加载脚本preload.js作为环境桥梁 ，它包含了那些执行于渲染器进程中，且先于网页内容开始加载的代码，与浏览器共享一个全局window接口 。这些脚本虽运行于渲染器的环境中，却因能访问 Node.js API而拥有了更多的权限。

preload.js++可以部分暴露一些api给对方进程、可以作为通信中转站++等等。

三、沙盒化

当 Electron 中的渲染进程被沙盒化时，它们的行为与常规 Chrome 渲染器一样。一个沙盒化的渲染器不会有一个 Node.js 环境。

附属于沙盒化的渲染进程的 preload 脚本中仍可使用一部分以 Polyfill 形式实现的 Node.js API。

为单个进程禁用沙盒

javascript 复制代码

app.whenReady().then(() => {
  const win = new BrowserWindow({
    webPreferences: {
      sandbox: false
    }
  })
  win.loadURL('https://google.com')
})

全局启用沙盒

app.enableSandbox ：注意，此 API 必须在应用的 ready 事件之前调用

javascript 复制代码

app.enableSandbox()
app.whenReady().then(() => }
  // 因为调用了app.enableSandbox()，所以任何sandbox:false的调用都会被覆盖。
  const win = new BrowserWindow()
  win.loadURL('https://google.com')
})

四、环境访问权限控制：contextIsolation和nodeIntegration

在创建一个browserWindow实例的时候，会配置webPreferences中的字段。

其中有两个字段与渲染进程的访问权限密切相关：contextIsolation 和 nodeIntegration

1、contextIsolation

控制 window 对象是否在独立的 JavaScript 上下文中运行。
默认值：true
如果为true,代表渲染进程在独立的js上下文中。因此preload.js、第三方库都不能直接修改渲染进程中的window全局对象；如果为false，preload.js可以直接通过修改window属性传递值

那么不同设置下，如何借助预加载脚本让主进程与渲染进程通信呢？

🌰启用contextIsolation：true时（默认推荐做法）

main.js

javascript 复制代码

const { BrowserWindow } = require('electron');
const win = new BrowserWindow({
  webPreferences: {
    contextIsolation: true,  // 开启上下文隔离
    preload: 'preload.js'
  }
});

preload.js：利用exposeInMainWorld将属性挂在window对象中

javascript 复制代码

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

contextBridge.exposeInMainWorld('myAPI', {
  sayHello: () => console.log('Hello!')
});

renderer.js

javascript 复制代码

console.log(window.myAPI.sayHello()); // ✅ "Hello!"

🌰不启用contextIsolation：false时

preload.js：可直接篡改window对象

javascript 复制代码

window.myApi= {
   sayHello: () => console.log('Hello!')
};

2、nodeIntegration

控制是否可以在渲染进程中++直接使用Node.js API++（如fs、path、require等语法和api)
默认值：false，无法直接使用node环境

🌰 如果启用nodeIntegration: true（不推荐）

渲染进程中的js文件

javascript 复制代码

// 渲染进程 index.html
<script>
  const fs = require('fs');
  fs.writeFileSync('test.txt', 'Hello, Electron!');
</script>

🌰如果不启用，我们应该如何借助Node.js的功能呢？

通过【预加载脚本】执行ipcRenderer通信，发送至主进程处理

preload.js

javascript 复制代码

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  sendTitle: (title) => ipcRenderer.send('set-title', title),
  readFile : (filePath) => ipcRenderer.invoke('read-file', filePath)
});

main.js的利用ipcMain接受处理函数

javascript 复制代码

const { app, BrowserWindow, ipcMain } = require('electron/main')
const path = require('node:path')
const fs = require('fs').promises;

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // send 'sendTitle'方法的接收器
  ipcMain.on('set-title', (event, title) => {
    //通过event.sender获取网页内容对象
    const webContents = event.sender
    // fromWebContents解析
    const win = BrowserWindow.fromWebContents(webContents)
    win.setTitle(title)
  })

  // invoke 'readFile'方法的处理器
  ipcMain.handle('read-file', async (_, filePath) => {
      try {
        const data = await fs.readFile(filePath, 'utf-8');
        return { success: true, data };
      } catch (error) {
        return { success: false, error: error.message };
      }
  });

  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

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

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

⚠️注意：send + on和invoke + handle两种通信方法的区别

send + on ：单向通信，单向发送->单边处理

invoke + handle ：双向通信 ，发送者发送信息 -> 接收者理后可return 一个返回值 -> 发送者接收到返回值的Promise对象，可针对返回值再处理

🌟推荐实践：

启用**sandbox: true（沙箱模式）**进一步增强安全性

javascript 复制代码

const win = new BrowserWindow({
  webPreferences: {
    contextIsolation: true, （默认，无需特别设置）
    nodeIntegration: false,（默认，无需特别设置）
    preload: 'preload.js',
    sandbox: true
  }
});