Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inconsistent ad blocking behavior with puppeteer-extra-plugin-adblocker in Puppeteer[Bug] #886

Open
MichealAaron opened this issue Apr 17, 2024 · 1 comment
Labels
issue: bug report A bug has been reported needs triage

Comments

@MichealAaron
Copy link

Description:

I am using Puppeteer with the puppeteer-extra package and the puppeteer-extra-plugin-adblocker plugin in my Node.js project, which is deployed on Google Cloud Functions. I have a function takeScreenshotWithOptions that takes a Params object, including a block_ads parameter. However, I am experiencing inconsistent ad blocking behavior.
When I set block_ads to true or false, the ad blocking behavior is inconsistent. Sometimes ads are blocked with both settings until I restart the server.

Reproduction Steps:

  1. Set block_ads to false and observe ad blocking behavior.
  2. Set block_ads to true and observe ad blocking behavior.
  3. Repeat steps 1 and 2 to see if the behavior is consistent or changes over time.

Expected Behavior:

  • When block_ads is set to true, ads should be blocked.
  • When block_ads is set to false, ads should not be blocked.

Actual Behavior:

  • Sometimes ads are blocked even when block_ads is set to false

Environment:

  • Node.js version: “18.20.1”,
  • puppeteer: "^22.6.4",
  • puppeteer-extra: "^3.3.6",
  • puppeteer-extra-plugin-adblocker: "^2.13.6"

Additional Information:

  • Restarting the server temporarily resolves the issue, but it reappears after some time.

Sample Code:

index.ts

import * as ff from '@google-cloud/functions-framework';
import { takeScreenshotWithOptions } from './screenshot';

ff.http('TypescriptFunction', async (req:ff.Request, res:ff.Response) => {
    try {
        const result = await takeScreenshotWithOptions(req.body);
        res.status(200).send(JSON.stringify({
            'screenshotUrl': result
        }));
    } catch (error) {
        console.error(error);
        res.status(500).send('Errors taking screenshot');
    }
});

takeScreenshotWithOptions.ts

import { Storage as GoogleStorage } from "@google-cloud/storage";
import puppeteer from 'puppeteer-extra';
import Adblocker from 'puppeteer-extra-plugin-adblocker';


export async function takeScreenshotWithOptions(params: Params): Promise<string> {

//For Adblocking
  if (params.block_ads) {
    puppeteer.use(Adblocker({ blockTrackers: true }));
  }

  const browser = await puppeteer.launch({
    args: ["--no-sandbox"],
    headless: false, 
    targetFilter: (target) => target.type() !== "other",
  });
  const page = (await browser.pages())[0];

    await page.goto(‘https://www.w3schools.com/html/default.asp‘,{ waitUntil: "networkidle0" })
 
    await page.screenshot({ path: 'g2.png', fullPage: true });
    await browser.close()

    return `All done, check the screenshots.`;
}

Expected Outcome:

I hope to understand why the ad blocking behavior is inconsistent and find a reliable solution to ensure that ads are blocked or unblocked based on the block_ads parameter.

@MichealAaron MichealAaron added issue: bug report A bug has been reported needs triage labels Apr 17, 2024
@chrisdruta
Copy link

chrisdruta commented Apr 22, 2024

Completely random suggestion which may or may not work;

I think I saw in another thread somewhere that you have to make a new page via await browser.newPage() for some reason, cant use (await browser.pages())[0]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue: bug report A bug has been reported needs triage
Projects
None yet
Development

No branches or pull requests

2 participants