如何使用 Puppeteer 覆盖本机功能

Question

通常我会这样做

await page.evaluateOnNewDocument(my_js_code);

其中 my_js_code 类似于：

Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", ...

但问题是在那之后代码变得可见

console.log(HTMLCanvasElement.prototype.toBlob.toString());

使用本机函数，代码不可见，toString 返回[native code]，而不是实际代码

那么，有没有一种方法可以使用 Pupeteer 覆盖更深层次的函数？

Answer 1

问题实际上不在于 puppeteer，请尝试在 chrome repl 中运行您的代码（它会给出相同的结果）。Object.defineProperty不接受一个值作为第三个参数，而是一个“描述符”。我猜你把函数放在第三个参数中，比如

Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", () => {
  console.log('toBlob!');
});

但它想要这样

Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
  value: () => {
    console.log('toBlob!');
  }
});

对我有用的示例代码：https : //gist.github.com/dralletje/37d0fc8a564ad377d60881d7c7429f6b

Answer 2

本机代码意味着它是在浏览器中实现的，可能使用 Javascript 以外的语言。当您提供函数体时，它不会是本机代码，而是您定义的函数。

我认为没有一种方法可以定义开发工具控制台将输出为本机代码的代码，即使有一种方法，它也只会混淆它的作用而无法隐藏它。