Adblock is available as browser extension for Chrome, FireFox, Microsoft Edge, Safari and also for mobile devices.

How does AdBlock block the ads?

There are two ways AdBlock blocks the ads

  • Removing the content - In this approach, the AdBlock removes the content that looks like ads from the website and fills it with empty space. This is done using dom manipulation.
  • Blocking the content from downloading - AdBlock blocks those url from loading which contain ads. So if you are viewing website A, then the ads displayed in website A are from different sources like Google AdWords. AdBlock blocks these urls from loading, which helps to save data as well.

In order to block the content, AdBlock uses the list of urls and dom ids. They generally use the EasyList, which is a 3rd party entity who maintains these list.

How does AdBlock store all the rules?

AdBlock uses the list which contains the list of sites where ad has to be blocked. The list also contains some code block specific parts of those sites which contain ads. Besides this, it also contains code to block generic popups and ads. The list is ususally EasyList.

How does EasyList look?

EasyList

Above is the screenshot of easylist list consisting of advert blocking filters, element hiding rules, third party advertisers, third party adverts, specific advert blocking filters, element hiding rules and some whitelists to fix broken rules.

So AdBlock parses this list, and then blocks the urls accordingly.

Let us see how the parser for EasyList looks like.

Different features of EasyList

If you look at the easylist, it is divided into different sections as mentioned in previous section. Each row contains one filter. The filters are written in different type as follows

Blocking by address parts

Example

/affiliates/*/show_banner.

This filter matches the http://example.com/affiliates/abc/show_banner.

Blocking by domains

Example

||cacheserve.*/promodisplay/

This filter matches the http://cacheserve.abc.com/promodisplay

Blocking the exact address

Example

|http://example.com|

This matches the exact address of the url to be blocked.

Detailed explanation of filters

If you want more detailed explanation of filters, or are interested in creating a filter list like EasyList for AdBlock, then please go this filter cheatsheet of adblock

Simple parser for EasyList

There are many parsers available in different languages that parse the easylist and also have other features like blocking the urls and finding the dom elements.

We are showing the code of ABP-Filter-Parser which is one of the parsers of easylist available.

This is how the ABP Filter Parser work

let ABPFilterParser = require('abp-filter-parser');
var fs = require('fs');

// read the easylist parser
let easyListTxt = fs.readFileSync('./test/data/easylist.txt', 'utf-8');
let parsedFilterData = {};

// this is the url from which ad is displayed
let urlToCheck = 'http://static.tumblr.com/dhqhfum/WgAn39721/cfh_header_banner_v2.jpg';

// this is the url of the page loaded by client
let currentPageDomain = 'slashdot.org';

ABPFilterParser.parse(easyListTxt, parsedFilterData);

if (ABPFilterParser.matches(parsedFilterData, urlToCheck, {
      domain: currentPageDomain,
      elementTypeMaskMap: ABPFilterParser.elementTypes.SCRIPT,
    })) {
  console.log('You should block this URL!');
} else {
  console.log('You should NOT block this URL!');
}

> You should block this URL!

http://static.tumblr.com/dhqhfum/WgAn39721/cfh_header_banner_v2.jpg is present in the easylist. So that ad will be blocked.