Electron渲染进程中使用Isolated World API的问题求助

1. 在隔离环境中运行渲染进程的实现示例 #

当你通过contextBridge.exposeInIsolatedWorld把API暴露到指定隔离环境（比如ID 1004）后，不需要额外配置让渲染进程“运行在隔离环境”，核心是让你的业务代码在对应的隔离环境中执行。以下是完整落地流程：

主进程配置（main.ts） #

确保BrowserWindow的webPreferences开启上下文隔离，无需额外设置隔离环境ID，API暴露逻辑放在preload中完成：

import { app, BrowserWindow } from 'electron';
import path from 'path';

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false,
      preload: path.join(__dirname, 'preload.js'), // 对应编译后的preload文件路径
    },
  });

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

app.whenReady().then(createWindow);

Preload脚本配置（preload.ts） #

用contextBridge.exposeInIsolatedWorld把API暴露到ID为1004的隔离环境：

import { contextBridge } from 'electron';

// 定义要暴露的业务API
const businessApi = {
  myFun: () => {
    return '来自隔离环境的API响应';
  },
};

// 暴露到指定ID的隔离环境
contextBridge.exposeInIsolatedWorld(1004, {
  api: businessApi,
});

让代码在隔离环境中执行的两种方式 #

方式一：主进程注入代码到隔离环境

在窗口加载完成后，主进程通过webContents.executeJavaScript指定隔离环境ID注入代码：

// 在main.ts的createWindow函数中添加
mainWindow.webContents.on('did-finish-load', () => {
  mainWindow.webContents.executeJavaScript(
    `
      window.addEventListener('DOMContentLoaded', () => {
        const result = window.api.myFun();
        document.body.innerText = result;
      });
    `,
    true, // 标记为在隔离环境执行
    1004 // 目标隔离环境ID
  );
});

方式二：Preload中直接注入代码到隔离环境

webFrame模块仅能在preload中使用，可直接在preload里把业务代码注入到目标隔离环境：

// preload.ts中新增
import { webFrame } from 'electron';

webFrame.executeJavaScript(
  `
    // 这段代码将运行在ID为1004的隔离环境中
    console.log(window.api.myFun());
  `,
  false,
  1004
);

2. 渲染进程无法使用webFrame.executeInIsolatedWorld的替代方案 #

渲染进程没有权限访问webFrame模块，可通过以下两种方案替代：

方案一：Preload封装执行函数暴露给渲染进程 #

在preload中封装webFrame.executeJavaScript的调用，暴露给普通渲染进程使用：

// preload.ts
import { contextBridge, webFrame } from 'electron';

// 暴露工具函数给普通渲染进程
contextBridge.exposeInMainWorld('isolatedEnvTools', {
  runCode: (code: string) => {
    return webFrame.executeJavaScript(code, false, 1004);
  },
});

// 继续暴露业务API到隔离环境
contextBridge.exposeInIsolatedWorld(1004, {
  api: {
    myFun: () => '来自隔离环境的响应',
  },
});

渲染进程中调用：

// renderer.ts
window.isolatedEnvTools.runCode(`
  console.log(window.api.myFun());
`);

方案二：通过IPC让主进程执行注入 #

渲染进程通过IPC通知主进程，由主进程完成隔离环境的代码注入：

Preload中暴露IPC调用函数

// preload.ts
import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('ipcTools', {
  runInIsolatedWorld: (code: string) => {
    return ipcRenderer.invoke('execute-in-isolated-env', code);
  },
});

主进程监听IPC事件

// main.ts
import { ipcMain } from 'electron';

ipcMain.handle('execute-in-isolated-env', async (_, code) => {
  const targetWindow = BrowserWindow.getAllWindows()[0];
  return targetWindow.webContents.executeJavaScript(code, true, 1004);
});

渲染进程发起调用

// renderer.ts
const result = await window.ipcTools.runInIsolatedWorld(`
  return window.api.myFun();
`);
console.log(result);

内容的提问来源于stack exchange，提问作者code_name