google-chrome - 通过 DevTools 协议(protocol)从 Chromium 通信 "out"

Question

我有一个页面在 headless Chromium 实例中运行，我使用 Node 中的 Puppeteer NPM 包通过 DevTools 协议(protocol)对其进行操作。

我正在将脚本注入(inject)到页面中。在某些时候，我希望脚本给我回电并向我发送一些信息(通过 DevTools 协议(protocol)公开的某些事件或其他方式)。

执行此操作的最佳方法是什么？如果可以使用 Puppeteer 来完成那就太好了，但我并不反对亲自动手监听协议(protocol)消息。

我知道我可以通过操作 DOM 并监听 DOM 更改来做到这一点，但这听起来不是一个好主意。

Answer 1

好的，我在 Puppeteer 中发现了一种内置的方法来执行此操作。 Puppeteer 定义了一个名为 exposeFunction 的方法。

page.exposeFunction(name, puppeteerFunction)

此方法在页面的 window 对象上定义一个具有给定名称的函数。该函数在页面端是异步的。调用时，您定义的 puppeteerFunction 将作为回调执行，并具有相同的参数。这些参数不是 JSON 序列化的，而是作为 JSHandles 传递的，因此它们会公开对象本身。就我个人而言，我选择在发送值之前对它们进行 JSON 序列化。

我查看了代码，它实际上只是通过发送控制台消息来工作，就像 Pasi 的答案一样，Puppeteer 控制台 Hook 会忽略该消息。但是，如果您直接监听控制台(即通过管道stdout)。您仍然会看到它们以及常规消息。

由于控制台信息实际上是通过 WebSocket 发送的，因此效率非常高。我有点不愿意使用它，因为在大多数进程中，控制台通过标准输出传输数据，这存在问题。

示例

节点

async function example() {
    const puppeteer = require("puppeteer");
    let browser = await puppeteer.launch({
        //arguments
    });
    let page = await browser.newPage();

    await page.exposeFunction("callPuppeteer", function(data) {
        console.log("Node receives some data!", data);
    });

    await page.goto("http://www.example.com/target");
}

页面

在页面的 javascript 中:

window.callPuppeteer(JSON.stringify({
    thisCameFromThePage : "hello!"
}));

更新:DevTools 协议(protocol)支持

DevTools 协议(protocol)支持诸如 puppeteer.exposeFunction 之类的内容。

https://chromedevtools.github.io/devtools-protocol/tot/Runtime#method-addBinding

If executionContextId is empty, adds binding with the given name on the global objects of all inspected contexts, including those created later, bindings survive reloads. If executionContextId is specified, adds binding only on global object of given execution context. Binding function takes exactly one argument, this argument should be string, in case of any other input, function throws an exception. Each binding function call produces Runtime.bindingCalled notification.

.