javascript - 使用不可序列化参数的 Puppeteer ExposureFunction

Question

我正在尝试使用第 3 方库来执行一些复杂的 DOM 解析:

/** 
 *  // Simplified for this example
 *  module.exports.parse = (document) => {return document.title; }
 */

const { parse } = require('./parse.js');

当我尝试公开并评估 puppeteer 中的函数时:

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://stackoverflow.com', { waitUntil: ['domcontentloaded'] });
await page.exposeFunction('parse', (document) => {
    return parse(document);
});

await page.evaluate(() => {
    return window.parse(window.document);
});

我收到错误:

Evaluation failed: TypeError: Converting circular structure to JSON\n at JSON.stringify ()\n at window.(anonymous function) (puppeteer_evaluation_script:13:22)\n at puppeteer_evaluation_script:3:31

在文档的示例中，它传递一个字符串(可以序列化)。是否有任何已知的方法来评估以 window 或 document 作为参数的 node.js 方法？

Answer 1

下面解释的此方法有点不同，因此请谨慎使用。

我们可以将脚本带到浏览器，而不是将 dom 带到 Node 上下文。借助 webpack 或 browserify 的力量，这是可能的。这样，我们就不需要序列化任何循环变量。

这是最小的 webpack 配置。

const path = require("path");

module.exports = {
  entry: "./browser/src.js",

  output: {
    path: path.resolve("browser"),
    filename: "dist.js",
    libraryTarget: "global"
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader"
      }
    ]
  }
};

我们将把浏览器脚本放在 browser/src.js 文件夹中。然后当我们运行webpack时，它会生成browser/dist.js，我们可以将其注入(inject)到浏览器上。

最后我可以用以下之一来调用它，

await page.addScriptTag({path: "./browser/dist.js"});
await page.evaluate(fs.readFileSync("./browser/dist.js", 'utf8'));

只要我们不使用任何无法捆绑的 native 二进制文件，它就可以完美工作。

为简单起见，这里是其他文件，

// browser/src.js
module.exports.parse = window => {
  return window.location.href;
};

// index.js
const fs = require("fs");
const puppeteer = require("puppeteer");
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.evaluate(fs.readFileSync("./browser/dist.js", 'utf8'));
  const data = await page.evaluate(() => {
    return parse(window);
  });

  console.log({ data });
})();

// The result:
{ data: 'about:blank' }