如何在NodeJS中向Electron应用的devtools控制台注入Javascript代码

可用相关库 #

• chrome-remote-interface：Node生态中最通用的Chrome DevTools Protocol（CDP）客户端，底层实现逻辑和你找到的Python版electron-inject完全一致，灵活性最高，支持所有CDP能力。
• electron-inject：NPM上也有同名的Node.js封装库，针对Electron注入场景做了简化，调用更方便，不需要了解CDP细节。

具体实现步骤 #

前提条件 #

不管用哪个库实现，都需要先给目标Electron应用开启远程调试能力，启动应用时追加参数：--remote-debugging-port=9222，端口可自定义。

基于chrome-remote-interface的实现示例 #

1. 安装依赖
   npm install chrome-remote-interface

2. 注入代码示例

const CDP = require('chrome-remote-interface');

async function injectCode() {
  // 连接目标Electron的调试端口
  const client = await CDP({ port: 9222 });
  const { Runtime } = client;
  // 启用Runtime执行能力
  await Runtime.enable();
  
  // 此处传入你需要注入执行的JS代码，和DevTools控制台执行效果完全一致
  const executeResult = await Runtime.evaluate({
    expression: `
      console.log('外部注入代码执行成功');
      // 这里可以写任意你需要执行的逻辑
      return window.location.href;
    `
  });

  console.log('代码执行返回值：', executeResult.result.value);
  // 关闭连接
  await client.close();
}

injectCode().catch(err => console.error('注入失败：', err));

多窗口场景补充 #

如果目标Electron应用开启了多个渲染窗口，可以先调用CDP.List({ port: 9222 })获取所有调试目标列表，筛选对应窗口的webSocketDebuggerUrl后传入CDP构造函数，即可指定窗口注入。

注意事项 #

• 打包后的生产版Electron应用默认不会开启远程调试端口，你需要自行修改应用启动参数追加调试配置，或对正在运行的进程注入参数开启调试能力。
• 新版Electron默认开启上下文隔离，注入的代码默认运行在页面主世界上下文，和预加载脚本的隔离上下文互不干扰，符合控制台执行的预期效果。

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