javascript - 如何使用evaluateOnNewDocument 和exposeFunction？

Question

最近，我将 Puppeteer 用于一个新项目。

我有一些关于我不理解的 API 的一部分的问题。这些 API 介绍的文档非常简单：

1. page.exposeFunction
2. page.evaluateOnNewDocument

我可以有一个详细的演示以获得更好的理解吗？

Answer 1

概括：

Puppeteer 功能page.exposeFunction()本质上允许您在页面 DOM 环境中访问 Node.js 功能。

另一方面，page.evaluateOnNewDocument()在创建新文档时以及在执行其任何脚本之前评估预定义函数。

---

各州的Puppeteer 文档：page.exposeFunction()

page.exposeFunction（名称，puppeteerFunction）

• name< string > 窗口对象上的函数名
• puppeteerFunction< function > 将在 Puppeteer 的上下文中调用的回调函数。
• 返回：<承诺>

该方法添加了一个name在页面window对象上调用的函数。调用时，该函数puppeteerFunction在 node.js 中执行并返回一个Promise ，该 Promise解析为puppeteerFunction.

如果puppeteerFunction返回一个Promise，它将被等待。

注意通过page.exposeFunction生存导航安装的功能。

md5在页面中添加函数的示例：

const puppeteer = require('puppeteer');
const crypto = require('crypto');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  page.on('console', msg => console.log(msg.text()));
  await page.exposeFunction('md5', text =>
    crypto.createHash('md5').update(text).digest('hex')
  );
  await page.evaluate(async () => {
    // use window.md5 to compute hashes
    const myString = 'PUPPETEER';
    const myHash = await window.md5(myString);
    console.log(`md5 of ${myString} is ${myHash}`);
  });
  await browser.close();
});

window.readfile在页面中添加函数的示例：

const puppeteer = require('puppeteer');
const fs = require('fs');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  page.on('console', msg => console.log(msg.text()));
  await page.exposeFunction('readfile', async filePath => {
    return new Promise((resolve, reject) => {
      fs.readFile(filePath, 'utf8', (err, text) => {
        if (err)
          reject(err);
        else
          resolve(text);
      });
    });
  });
  await page.evaluate(async () => {
    // use window.readfile to read contents of a file
    const content = await window.readfile('/etc/hosts');
    console.log(content);
  });
  await browser.close();
});

---

此外，Puppeteer 文档page.evaluateOnNewDocument解释：

page.evaluateOnNewDocument(pageFunction, ...args)

• pageFunction<功能| string > 要在浏览器上下文中评估的函数
• ...args<... Serializable > 传递给的参数pageFunction
• 返回：<承诺>

添加将在以下场景之一中调用的函数：

• 每当导航页面时
• 每当附加或导航子框架时。在这种情况下，函数在新附加框架的上下文中调用

该函数在文档创建之后但在其任何脚本运行之前被调用。这对于修改 JavaScript 环境很有用，例如种子Math.random。

在页面加载之前覆盖 navigator.languages 属性的示例：

// preload.js

// overwrite the `languages` property to use a custom getter
Object.defineProperty(navigator, "languages", {
  get: function() {
    return ["en-US", "en", "bn"];
  }
});

// In your puppeteer script, assuming the preload.js file is in same folder of our script
const preloadFile = fs.readFileSync('./preload.js', 'utf8');
await page.evaluateOnNewDocument(preloadFile);