如何在Electron中直接注入脚本替代executeJavaScript实现网页操作？

需求背景 #

现有基于Electron的爬虫脚本，通过封装executeJavaScript实现页面交互，但希望避免使用这类动态执行代码的方式，转而直接将脚本注入页面上下文，同时保证核心脚本不可被修改。

实现方案：使用Preload脚本 #

Electron的Preload脚本是官方推荐的安全注入方式，它在页面加载前运行于渲染进程的隔离上下文，可直接操作DOM和页面API，无需依赖动态执行代码的方法，且通过上下文隔离能有效防止页面代码篡改你的逻辑。

步骤1：编写Preload脚本（preload.js） #

将页面操作逻辑封装在preload中，通过IPC与主进程通信：

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

// 封装页面操作方法，暴露给渲染进程上下文
contextBridge.exposeInMainWorld('electronAPI', {
  // 等待页面完全加载
  waitForPageComplete: () => new Promise(resolve => {
    if (document.readyState === 'complete') {
      resolve(true);
    } else {
      window.addEventListener('load', () => resolve(true));
    }
  }),
  // 设置登录邮箱
  setLoginEmail: (email) => {
    const input = document.querySelector('#myusername');
    if (input) input.value = email;
  },
  // 获取输入框值
  getEmailInputValue: () => {
    const input = document.querySelector('#myusername');
    return input ? input.value : '';
  }
});

// 监听主进程指令，执行登录流程
ipcRenderer.on('run-login-flow', async (event, payload) => {
  try {
    await window.electronAPI.waitForPageComplete();
    window.electronAPI.setLoginEmail(payload.email);
    const inputValue = window.electronAPI.getEmailInputValue();
    // 将结果返回给主进程
    ipcRenderer.send('login-flow-result', inputValue);
  } catch (err) {
    ipcRenderer.send('login-flow-error', err.message);
  }
});

步骤2：修改Electron主脚本 #

配置窗口启用preload脚本，通过IPC触发页面操作：

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

// 创建带preload配置的浏览器窗口
async function createBrowser() {
  await app.whenReady();
  return new BrowserWindow({ 
    width: 800, 
    height: 600, 
    show: true,
    webPreferences: {
      preload: './preload.js', // 指定preload脚本路径
      contextIsolation: true, // 开启上下文隔离（强制安全）
      nodeIntegration: false, // 禁用Node.js集成，避免安全风险
      sandbox: true // 可选：启用沙箱进一步增强安全性
    }
  });
}

// 清理窗口和存储
async function cleanup(browser) {
  await browser.webContents.session.clearStorageData();
  await browser.close();
}

// 主执行逻辑
(async () => {
  const browser = await createBrowser();
  const targetUrl = 'https://app.proxiesapi.com/login/index.php';

  // 加载目标页面
  await browser.loadURL(targetUrl);

  // 等待preload返回的操作结果
  const loginResult = await new Promise((resolve, reject) => {
    ipcMain.once('login-flow-result', (_, value) => resolve(value));
    ipcMain.once('login-flow-error', (_, errMsg) => reject(new Error(errMsg)));
    // 发送指令触发preload中的登录流程
    browser.webContents.send('run-login-flow', { email: 'xxx@gmail.com' });
  });

  console.log({ inputFieldValue: loginResult });

  await cleanup(browser);
})();

方案优势 #

• 完全替代动态执行：所有页面操作逻辑固化在preload脚本中，无需使用executeJavaScript或eval。
• 脚本不可篡改：开启上下文隔离后，页面脚本无法访问preload的内部逻辑，也无法篡改暴露的方法，保证核心逻辑安全。
• 流程清晰可控：通过IPC实现主进程与渲染进程的交互，逻辑拆分明确，易于维护和扩展。

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