Puppeteer - Javascript page injection

Browser

About

How to expose, inject javascript function in a Puppeteer page

Puppeteer communicate with the browser via the DevTools Protocol (Chrome Debugging Protocol.). It requires to pass a stringified function.

You have to pass the whole function or expose it to the browsers context.

Options

  • page.evaluateOnNewDocument
  • page.evaluate
  • page.exposeFunction - only to inject a node function (no window property) - The function exposed will return a Promise because it will not be running inside the browser, but inside node.
  • page.addScriptTag

exposeFunction

A common pattern is to expose a node function to get back object in the node environment

Example with an array of link

const links = [];
await this._page.exposeFunction('pushToLinks', link => {
  links.push(link);
});
await this._page.evaluate(() => {
	document.querySelectorAll('a[href]')
	  .forEach(link => {
		window.pushToLinks(link.href);
	  });
});

addScriptTag

Adds a <script> tag into the page with the desired url or content. Shortcut for page.mainFrame().addStyleTag(options)

Doc

Example:

const jQueryPath = require.resolve('jquery');
await page.addScriptTag({ path: jQueryPath });

page.evaluate

  • Return an object
const result = await page.evaluate(() => {
        let title = document.querySelector('h1').innerText;
        let price = document.querySelector('.price_color').innerText;

        return {
            title,
            price
        }

    });
  • Return an array
const result = await page.evaluate(() => {
  let data = []; 
  // Scrap
  let elements = document.querySelectorAll('xxx'); 
  data.push(...); 
  return data; 
});

1)







Share this page:
Follow us:
Task Runner