puppeteer exposeFunction 方法简单试用

以下简单演示下puppeteer exposeFunction 的使用

环境准备

基于browserless

• docker-compose

version: "3"

services:

  nginx:

    image: nginx:alpine

    volumes:

      - ./index.html:/usr/share/nginx/html/index.html

    ports:

      - "80:80"

  browser:

    image: ghcr.io/browserless/chromium:latest

    environment:

      - CONCURRENT=40

      - QUEUED=20

      - CORS=true

      - CORS_MAX_AGE=300

      - DATA_DIR=/tmp/my-profile

      - TOKEN=6R0W53R135510

    volumes:

      - ./my-profile:/tmp/my-profile

    ports:

      - "3000:3000"

app.js

const puppeteer = require("puppeteer-core");

const crypto = require("crypto");

const hashids = require("hashids");

const Sqids = require("sqids").default;

 

const myid = new hashids("myapp", 10);

 

const mynewid = new Sqids({minLength: 10});

 

(async () => {

  const browser = await puppeteer.connect({

    browserWSEndpoint: "ws://localhost:3000/",

  });

  const page = await browser.newPage();

  await page.exposeFunction("idgen", (text) => {

    return {

      text: text,

      id: myid.encode(1, 2, 3),

      idv2: mynewid.encode([1,3,4]),

      md5: crypto.createHash("md5").update(text).digest("hex"),

    };

  });

 

  page.setUserAgent(

    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36"

  );

  await page.goto("http://nginx", { waitUntil: "networkidle2" });

  await page.evaluate(() => {

    localStorage.setItem("name", "demoapp");

  });

 

  let info = await page.evaluate(async () => {

    let name = localStorage.getItem("name");

    let ids = await window.idgen(name);

    console.log(ids);

    return { name, ids };

  });

  console.log(info);

  await page.close();

  await browser.close();

})();

效果

说明

注意puppeteer exposeFunction 并不是可以将任何nodejs 模块以及方法暴露到浏览器中的，有一些限制，内部实际上会有序列化处理，对于简单对象是没有问题的，推荐基于简单对象模式进行参数传递

参考资料

https://sqids.org/javascript
https://playwright.dev/
https://pptr.dev/api/puppeteer.page.exposefunction
https://stackoverflow.com/questions/48281130/why-cant-i-access-window-in-an-exposefunction-function-with-puppeteer