Ad blocking

[sindresorhus]

Would be awesome to have some kind of ad blocking to reduce noise in screenshots.

The best solution would be to use an existing ad blocker Chrome extension, like uBlock Origin, but it seems it's only possible to load extension when not in headless mode ({headless: false}), so the Chrome window would show for a few seconds.

https://gist.github.com/sindresorhus/bca2f7d0c8b31205fa3c9f328d548c70
https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#working-with-chrome-extensions

We could potentially make it opt-in and let the user know the downside.

[Kikobeats]

I recently added adblock at browserless.

You could use @browserless/goto or use adblocker directly.

It also addresses #11

In fact, the default rules lists are easylist + uBlock + cookies banners 🙂

Just need some urls to target to see if it's working as expected

[brandon93s]

This could be implemented with request interceptors:

const blocklist = [...];

page.on('request', (request) => {
    // psuedo-code, regex or domain checks likely required
    if (blocklist.includes(request.url())) {
        request.abort();
	}

    request.continue();
  });

With this implementation, blocklist could be provided by the user -- either a list directly or a filepath.

[stvhanna]

@brandon93s How were you able to integrate this with capture-website? I tried the below but the page.on('request') is not called. @sindresorhus is this expected or possibly a bug?

      beforeScreenshot: async (page, browser) => {
        page.on('request', (request) => {
          console.log('request.url()', request.url());
          if (blocklist.includes(request.url())) {
            request.abort();
          }
          request.continue();
        });
      },