Complete Beginners Guide To Ad-Blocking Using uBlock Origin

I’m constantly surprised at the number of my friends and family members that don’t use ad blockers. Some don’t know which ad blockers to use, or how to use the one they have. Some feel overwhelmed from the technical knowledge required to understand ad blocking. Some don’t understand why content blocking is important for safe, private web browsing. Today I’m going to cover all these questions and concerns and teach you how to use the most powerful ad blocker on the web, uBlock Origin.

On a fresh installation, uBlock Origin blocks ads from designated URL filter lists similar to how AdBlock Plus works. This is called “Easy Mode” and there is a simple on-off switch used to whitelist the current domain. In Medium and Hard Mode, uBlock Origin becomes a powerful content blocker with the ability to block tracking scripts, block potentially malicious embedded content, and use dynamic filtering for full control over what loads on a webpage.

In a recent article (linked here), I covered the settings and extensions I recommend for a private Firefox setup. One of those extensions, in fact the most critical one, was uBlock Origin. Here, we’ll go deeper into the topic of ad-blocking and focus on how to set up content blocking with uBlock Origin for each type of user.

In this article, I’ll touch on both regular ad blocking and script blocking and what each of these mean. I’ll walk you through the initial set-up of uBlock Origin, teach you how to use it day-to-day, and give you my best tips on how to quickly fix a website that becomes broken.

Why Is Ad Blocking Important?

I’m sure I don’t need to tell you why ads are annoying, but do you know how they can actually be dangerous to your privacy?

In 2021, the web is a ruthless place. Big Tech trackers run by Facebook and Google are embedded into a majority of websites and follow you around the web wherever you go, sucking up your browsing history like a vacuum. In a 2015 study published in the International Journal of Communication, the authors studied the 3rd-party connections of webpages and found that Google tracks users on nearly 80% of the top one million websites.

This widespread tracking by Big Tech is a key component to how these companies create extremely accurate profiles on each one of us, even if we don’t have a Facebook or Google account and don’t opt-in to their services and agreements. Each one of us is categorized based on our browsing history and this information is sold to data brokers and advertisers, and potentially shared with insurance companies and law enforcement.

If you’re still wondering why it matters that Google has your browsing history, check out this great article I wrote all about the top reasons you should care about Google tracking.

In order to evade Big Tech tracking, you need a powerful ad and content blocker on your web browser. With uBlock Origin, you’ll be able to browse the web while evading trackers, filtering out the obnoxious ads, and focusing on the content you want to see.

How Does uBlock Origin Work?

Unlike other ad blocking extensions like AdBlock Plus, uBlock Origin is a general content blocker, not just an ad blocker. Let’s talk about the basics of how ad blocking works in order to understand what this means.

When we connect to a webpage, that webpage may be connecting to servers other than its own in order to load the content on that page. For example, a website may connect to another server if the website owner uses certain webhosts, has ads, captchas, uses a content distribution network, among other applications.

uBlock Origin interface for lifehacker.com

On uBlock Origin, you can see the list of all the domains that a site is requesting information from. For example, in the screenshot you can see that lifehacker.com is connecting to a lot of other domains, including Facebook, Google analytics, and Amazon ads. Most big news websites will do the same.

Normally, ad-blocking works by having a “blacklist” of domains so that when your browser attempts to connect to a webpage, it blocks any connections on that list and allows everything else. uBlock Origin calls these the “Filter Lists”.

Of course, this means that the effectiveness of your ad-blocking is only as good as your filter lists. If a new ad network pops up tomorrow and you don’t have their domain name on your filter list, the ads from that domain will not be blocked. uBlock Origin gives you the option of enabling a selection of reputable filter lists that are continuously maintained and updated.

What is the difference between ad blocking and script blocking?

First, let’s understand exactly what makes up the webpages on the internet. Each website consists of:

  • HTML (the content of a webpage: headings, text, images, etc.)
  • CSS (how a webpage looks: fonts, colors, spacing, etc.)
  • Javascript (the functions of a website: search, forms, tracking, etc.)

You may have heard that HTML and CSS are not truly programming languages. Instead, Javascript is the programming language of the web. The technical reasons aren’t important, but what you should know is that HTML and CSS are a lot more limited in functionality than Javascript, so in general they are safer to load in a webpage.

Unlike CSS, Javascript code is written directly within the HTML. If you’re familiar with HTML at all, you’ll know that everything in HTML in separated by tags in angled brackets, for example a paragraph is denoted by “<p> Text of the paragraph. </p>”. Likewise, Javascript is denoted by the tag “<script> Javascript code goes here. </script>”.

When uBlock Origin blocks Javascript, it prevents these sections of code surrounded by “<script>” tags from executing. As opposed to regular ad blocking with filter lists, blocking Javascript lets only the HTML and CSS code on a specific domain execute rather than simply blocking everything from that domain.

Blocking Embedded Content

Similarly to Javascript, embedded content is denoted by “<iframe>” tags, short for Inline Frame. This feature is basically a website within a website, and is used mostly for inserting interactive media. Here is an example of the code for an embedded YouTube video within an iframe:

<iframe width="560" height="315" src="https://www.youtube.com/embed/B1CPE6WWsAQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

When you block “3rd party frames” in uBlock Origin, the extension stops any code within those “<iframe>” tags from executing.

Deciding What Level Of uBlock Origin User You Are

uBlock Origin icon color changes based on user mode

Easy Mode

Easy mode is for the user that needs set-it-and-forget-it levels of convenience. If you can’t be bothered with trying to fix websites and you just want your browser to work when you need it, go ahead and use uBlock Origin on Easy Mode.

You’ll use the on/off power button control if you find a broken website. Understand that this gives you no protection when turning the extension off, but if any inconvenience is a deal breaker for you then I’d rather you had the protection when websites aren’t broken, which will be most of the time on Easy Mode.

At the very least, I encourage you to open the extension and check out the list of domains each website connects to so that you’re aware what a website might be doing in the background. You might be surprised at how often you see sites connecting to Google and Facebook domains.

If you’re feeling adventurous, you can try turning on dynamic filtering (see below) to block or allow 3rd-party domains on an individual basis, which will give you much finer control.

Medium Mode

Medium Mode is for the user that wants more control over what is loaded on a website, but doesn’t want to spend all day fixing every website they connect to. This is the happy medium that is recommended for most advanced users.

Medium Mode blocks all 3rd party scripts and embedded content by default. Your filter lists will still work the same as in Easy Mode, but you will get some additional protection against tracking and malicious embedded content.

Hard Mode

Since the effectiveness of your ad-blocking depends on the accuracy of your filter lists, another approach is to block everything by default and then whitelist the domains that we do want to connect to. This basically describes Hard Mode.

I only recommend Hard Mode for users with extreme threat models or those who wish to have OCD-levels of control over their browser connections.

In Hard Mode, all 3rd party content will be blocked. Expect to spend a lot of time unbreaking websites in this mode, at least at first. Eventually, if you save your whitelist rules, the number of websites you come across that you haven’t visited before will decrease and you’ll spend less time fixing them.

Later in this article, I will cover my best tips on how to know which domains to whitelist and fix a broken website quickly and effortlessly. So, if you choose Medium or Hard Mode, be sure to check that out.

Installing uBlock Origin

Add-ons and themes menu for Firefox
  • Click on the hamburger menu icon and select “Add-ons and Themes” to open the Add-ons Manager
Firefox add-ons search bar
  • Search for “uBlock Origin” in the search bar
Add to Firefox button for uBlock Origin add-on
  • Click on the uBlock Origin result and click “Add to Firefox” to install

Every browser is a little bit different, so instructions may vary a little depending on what browser you use. I’ve written the instructions above for the desktop version of Firefox. If in doubt, look up how to install an extension for your specific browser.

Set-up And Use Of uBlock Origin

After you install uBlock Origin, it should show up as an icon in the upper-right corner of your browser. When you click on this icon, the uBlock Origin interface will pop up. You can customize how much information you want to see on this interface by clicking on “More” or “Less”. It ranges from a single power button to control the extension, to a breakdown of all the domains that are connected on the current webpage. Hover over the icons to see a description of their functions.

Opening the List of Domains

uBlock Origin advanced user interface
  • Click on the uBlock Origin icon to open the extension
  • Click “More” until you see the list of domains on the left-hand side

Now, click on “More” until you get the list of domains on the left-hand side. This is where you can see which domains a website is connecting to, and you can see which domains have blocked or allowed content by the plus and minus icons next to each domain name.

The amount of content blocked or allowed is indicated by the number of pluses or minuses, where one minus indicates that under ten network requests were blocked, two minuses indicates that under 100 network requests were blocked, and three minuses indicates that over 100 network requests were blocked.

Miscellaneous Privacy Settings

uBlock Origin privacy settings
  • Click on the gear icon to open the uBlock Origin Dashboard
  • In the “Settings” tab, check all five boxes under “Privacy”

Now we’re going to go to the uBlock Origin “dashboard” (a.k.a. settings page). Click on the extension icon and click on the gear icon to open the Dashboard (click “More” if you don’t see a gear icon.)

By default we should be under the “Settings” tab. In this tab, under the “Privacy” header, check all five of the options. Click on the circle with an “i” to take you to the uBlock Origin wiki to learn more about each of these settings.

Selecting Filter Lists

uBlock Origin filter lists
  • Go to the “Filter lists” tab
  • Expand all categories by clicking “+ # network filters + # cosmetic filters from:”
  • Check the box next to every filter list
  • Click “Apply changes” and then “Update now”

Next, go to the “Filter lists” tab. Now, I’m going to recommend that you expand all the sections and select all the filter lists. If you’re just using uBlock Origin on Easy Mode and you find that websites are breaking too much for your liking, consider deselecting some of these filter lists. If you’re going to go through the trouble of dynamic filtering on Medium or Hard Mode anyway, I think it makes sense to just use all the available filter lists.

Now, if you plan to just use uBlock Origin on Easy Mode, where you’ll just use the power button when a website breaks, you can stop here. For the rest of you that want precise control over what elements of a page are loaded, continue on with the next steps to turn on dynamic filtering.

Medium & Hard Mode Settings for uBlock Origin

Turn on Dynamic Filtering

uBlock Origin advanced user setting menu
  • Go to the “Settings” tab
  • Check the box next to “I am an advanced user”

Go back to the “Settings” tab and check the box that says “I am an advanced user.” Don’t be too spooked by the warning in the “required reading” link because I will teach you exactly how to use this feature. This turns on what uBlock Origin calls “Dynamic filtering.” Exactly what this allows you to do will become clear to you in a moment. In essence, it gives you complete control over what domains are allowed and blocked on a per-website basis.

Now, close the uBlock Origin dashboard and go a regular tab, it doesn’t matter which website you have open. Click on the uBlock Origin icon and you will notice that your interface has a few differences. Namely, you now have two gray columns next to each domain and a few persistent items at the top such as “images,” “1st party scripts,” “3rd party scripts,” etc. Let’s go over what these elements mean and how to use them.

How To Use Dynamic Filtering

First, let’s briefly discuss how to block or allow a domain using either of these columns. When you hover over one of these columns, you should see the box splits into two colors. Click on the red side to block and the gray side to allow. It is that simple. Now, let’s talk about the differences between the two columns.

The first column next to the list of domains denotes your global filtering rules that apply to all websites. The second column denotes your filtering rules for the individual domain that you are currently on. The current domain is shown just below the power button and should match the domain that you typed into your address bar.

Let’s look at an example to help explain this. If I went to facebook.com and saw that ad-host.com (I don’t know that this website exists, this is purely for explanatory purposes) showed up in the domain list in uBlock Origin, I could block this domain in two different ways. If I blocked it using the first column, ad-host.com would remain blocked if I opened a new tab and went to google.com. If I blocked it in the second column, the rule would only apply to the facebook.com domain, so when I open a new tab and go to google.com, ad-host.com would not be blocked.

Now that you know how to use dynamic filtering, let’s cover how I recommend that you set this up.

Set Up uBlock Origin in Medium Mode

uBlock Origin interface for medium mode
  • Open the uBlock Origin interface in any browser tab
  • In the first column, hover and click the red color next to “3rd-party scripts” and “3rd-party frames”
  • Click the lock icon to save your settings

Set Up uBlock Origin in Hard Mode

uBlock Origin interface hard mode
  • Open the uBlock Origin interface in any browser tab
  • In the first column, select red next to “3rd party”, “3rd party scripts”, and “3rd party frames”
  • Click the lock icon to save your settings

This setting breaks websites more than half the time, so don’t say I didn’t warn you. Next, I’ll go over my best tips on how to quickly fix a broken website and get back to browsing the web in no time.

How To Fix Websites Broken By uBlock Origin

How do I know when a website is broken?

A broken website can manifest in several different ways: it could mean that the formatting is off, the menu doesn’t display correctly, or certain content is missing such as images, videos, captchas, or forms.

In uBlock Origin, there are two main methods of fixing a broken website, either:

  1. reverting the rules for the website to the next easiest mode, or
  2. using dynamic filtering to whitelist connections on a per-domain basis.

How to revert to the next less restrictive mode

If you’re on Easy Mode, you are simply going to hit the big power button if a website breaks. This will allow everything to connect on this domain, but the extension will still function as normal in your other tabs and at any other webpages you visit.

If you’re on Medium Mode, click in the second column next to “3rd party scripts” and “3rd party frames”, changing this section to a gray color. This will revert this domain back to Easy Mode, other webpages will remain in Medium Mode.

If you’re on Hard Mode, click in the second column next to “3rd party”, changing this section to a gray color. This reverts this domain back to Medium Mode, while other webpages are unaffected.

Fixing websites on a per-domain basis using dynamic filtering

If you turned on dynamic filtering in the tutorial above, you will now have much finer control and be able to allow some things while blocking others. When you come across a broken website, the general process is this:

uBlock Origin interface with buttons highlighted to fix websites
  • Click on the icon to open the uBlock Origin interface
  • In the second column, select a domain that is currently red and select gray instead
  • Refresh the page and repeat if the website is still broken
  • Click the lock icon when the website is working to save your rules for this domain

Once you get the website working how you like, click the lock icon to save your settings. Now whenever you revisit this website, it will remember your rules and allow your preferred amount of content.

Trial and Error: Which domains to whitelist first

In this section, I’m going to cover exactly in which order I recommend that you allow connections in order to unbreak a website. Don’t worry if you feel a little overwhelmed at this trial and error process at first. You will get faster at fixing websites over time and with practice because you will learn to better recognize which domains to whitelist.

I recommend unblocking domains in this order:

  1. Any domains that are written in blue text
  2. Domains with the largest number of blocked requests, indicated by the number of minus signs from one to three
  3. Domains with “cdn”, “static”, or “image” in their name

I don’t recommend allowing any sort of ad or tracking-type domains such as Google Analytics, Doubleclick (Google Ads), Google Tag Manager, Amazon Ad System, or Facebook domains.

Note that if you come across a website with a Google captcha, you need to first unblock google.com, refresh the page, then unblock gstatic.com and refresh the page again in order to see the captcha.

A lot of recognizing which domains to whitelist can just be using a bit of common sense and pattern recognition. For example, on Barnes & Nobles’s website, I see the domains “images-bn.com”, “js-bn.com”, and “bn-web.com”. I would try whitelisting these domains first since they are probably the property of Barnes & Noble given the “bn” in each of these domain names.

Frequently Asked Questions

Will uBlock Origin block ads on YouTube/Twitch/Spotify?

No ad blocker can guarantee that it will block all the ads on any particle website. This is because advertisers often play a “cat and mouse” game with ad blockers, where advertisers will find a way to get around the blocker and then later the blocker will come out with a fix and so on.

On YouTube, I haven’t personally seen an ad that wasn’t blocked by uBlock Origin. However, there’s a better way to view YouTube videos that I talk about in this article which will ensure you never gets ads while watching YouTube videos ever again.

In any case, if you’re having trouble with unwanted ads coming through, I would follow the tutorial above to turn on dynamic filtering, then see if you can figure out which domain the ads are coming from. Alternatively, try uBlock Origin’s element zapper mode to select the content you want to block.

How does uBlock Origin compare to other similar browser extensions?

There are two differences that stand out in my eyes when comparing uBlock Origin to other ad blockers:

  1. uBlock Origin does not have an “acceptable ads” program, and
  2. uBlock Origin is a general content blocker, rather than just an ad blocker.

uBlock Origin does not have an “acceptable ads” program like AbBlock Plus. In this program, advertisers just have to pay enough and jump through a couple of hoops to continue serving you ads. While it’s an interesting way of regulating online advertising, personally, I would like to be the judge of which ads are acceptable or not on my browser.

In addition to ad-blocking, uBlock Origin can also block Javascript by default, effectively replacing extensions like NoScript. This multi-functionality allows us to have fewer browser extensions installed which protects against browser fingerprinting.

Is uBlock Origin safe?

I trust uBlock Origin because it’s completely open source, free software and the developer is transparent and does not monetize the project. They do not have a central server to send data to, so you can rest assured that all personal data is saved locally on your device.

Also, I like that the extension has a large user base (at the time of writing it’s the most popular extension on Firefox). This means there is a greater chance that if something malicious were put into the code, it would be discovered and reported on very quickly.

Does uBlock Origin make websites load faster?

Contrary to popular belief, I don’t find that blocking ads with uBlock Origin makes webpages load faster. This Spanish study found that using a content blocker has a negligible impact on loading time.

Perhaps it might be true that a page loads faster if you’re on Easy Mode and a broken website is a rare occurrence. However, once you have to fix a broken website it is certainly slower since now you have to open the extension and refresh the page, sometimes multiple times.

The more accurate benefit, if you’re on mobile data for example, is the slightly reduced bandwidth since the webpage has to load fewer elements.

Why Can’t I Set Dynamic Filtering to Green? Why Is There Only Gray/Red Options?

If you’re like me, I found it very confusing at first that the “allow” option is not green, the intuitive color associated with allowing things to pass. Even more confusingly, if you look up some older tutorials on how to use this extension, they will tell you to allow a connection by selecting the green box.

The reason is that uBlock Origin used to have three options, green, gray, and red. I won’t go into the exact differences between green and gray (read this). In the end, the developers decided to get rid of the green option altogether because users were not understanding how to use it as it was intended. Now, due to unfortunate UI decisions (in my opinion) we are left with the gray/red option.

Conclusion

If you’ve gotten to this point, congratulations because you now have the ability to stealthily browse the web and evade detection from 3rd-party trackers. You can browse the web with confidence knowing that you control what is loaded in your browser. uBlock Origin is the most powerful ad and script blocker out there and once you learn how to use it you won’t want to browse the web without it.