uBlock Origin: how to remove any element from a page permanently

The following guide explains in simple terms how to remove any element on any web page permanently using the browser extension uBlock Origin.

Ublock Origin is a content blocker that works really well out of the box. It supports lists that you can subscribe to, to improve the blocking of certain types of annoyances on the Internet (e.g. social media plugins, malware domains, trackers), options to whitelist sites to support them or make them work, a custom filter list, and an element picker that you may use to remove elements permanently from pages.

While uBlock Origin works well out of the box, you will get the most out of the extension if you know about the features that it offers besides that.

This article looks at the extension's Element Picker feature. It can be used to hide elements permanently on pages that the default set of rules do not block.

Note that uBlock Origin is available for several web browsers including Firefox and Chrome. To the best of my knowledge, all support the Element Picker functionality.

Blocking elements on web pages permanently using uBlock Origin

The first thing that you need is uBlock Origin (doh). Visit the extension's GitHub page, and either download the extension from it directly, or follow the links on the main page instead to the add-on repositories for Firefox and Chrome.

You may use the feature of uBlock Origin to hide YouTube comments, recommendations, suggestions, or any other element on a page that you don't need, find distracting, or find annoying.

Hiding elements on pages permanently using uBlock is a two-step process.

Step 1: Selecting the element that you want to block

You have two options to invoke the blocking functionality of uBlock Origin. You may either right-click on any element in the browser and select the "block element" option from the context menu.

Once you select the option, the element right underneath the mouse cursor is highlighted in red, while the remainder of the page is darkened.

You may adjust the selection by moving the mouse cursor and clicking once elsewhere. This enables element picking mode which highlights the element the mouse is on at any point in time.

So, if the action did not pick the right element right away, you need to click once, and move the mouse around until it gets it right.

Click again to lock the selection. The extension's element picker mode uses two different icons that indicate its status.

The stop button indicates that an element has been locked. You will notice that elements are not selected anymore when you move the mouse. The selection icon on the other hand is easy enough to spot as it selects elements the mouse cursor hovers over.

Step 2: adding the new rule

Now that you have made a selection, it is time to add the rule to uBlock Origin so that the selected element is removed from the page.

This step can be a bit confusing, as there is no real indication what to do at this point. You need to move the mouse cursor to the lower right of the browser window once you have locked an item to reveal the semi-transparent rule creator.

Take a look at the screenshot above to see where it is located on a page.

A click on preview removes the selected element temporarily so that you see how the page looks like without it.

Click create to add the rule to uBlock Origin. If you do that, the selected element is removed from the page. It stays hidden even if you reload the page.

Note: some sites use dynamic identifiers for some elements on their sites. This may result in you blocking the element on one page, but not on any other page of the site. The only option you have in this case is to find a common denominator and block that instead. It is usually best to use the built-in developer tools for that to go through the page source.

Removing filters again

Now that you have set some filters, you may at one point in time want to remove filters again. You do that by right-clicking on the uBlock Origin icon in the browser and selecting the options link.

Switch to "my filters on the page that opens. There you find listed all custom filters that you have added earlier or imported.

You need to remove all lines of a filter. This is rather easy to do as filters are always separated by a space, so that you know where filters begin and end.

Select apply changes afterwards to save the selection again.

Closing Words

The browser extension uBlock Origin makes it super easy to block content on web pages you visit. All it takes is a couple of clicks, and sometimes some manual adjusting, to block elements permanently.

Now you: do you use custom blocking rules for sites?

Summary

Article Name

uBlock Origin: how to remove any element from a page permanently

Description

The following guide explains in simple terms how to remove any element on any web page permanently using the browser extension uBlock Origin.

Author

Martin Brinkmann

Publisher

Ghacks Technology News

Logo

Advertisement

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:

About Martin Brinkmann

Martin Brinkmann is a journalist from Germany who founded Ghacks Technology News Back in 2005. He is passionate about all things tech and knows the Internet and computers like the back of his hand.You can follow Martin on Facebook, Twitter or Google+

Comments

Thanks very much for this, Martin. That’s a favorite uBO feature of mine. I think some more articles on ghacks about what else can be done with uBlock Origin and how to do it would be very useful. I often feel as though I’m only scratching the surface of what the add-on is capable of. I’ve read elsewhere about how to use uBO but these other things I’ve read are never as clear and useful as your articles!

The element blocker and logger are pretty straightforward, making custom filters for dynamic scripted elements is much more difficult. The element blocker and logger don’t even list contents of scripts so there’s no way to isolate a dynamic element without blocking the entire script. Info on uBO’s page about them is practically non-existent.

Even if I’ve been using uBlocko (“o” as Original, what else?!) since it was launched there are still features I lack less to use than to totally master.

On the developer’s GitHub page there is the issues page (that concerns issues rather than simple questions even if the latter are accepted) and a dedicated Wiki, quite substantial (not all Wikis are) .

There are several threads on Wilder Security Forums where you can search and find, and ask if you have an account.

As always when we learn there are two steps, the basics and then the questions arising from what we’ve learned. This article anticipates on one of those questions (or brings it up to light). For other questions, and answers not available on Wilder Security Forums, I do agree that gHacks would be a great place to ask but that would require a dedicated topic so to say. I believe such a topic would be pertinent because of the importance of the very feature of blocking elements of the Web (security, privacy, mental health) and because in that area my opinion is that uBlocko is the best.

uihu8yg8 said “i accidentaly blocked youtube and now i cant unblock youtube”

A quick fix which might work would be to uninstall uBlock Origin, then re-install it. However, if you’ve permanently zapped and removed a number of elements from web pages, then you may not want to do something drastic like this, as you’ll likely lose all your custom filters.

So then the other solution is to go into uBO’s options and remove the custom filters pertaining to youtube. To do this first click on the red uBO icon on your browser’s toolbar, then click on the options icon–the three horizontal sliders halfway down on the right-hand side just below the big blue on/off circle. Then click on the “My filters” tab and go through and remove (highlight and delete) any which pertain to youtube. You can use the search box at the top of the filter list: type in “youtube” and it will tell you how many there are and you can remove all of them. Good luck!

what i did was not opening it in Notepad , but open everyting in one Excell and there is a function delete duplicate rows. By that i agree you don’t know which were different, but ALL duplicate ware removed. Now that Excell has no longer the 65K row limit it is an option to do so.

I’m using ublock origin and the only thing I miss from ABP is the element hiding helper that was working way better than what ublock got. ABP’s elements selecting was giving me the ability to pick objects on page really precisely and block them permanently, while ublocker’s tends to hide elements per single page, not for all subpages (news sites for example) and often skips objects – it’s either you block object x and y by accident or nothing at all.

Interesting…I’ve used both ABP element hiding helper and uBO to block extensively and never noticed a difference, although that may just be me. I am able to use uBO’s selector to pick very precisely any objects I want to block, and if I block something on the home page of a news site, for example, I think it works on all subpages of that site as well. I can’t immediately think of a reason, though, why our experiences should be different…

I guess you’re aware that when using uBO’s element picker, in the bottom-right popup that appears on your screen you have a ‘Custom Filters’ list allowing you to fine tune the picked element, and that you may as well use the ‘Preview’ button to see exactly what the filter blocks on that page. It’s just a matter of forgetting ABP’ method and applying that of UBO which is, IMO, far more granular.

> ublocker’s tends to hide elements per single page, not for all subpages

That is just false. The cosmetic filters created apply to a whole site — there is actually no filter syntax to limit a cosmetic filter to a single page. Provide a *specific* case in support of your claim, there is always an explanation.

gorhill, if that’s really you, I am not accusing you for anything – sorry if you feel offended (tho honestly, I hardly see any reason in describing my experiences) but that was was happening; picker was hiding element on a single page and when I opened another article again from same service, element was still visible. I stopped visiting that place as its content started to be really poor and also because my lists choices nuked all graphics and made page displaying only text. That was Dziennik Łódzki site.

I do admit, maybe I didn’t wrote the previous comment using well chosen words.

I am not saying ublock origin is a bad extension – I love it, it’s just that element hiding with mouse I would really like to use but it always disappoints me.

Not working, I really wonder with that tool “element picker” how I could remove this blue thing asking to install Qwant in each page? With “ABP element hiding helper” I was capable in one click to remove it. In the wiki I have not found any clear explanation about that.

When I point out inaccuracies or incorrect information, it’s not because I am “offended” (something quite rare, if ever), it’s simply to correct the inaccuracies or false information, for the benefit of the author and all readers.

When I ask for specifics, it’s to investigate and provide an explanation as to why something happens, again for the benefit of all. Unfortunately you did not provide enough specifics for me to investigate and explain what you have experienced (specifically which element(s) on which specific web page URL(s) are the minimum needed).

I agree about ABP element selection being easier. You can use keyboard shortcuts (if I recall: w-wider, n-narrower) to make the selection box larger or smaller without having to move the mouse around and stumble on the correct positioning. That’s definitely a feature I wish uBO had.

But as gorhill stated, you’re incorrect about the rules working on a single page basis. They work on all subpages unless (as Martin pointed out) the web developer has used dynamic identifiers on each page.

As explained in a comment below, you do not need to select exactly what is to be removed, you can select whichever suggested filters in the list matches best what you want, they are listed in order of broadness. Whereas with ABP’s Element Hiding Helper you must narrow/broaden before clicking a position on the page, with uBO’s element picker you decide after selecting a position on the page. With uBO’s element picker, after clicking one can still manually edit the filter, with real-time update of the element(s) which will be affected by the filter.

I have this extension installed on Chrome and Firefox on all systems in my organization. We have created several My-Filter lists and have about 20 or so already set up. We started using the default 3rd-party filters and on having used the extension for sometime now, we have made a few changes that suit us more. It is an outstanding product.

We removed Adblock Plus on both browsers, but we sill use NoScript on FF. NoScript could be removed too, but we have not made that decision yet. We had to access the wiki for direction – I am an IT Pro so it was easier for me to grasp what was needed, but others told me it was a bit over their head. I think tweaking or customizing is a bit intimidating for noobs, U-matrix is even more ‘fun’ – we chose to go with UbO even though u-matrix is really powerful.

As said in the article, sometimes a site will use random-looking ids/classes, in which case the cosmetic filters created will apply only one time.

Also, there are actual filters in uBlock filters, selected by default, to hide the “People You May Know” box, so you should not be able to see them, unless you disable uBlock filters — not recommended. Or maybe you disabled cosmetic filtering for the page? Anyway, seek assistance, there is always an explanation, and this will prevent you from reaching erroneous conclusions about what the element picker can or can not do.

When you need to deal with harder cases such as random ids/classes, ask assistance from more technical users, the element picker in uBO is far more powerful than it’s UI suggest, one can create cosmetic filters for elements afflicted by random ids/classes through the element picker, it just requires deeper knowledge about how cosmetic filtering work.

I would suggest another important tip, often overlooked by users: there is nothing in the UI which implies that a user should *only* pick the first suggested cosmetic filters.

One does not have to pick *exactly* the element which is to be hidden, one just need to pick something which is *over* the element which is to be hidden. uBO’s element picker will always offer as choices *all* the elements found directly under the mouse, from the most specific to the less specific. This is explained in the wiki, but here is a video demonstrating this: https://www.youtube.com/watch?v=8TvCGWwQr5o

I’m always using it to block Google’s “you should try chrome” “chrome can translate this and that without the need of an extension” “set google as your homepage” etc kind of nonsense. I gathered a fairly large list full of their annoyances that are found on Google/Translate websites. And on many other sites, all sorts of floating useless buttons, huge banners asking for login when I’m not interested in doing so, etc.. Given how complex this extension is, I was really surprised how easy it makes the custom element blocking.

I’m also using it to block certain fonts which I don’t like how they look, like them being too blurry..

I “discovered” uBlock Origin’s individual-element-blocking feature “on my own” around a month ago, after reading somewhere that it existed. I love it and have been going to town on sites with non-functional floating banners that eat up a third of the page’s vertical display space. Now if there were only a way to zap those big warnings that you are playing a video in full-screen mode… (Really? I’m in full-screen mode? Is that why the video is taking up the whole screen? I had NO idea, but thanks to this big obtrusive warning pop-up that blocks the video for five seconds, I finally understand. Thanks, full-screen-video-warning pop-up! /s)

try the ‘full-screen-api.’ prefs in about:config. afaik setting both ‘full-screen-api.warning.delay’ and ‘full-screen-api.warning.timeout’ to 0 should hide those messages. There are others you might be interested to try like ‘transition-duration’ etc.

Thank you, earthling! I’ve just changed the preferences you mentioned in Firefox. Unfortunately, my primary browser (where I easily spend 99% of my browsing time) is Pale Moon 26.5 and the warning and transition preferences are nowhere to be found. When I have a bit more time, I’ll test out the results in Firefox, and if they’re good I’ll check out Pale Moon 27.x portable and see if the preferences are present there. Full-screen warnings don’t annoy me enough to give up certain extensions that are no longer supported in 27.x, but if and when I’m ultimately forced off of Pale Moon 26.5, I’ll know where to look. So again, thanks!

I downloaded and “installed” Pale Moon Portable x64 27.1.1 last night (it was fresh out of the oven!), and it still has no full-screen-api warning or transition preferences.

In Firefox, I loaded videos from a few different sites and made them full-screen. I still got the same warning pop-ups I get in Pale Moon, so there’s probably more than just the full-screen-api stuff going on. Curiously, for the first time I noticed that on YouTube and Democracy Now, the pop-ups were smaller (one line) than the ones I remember, only lasted around 2 seconds, and actually turned into auto-hiding “control bars” like the ones you can set up for VirtualBox virtual machines when they’re in full-screen mode. (If you move the pointer to the top of screen, the control bar slides down and you can click on it to exit full-screen.) It didn’t do the control bar thing on the other site I tried. I’m going to have to continue playing around to see whether I still get really big warning pop-ups on other sites, but for now, I can live with the one-liners I’m getting. So still, thanks!

Instead of disabling UBO, Check “I am an Advanced user” in settings. That enables you to override certain blocks and figure out what is blocking video. I also run Privacy Badger. Example: I look at foxnews videos and had to move slider to disable only 2-3 block filters to view video. It may also help to right-cllick on video and inspect element to get a idea ov what needs to be unblocked. 2mdn and fncstatic

after the update to 1.14.4 block element doesn’t work any more. sometimes works for one element witch isn’t blocked (after a refresh) and after that using block element doesn’t do anything. old blocked elements seem to stay blocked but new ones don’t; although they appear blocked in the my filters page

Thats because of websites, they are now generating the sections with random names. They also send ads using imgdata, encoding it into base64 instead of direct linking. I am yet to find a solution to this. So fed up with internet casinos and crap.

If you’re having issues on elements on sites that keep changing right might have to open it in element inspector to get the correct parent name. Just make sure to test one level at a time because if you go up too far you might end up removing too much.

About gHacks

Ghacks is a technology news blog that was founded in 2005 by Martin Brinkmann. It has since then become one of the most popular tech news sites on the Internet with five authors and regular contributions from freelance writers.