如何使用 Puppeteer 阻止特定的 JavaScript 脚本请求

Question

我制作了一个脚本来选择运动鞋的尺寸并将其添加到购物车，但我想知道如何阻止特定的 JavaScript 文件。我想提高页面加载速度。我的脚本目前是这样的：

const puppeteer = require("puppeteer");
const fs = require("fs").promises;
(async () => {
  try {
    console.log("Started!");
    const browser = await puppeteer.launch({
      executablePath: "/usr/bin/chromium",
      headless: false,
    });
    const page = await browser.newPage();
    await page.setViewport({ width: 1920, height: 1080 });
    await page.setRequesttInterception(true);
    page.on("request", (req) => {
      if (
        req.resourceType() === "image" ||
        req.resourceType() === "stylesheet" ||
        req.resourceType() === "font" ||
        req.resourceType() === "texttrack" ||
        req.resourceType() === "imageset" ||
        req.resourceType() === "bacon" ||
        req.resourceType() === "csp_report" ||
        req.resourceType() === "object"
      ) {
        req.abort();
      } else {
        req.continue();
      }
    });
    const cookiesString = await fs.readFile("./cookies.json");
    const cookies = JSON.parse(cookiesString);
    await page.setCookie(...cookies);
    await page.goto(
      "https://www.nike.com.br/chuteira-nike-premier-2-sala-unissex-153-169-171-309321",
      { timeout: 0 }
    );
    await page.waitForXPath('//label[@for="tamanho__idM40F395"]', {
      visibility: true,
      timeout: 0,
    });
    const tamanho = await page.$x('//label[@for="tamanho__idM40F395"]');
    await tamanho[0].click('//label[@for="tamanho__idM40F395"]');
    await page.waitForSelector("button#btn-comprar");
    await page.click("buton#btn-comprar");
    console.log("Added to car!");
  } catch {
    console.log("Element is not on the page or unexpected error!");
  }
})();

如何阻止加载某个 JavaScript 文件？这是我要阻止的文件：

<script type="text/javascript" src="https://cdn-prod.securiti.ai/consent/sdk-stub.js" defer=""></script>

Answer 1

req

对象具有

.url()

属性，您可以将其与要阻止的 URL 进行比较。

在你的代码中，

if (
  // ...
  req.url() === "https://cdn-prod.securiti.ai/consent/sdk-stub.js"
) {
  req.abort();
}
// ...

这是一个最小的例子：

const puppeteer = require("puppeteer");

let browser;
(async () => {
  const html = `
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  `;
  browser = await puppeteer.launch();
  const [page] = await browser.pages();

  // make a request with script allowed
  await page.setContent(html);
  console.log(await page.evaluate(() => !!React)); // => true

  // set up blocking
  await page.setRequestInterception(true);
  const blockedResourceTypes = [
    "image", "stylesheet", "font", "object",
    "texttrack", "imageset", "beacon", "csp_report",
  ];
  const blockedURLs = [
    "https://unpkg.com/react@17/umd/react.development.js",
  ];
  const allowedRequest = req =>
    !blockedResourceTypes.includes(req.resourceType()) &&
    !blockedURLs.includes(req.url());
  page.on("request", req => {
    if (allowedRequest(req)) {
      req.continue();
    }
    else {
      req.abort();
    }
  });

  // now the evaluate will throw because we blocked the script
  await page.reload();
  await page.setContent(html);
  console.log(await page.evaluate(() => !!React));
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

我认为你的意思是

"beacon"

而不是

"bacon"

。