DEV Community

Cover image for How do ad blockers work in the browser?
Richard Shaju
Richard Shaju

Posted on

How do ad blockers work in the browser?

Disclaimer: This article does not endorse adblockers. Instead, it explains the technology behind them.

In this article, we will be discussing the functioning of ad blockers in web browsers.

What are Ad Blockers?

An ad blocker is a software application or feature that prevents advertisements from loading on a web browser. Ad blockers can also be known as content blockers. They can exist in different forms, such as independent programs for browsers or operating systems, plugins, and browser extensions. Popular ones include uBlock Origin, AdBlock Plus, and AdGuard.

How is it working?

Once installed, the ad blocker extension works in the background whenever the user browses the internet. It filters web content based on predefined rulesets or lists of known ad servers, scripts, and elements.

If the ad blocker detects any elements on the page that match its criteria for ads or trackers, it prevents those elements from loading or displaying on the user's screen. This could include banner ads, pop-ups, autoplay videos, tracking pixels, and more.

How do Ad Blockers find ads?

Pattern Matching: Ad blockers maintain lists of known URLs, domains, and patterns commonly associated with advertisements. These lists are regularly updated to include new ad servers, tracking scripts, and other elements used by advertisers. When a web page is loaded, the ad blocker compares the URLs of resources being requested against its lists to identify and block ad-related content.

CSS Selectors: Ad blockers can use CSS selectors to target specific elements on a web page that are commonly used for advertising, such as divs with class names like "ad" or "banner". By analyzing the page's HTML and CSS, the ad blocker can identify and block these elements from being displayed to the user.

JavaScript Analysis: Some ads are dynamically loaded or injected into web pages using JavaScript. Ad blockers can analyze the JavaScript code on a page to detect patterns or functions commonly used by ad scripts. They can then prevent these scripts from executing or modify their behavior to prevent ads from being displayed.

Machine Learning: Advanced ad blockers may use machine learning algorithms to analyze the structure and content of web pages to identify ad elements. By training on large datasets of labeled web pages, these algorithms can learn to recognize patterns and features associated with advertisements, even if they don't match specific URLs or CSS classes.

User Feedback: Ad blockers may also incorporate feedback from users to improve their blocking capabilities. Users can report ads that slip through the blocker's filters, allowing developers to update their rulesets and improve accuracy over time.

Here is a flow diagram of how ad blockers work in a browser:

1) The user visits a website.
2) The website sends a request to the ad server for an ad.
3) The ad server sends the ad to the website.
4) The website displays the ad to the user.
5) The ad blocker detects the ad.
6) The ad blocker blocks the ad.
7) The user does not see the ad.

Ad blockers provide users with a more streamlined and distraction-free browsing experience by removing unwanted advertisements and tracking elements from web pages.

However, it's worth noting that some websites rely on advertising revenue to support their content, so users may choose to whitelist or support those sites in other ways if they find their content valuable.

I hope this article helps you❤️

Check out my other handles:

Top comments (0)