Chrome-remote-interface: Succesful way to use addBlockedURL?

[elsigh]

Long shot, but I was playing around with this library today along with chrome headless shell (https://hub.docker.com/r/yukinying/chrome-headless/) and tried the following to prevent some analytics libraries from loading, to no avail.
I do get a screenshot though ;)

I'm going to post to the headless-dev group as well, but maybe you've tried this too?

const CDP = require('chrome-remote-interface');
const fs = require('fs');
const blacklistURLs = [
  'facebook',
  'fullstory',
  'getdrip',
  'segment.com',
  'olark',
];

CDP(client => {
  // extract domains
  const { Network, Page } = client;
  // setup handlers

  Network.addBlockedURL('https://cdn.segment.com/analytics.js/v1/oD9PafeNRrJRbC3NL41R8DgV8SANLDZ9/analytics.min.js');

  Network.requestWillBeSent(params => {
    const url = params.request.url;
    console.log(`-> ${params.requestId} ${url.substring(0, 150)}`);
    blacklistURLs.some(blacklistedURL => {
      if (url.indexOf(blacklistedURL) !== -1) {
        Network.addBlockedURL(url);
        console.log('BLOCKING', url, '(I hope)');
        return true;
      }
      return false;
    });
  });
  Network.loadingFailed(params => {
    console.log('*** loadingFailed: ', params.requestId);
  })
  Network.loadingFinished(params => {
    console.log('<-', params.requestId, params.encodedDataLength);
  })
  Page.loadEventFired(() => {
    console.log('loadEventFired!');

    Page.captureScreenshot().then(v => {
      let filename = `screenshot-${Date.now()}`;
      fs.writeFileSync(filename + '.png', v.data, 'base64');
      console.log(`Image saved as ${filename}.png`);
      client.close();
    });
  });
  // enable events then start!
  Promise.all([
    Network.enable(),
    Page.enable()
  ]).then(
    () => {
      return Page.navigate({ url: 'https://shift.com/cars/san-francisco' });
    },
    () => {
      console.log('REJECT');
      client.close();
    }
  );
}).on('error', (err) => {
  console.error('Cannot connect to remote endpoint:', err);
});

[cyrus-and]

All the methods require an object as an argument (or nothing), in your case Network.addBlockedURL expects the url field, so the invocation should be like:

Network.addBlockedURL({url: 'http://example.com'});

In fact that invocations are silently failing in your code, I suggest to always check your promises for errors. I don't know what version of Node.js you're using but v7.2.0 explicitly complains about that:

(node:26539) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): Error: Invalid parameters

Please let me know if this solves your issue.

[elsigh]

cool - will try that, thanks so much!

[darvydas]

I was having a hard time getting this example to work with Network.setBlockedURLs, but after getting it right it feels like: what was I thinking in the first place.

So I thought it would be much easier for others to just follow the example and get it much faster. Placing the example below.

Was using:
chrome-remote-interface "version": "0.23.2"
Browser: 'HeadlessChrome/59.0.3071.104'

Working example(edited from @elsigh):

const CDP = require('chrome-remote-interface');
const fs = require('fs');
const blacklistURLs = [
  '*facebook*',
  '*fullstory*',
  '*getdrip*',
  '*olark*',
  '*optimizely.com*',
  'https://shift.com/images/*',
  '*segment.com*',
  // 'https://cdn.segment.com/analytics.js/v1/oD9PafeNRrJRbC3NL41R8DgV8SANLDZ9/analytics.min.js', - already skipped with wildcard '*segment.com*',
];
CDP.Version(function (err, info) {
  if (!err) {
    console.log(info);
  }
});
CDP(client => {
  // extract domains
  const { Network, Page } = client;
  // setup handlers

  Network.setBlockedURLs({ urls: blacklistURLs });

  Network.requestWillBeSent(params => {
    const url = params.request.url;
    console.log(`-> ${params.requestId} ${url.substring(0, 150)}`);
  });
  Network.loadingFailed(params => {
    console.log('*** loadingFailed: ', params.requestId);
  })
  Network.loadingFinished(params => {
    console.log('<-', params.requestId, params.encodedDataLength);
  })
  Page.loadEventFired(() => {
    console.log('loadEventFired!');

    Page.captureScreenshot().then(v => {
      let filename = `screenshot-${Date.now()}`;
      fs.writeFileSync(filename + '.png', v.data, 'base64');
      console.log(`Image saved as ${filename}.png`);
      client.close();
    });
  });
  // enable events then start!
  Promise.all([
    Network.enable(),
    Page.enable()
  ]).then(
    () => {
      return Page.navigate({ url: 'https://shift.com/cars/san-francisco' });
    },
    () => {
      console.log('REJECT');
      client.close();
    }
    );
}).on('error', (err) => {
  console.error('Cannot connect to remote endpoint:', err);
});