介紹

Puppeteer 可以自己定義一個function或是用第三方的function 到browser端使用

exposeFunction 會把後端的建立的 function 掛到 window 底下讓前端可以使用，
底下程式碼中把 onCustomEvent 監聽事件掛到前端的 window.onCustomEvent
，然後定義了一個 listenFor 使用 page.evaluateOnNewDocument 類似 middleware的方法，在建立完文件後被調用所以這邊就以使用剛剛後端 onCustomEvent 方法了

'use strict';
const puppeteer = require('puppeteer');
(async() => {

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

await page.exposeFunction('onCustomEvent', e => {
  console.log(`${e.type} fired`, e.detail || '');
});
 
function listenFor(type) {
  return page.evaluateOnNewDocument(type => {
    document.addEventListener(type, e => {
      window.onCustomEvent({type, detail: e.detail});
    });
  }, type);
}

await listenFor('app-ready'); // Listen for "app-ready" custom event on page load.

await page.goto('https://www.chromestatus.com/features', {waitUntil: 'networkidle2'});

await browser.close();

})();

總結

Puppeteer 提供了exposeFunction 把後端的 lib或是 function可以讓前端使用大大提升了許多效能 ，同樣的語法也是非常的簡潔有力

官方範例

https://github.com/GoogleChrome/puppeteer/blob/master/examples/custom-event.js