Node.js 筆記 - 使用 Puppeteer 進行 JS Injection 與 Custom function 定義實作 @ Puppeteer v10, Node.js v16.5.0

之前使用 Puppeteer 方便自己撰寫一些監控 http requests ，像是即時監控 remote resource 變化。接著，要來把玩 JS Injection。

如果使用 Puppeteer 的用法是包括持續瀏覽網頁的話，那適合在網頁 onload 的情況下植入：

// https://pptr.dev/#?product=Puppeteer&version=v10.0.0&show=api-event-domcontentloaded

// https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

//

// The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

//

page.on('load', async () => {

console.log('on.load');

});

如果是瀏覽網頁後，立馬植入 JS Code 運行並且任務就結束了，那就是適合在 network 連線閒置後處理：

await page.goto(target_url, {

waitUntil: 'networkidle0',

});

console.log('networkidle0');

而 JS Injection 的方式：

await page.evaluate((js_code) => {return Promise.resolve(window.eval(js_code));}, js_resource_content);

其中 js_resource_content 就是預計植入的 JS Code 字串。例如有多份程式碼要植入，可以跑回圈：

for(let i=0 ; i<js_resource.length ; ++i) {

console.log('inject: '+js_resource[i]+', size: '+js_resource_content[i].length);

await page.evaluate((js_code) => {return Promise.resolve(window.eval(js_code));}, js_resource_content[i]);

}

其中 js_resource[] 紀錄的是 js code 網址，而 js_resource_content[] 是紀錄該 js code 網址的內容。

最後，提一下自訂函數的寫法：

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

// Define a window._puppeteer_helper function on the page.

await page.exposeFunction('_puppeteer_helper', (data) => {

console.log(`_puppeteer_helper fired`);

});

如此，又可以靠 JS Injection 去呼叫 window._puppeteer_helper ，或是靠 phage.evaluate 執行了：

let result = await page.evaluate((data_to_page) => {

let data = data_to_page;

return Promise.resolve(window.eval(`

window._puppeteer_helper();

`));

}, 'nothing');

完整範例請參考：github.com/changyy/puppeteer-study/tree/master/js-injection