以下简单演示下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