Adverts on the internet can be a serious pain. Ads often are intrusive with flashing or moving images, some adverts include sound, and some adverts end up taking up most of or overlaying the entire page. The worst type of ads are known as malvertising and end up linking to malware. All of these ads get in the way of you accessing the content you wanted to view. You also need to download all of the adverts served to you, pushing up your data usage, which can be a problem on limited mobile or home internet data plans.
A common solution people turn to is an ad-blocker. These tools are extensions and add-ons for your browser that apply community-generated filter lists to hide and even block the download of ads. These community-generated blocklists are never going to be perfect, so occasionally you still run into an ad. Thankfully, ad-blockers like uBlock Origin allow you to manually block ads that you come across.
There are two relatively simple ways to block adverts with uBlock Origin. The first method involves using an element picker to highlight the part of the web page that you want to block. To use it you need to right-click on the advert you want to block and select “Block element…” with the uBlock Origin icon from the right-click menu.
In the bottom right of the page, an overlay popup will appear with a suggested network filter and a number of suggested cosmetic filters.
Tip: Network filters block requests from being made, preventing an ad from being downloaded. Cosmetic filters hide an element after it loads, this hides the ad, but it will still download. The element picker technique is more suited to creating cosmetic filters, while the network logger method is more suited to making network filters.
Tip: You can move the overlay if it’s covering the advert you want to block, by clicking and dragging it.
Clicking on the suggested cosmetic filters will highlight the section on the page that would be affected. Each entry in the suggested cosmetic filter list gets progressively less precise. The top suggestions will block a single element while the suggestions nearer the bottom may block entire columns or most of the page. Ctrl-clicking allows you to highlight all similar elements in the page
If none of the suggested filters highlights the part of the page you want to block, you can click outside of the overlay popup to enter the element picker mode. In this mode you can click or ctrl-click on the exact part of the page you want to block.
Once you’ve selected or customised the filter you want to apply, click “Create” in the overlay popup and your rule will be instantly applied.
The other method of blocking an advert is through the network logger, unfortunately, using it is less intuitive. You can open this by clicking on the uBlock Origin icon in the extension bar in the top-right of the browser, then clicking on the “Open the logger” icon that is second from the right at the bottom of the popup window.
Once the network logger is open, refresh the page you want to block an ad on. You can do this by switching back to the tab and refreshing it, or you can click the “Reload the tab content” icon in the network logger window.
The network logger shows a list of all requests made by the tab after the logger was opened. Unaltered requests will be coloured white, requests blocked by a filter will be highlighted red, cosmetic filters will be highlighted yellow, and explicitly allowed items will be highlighted green.
Next, you have to identify the advert or other item you wish to block from the network traffic. This can require trial and error, but generally, you’re looking for network requests that mention ads or come from a URL that matches a common ad or analytics network.
Once you’ve determined the request that you believe to be the advert, hover your mouse over the request and click on any of the three columns that highlight blue. These columns are the second, third and fifth columns from the left.
Clicking on any of those three highlighted columns will open the details view. To create a new rule, switch to the “URL rule” tab. Here you will see a breakdown of the URL that you selected, you can decide at what level you want to block it, ranging from that specific resource to everything from that domain.
Tip: Specifying the exact resource to block can result in you needing to block other resources from the same location, so it can be a good idea to block everything from a folder level or two down. Conversely, blocking everything from the domain can end up blocking too much, especially for first-party resources. A balance needs to be struck between the two approaches to block enough but not too much.
Next, you need to use the left column to specify whether you want to allow or block the resource, green means allow, red means block. The grey option in the centre means no-operations, which prevents other rules from acting on that resource.
If you apply a filter to anything other than the top row, which specifies the specific resource, the rule will be applied recursively up the list, as shown by the paler colour applied.
Near the top of the “URL rule” tab are two drop-down boxes, “Context” and “Type”. “Context” defaults to the rule only applying on the current subdomain, you can also select the current domain or all websites. The “Type” drop-down the box allows you to choose what type of resources the rule will affect; the default is the same type of resource you clicked on e.g. scripts or images. You can also apply it to any resource with the asterisk.
Tip: A domain is a website that you’re visiting, e.g. technipages.com. A subdomain is separated by words before the domain and is distinct websites in their own right e.g. www.technipages.com.
Once you’ve set your filter, press the reload icon in the top right of the URL rule tab to refresh the page you’re applying the rule, with the rule applied. Now you can check that your rule blocked the advert as you wanted it to. If the advert is still present, you can just undo the rule and try again. If the rule correctly blocked the content, you should save it by clicking the lock icon at the top-left of the URL rule window.