Electron 使用 CDP 自动上传文件（DOM.setFileInputFiles）

window.webContents.on('dom-ready', async () => {
  try {
    window.webContents.debugger.attach('1.3');

    const { root } = await window.webContents.debugger.sendCommand('DOM.getDocument');

    const { nodeId } = await window.webContents.debugger.sendCommand(
      'DOM.querySelector',
      {
        nodeId: root.nodeId,
        selector: '#file'
      }
    );

    await window.webContents.debugger.sendCommand(
      'DOM.setFileInputFiles',
      {
        nodeId,
        files: [traceFilePath],
      }
    );
  } catch (error) {
    // error handling...
  } finally {
    window.webContents.debugger.detach();
  }
});

这段代码的核心流程：

页面加载完成
    ↓
连接 Chrome DevTools Protocol
    ↓
找到 <input type="file">
    ↓
自动设置上传文件
    ↓
断开调试连接

监听页面加载完成

window.webContents.on('dom-ready', async () => {})

监听 Electron 页面 DOM 加载完成，类似浏览器中的：

document.addEventListener('DOMContentLoaded', () => {})

目的是等待页面加载完成，防止找不到目标元素。

attach 调试器

window.webContents.debugger.attach('1.3');

目的是给当前页面附加 Chrome DevTools Protocol（CDP）。Electron 暴露了 webContents.debugger 可以直接调用底层 Chromium 的 DevTools API。

查找文件上传 input 元素并上传文件

对应两个 CDP 指令：

DOM.querySelector
DOM.setFileInputFiles

const { nodeId } = await window.webContents.debugger.sendCommand(
  'DOM.querySelector',
  {
    nodeId: el.nodeId,
    selector: '#file'
  }
);

await window.webContents.debugger.sendCommand(
  'DOM.setFileInputFiles',
  {
    nodeId,
    files: [traceFilePath]
  }
);

CDP 不直接操作 DOM 对象。而是使用 nodeId 作为 DOM 节点唯一标识。CDP 的 DOM 操作中大多数需要先获取到具体元素的 nodeId。

detach 调试器

window.webContents.debugger.detach();

在运行完成后断开调试器链接，否则 debugger 可能会一直占用。

穿透 Shadow DOM 找元素

实际的开发中遇到了需要穿透 Shadow DOM 的情况，这里提供一份简单实现：

async function visitShadowRoots(window: BrowserWindow, selectors: string[]) {
  const document = await window.webContents.debugger.sendCommand('DOM.getDocument', {});
  let el = document.root;
  for (const selector of selectors) {
    const { nodeId } = await window.webContents.debugger.sendCommand(
      'DOM.querySelector',
      { nodeId: el.nodeId, selector }
    );
    const { node } = await window.webContents.debugger.sendCommand(
      'DOM.describeNode',
      { nodeId, pierce: true }
    );
    el = node.shadowRoots[0];
  }
  return el;
}

作者

Nepsyn

发布时间

2025-01-22

许可协议

CC BY-SA 4.0

0 条

这里空空如也。

评论