如何在 Puppeteer 中收听 postMessage 消息？答案

【问题标题】：How to listen to postMessage messages in Puppeteer?如何在 Puppeteer 中收听 postMessage 消息？
【发布时间】：2018-09-23 07:35:56
【问题描述】：

https://github.com/GoogleChrome/puppeteer/blob/master/examples/custom-event.js 展示了如何定义自己的事件，但没有展示如何将事件数据传输回 Puppeteer 外部的代码。

例如，如果我想在代码中使用 Puppeteer 读取页面postMessages 的事件数据来启动页面，你会怎么做？

【问题讨论】：

我不知道 puppeteer，但我还是不明白这个问题。在您链接到的 git 中，有一个 e 参数传递给事件处理程序。我猜这是在页面上触发的 Event 对象。所以如果你想监听message 事件，那就继续吧。
@kaiido 问题是 Puppeteer 似乎并没有原生地暴露 message 事件。

标签： google-chrome events message postmessage puppeteer

【解决方案1】：

我刚刚遇到了同样的问题，下面是对我有用的东西。

使用来自Puppeteer 库的相同example 并进行一些修改。

'use strict';

const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    let msgCollection = [];

    // Define a window.onMessageReceivedEvent function on the page.
    await page.exposeFunction('onMessageReceivedEvent', e => {
        console.log(`${e.type} fired`, e.data || '');
        msgCollection.push(e.data);
    });

    /**
     * Attach an event listener to page to capture a custom event on page load/navigation.
     * @param {string} type Event name.
     * @return {!Promise}
     */
    function listenFor(type) {
        return page.evaluateOnNewDocument(type => {
            window.addEventListener(type, e => {
                window.onMessageReceivedEvent({type, data: e.data});
            });
        }, type);
    }

    await listenFor("message"); // Listen for "message" custom event on page load.

    await page.goto('https://jsfiddle.net/sa1nd0w5/', {waitUntil: 'networkidle0'});

    await browser.close();

    // Do something with the collected data
    console.log(msgCollection);

})();

【讨论】：