javascript - 如何使用evaluateOnNewDocument和exposeFunction？

Question

最近，我在一个新项目中使用了 Puppeteer。

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

1. page.exposeFunction
2. page.evaluateOnNewDocument

能给我一个详细的演示以便更好地理解吗？

Answer 1

摘要:

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

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

<小时/>

Puppeteer Documentation for page.exposeFunction() 状态:

page.exposeFunction(name, puppeteerFunction)

• name <string> Name of the function on the window object
• puppeteerFunction <function> Callback function which will be called in Puppeteer's context.
• returns: <Promise>

The method adds a function called name on the page's window object. When called, the function executes puppeteerFunction in node.js and returns a Promise which resolves to the return value of puppeteerFunction.

If the puppeteerFunction returns a Promise, it will be awaited.

NOTE Functions installed via page.exposeFunction survive navigations.

添加 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 Documentation for page.evaluateOnNewDocument 解释:

page.evaluateOnNewDocument(pageFunction, ...args)

• pageFunction <function|string> Function to be evaluated in browser context
• ...args <...Serializable> Arguments to pass to pageFunction
• returns: <Promise>

Adds a function which would be invoked in one of the following scenarios:

• whenever the page is navigated
• whenever the child frame is attached or navigated. In this case, the function is invoked in the context of the newly attached frame

The function is invoked after the document was created but before any of its scripts were run. This is useful to amend the JavaScript environment, e.g. to seed Math.random.

An example of overriding the navigator.languages property before the page loads:

// 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);