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.
Side note: Most browsers enable you to block page elements temporarily.
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?
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!
Thank you Hy. If there is enough interest, I might add a couple more. I think the logger is something that deserves more recognition for instance.
I agree with Hy. Your article is quite informative.
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.
I would love more articles on uBlock Origin. I knew that it had this element blocker but never really knew how to use it. This was a very clear and useful article.
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.
Perfect! I was stumped, but your extremely clear step-buy-step did the trick! Thank you!!!
i accidentaly blocked youtube and now i cant unblock youtube
)_;
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!
here’s a filterlist, that has alot of good stuff
https://filterlists.com
It’s literally same stuff ublock origin shows inside its preferences dash.
There’s more to it and some filters, not included in uBlock Origin’s preference dash (3rd-party filters) may be added within the ‘Custom Filters’ category available at the bottom of that page.
Question is Tom, if some lists are redundant in its contents; I have no clue if there’s a way to check that beside opening Notepad and comparing entry by entry
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.
It’s excellent indeed. Summarizes all filters lists available, those included with uBlockO as well as other lists so called “Custom”.
Interesting list, but when I click on an “Add” button, the filter is not added to my uBlocko filter list. Is there something special to do?
uBlock Origin Plus uBlock Origin extra ….Can’t go wrong with this ad blocker,Been using
for years … Does what it says …
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.
! 2/17/2018, 10:09:14 PM https://www.qwant.com/
http://www.qwant.com###a_77
! 2/17/2018, 10:09:38 PM https://www.qwant.com/
http://www.qwant.com###a_35
! 2/17/2018, 10:10:03 PM https://www.qwant.com/web
http://www.qwant.com###a_31
! 2/17/2018, 10:10:20 PM https://www.qwant.com/news
http://www.qwant.com###a_37
! 2/17/2018, 10:10:36 PM https://www.qwant.com/videos
http://www.qwant.com###a_43
! 2/17/2018, 10:10:47 PM https://www.qwant.com/shopping
http://www.qwant.com###a_49
! 2/17/2018, 10:11:04 PM https://www.qwant.com/social
http://www.qwant.com###a_44
! 2/17/2018, 10:12:05 PM https://www.qwant.com/all
http://www.qwant.com###a_41
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.
> sorry if you feel offended
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).
gorhill, how to one blocks a www section that has random name. An example:
##asdasijqwen
on next reload:
##9axfm9
and so on. These things start to appear.
And btw, thank you for ublock!
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.
> move the mouse around and stumble on the correct positioning
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 was wondering if you can white list a site (to allow their adds) but still apply custom rules to hide some cosmetic stupidities ,like facebook-like links and huge useless banners.
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.
You can also use ublock as a script blocker but for newbies it has a learning curve.
Ublock is nice because you can use it out of the box. If a page is not working, just hit the disable button. Every newbie should understand it. :)
THE must-have extension by excellence, µBlock is really great !
Thank you for the clear article, Martin.
Also note there’s now a version for Edge.
@Martin Brinkmann
would you mind forwarding an email to Pants for me? Can I send it to [email protected]?
Sure ;)
Thank you, I appreciate it. Just sent it using a sharklasers.com address.
Done.
But it works only temporarily on Facebook page.
I wanted to remove the portion “People you may know” because I found some of the profile photos objectionable.
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.
Hey Martin please will you review 360 total security,
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
Good point and thanks for chiming in. It is common sense, but make sure the element you pick only hides the elements you want to hide.
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!
You’re welcome :)
@earthing:
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
Hi Martin
How did you got this nice and clean context menu? (from the second screenshot I mean)
It is the default Chrome context menu, or am I mistaken?
best response so far for a non technical person. thanks
thanks – worked just fine
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
firefox 55.0.3 (32-bit)
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.
well said
How would I add a div container to the ublock plus blacklist?
For example, my local paper has an automatically playing entertainment news video,
which I couldn’t care less about.
The Chrome browser inspector refers to it as “div.connatix” (“”).
Sorry for the late comment but I was just wondering if I could do this in a game? A Facebook game I play has an animated ad that crashes the game for me and this would fix it instantly. Is there a way to use Ublock Origin in a game? I don’t play it on FB (too laggy) but use a FB Gameroom shortcut.
Great succinct article on the best adblocker and, in my opinion, the best antivirus as well because it catches things no other AV ever caught and is way more lightweight.
Problem with the uBlock window when it sits on top of the element you wish to block… for example floating video window that floats to lower right screen corner even when scrolling.
So you cannot see the undesired element “vanish” when using preview.
Who came up with that? Seems pretty basic.
How to remove entries from the My Rules list? there doesn’t seem to be any method of editing it.
Using the nuclear option to uninstall/reinstall UBO causes the toolbar button to fail to appear it seems. I just did that and had to run Windows 8.1 System Restore to revert Waterfox to a time prior to uninstalling UBO just to get the toolbar button back again.
GOD BLESS YOU you just legit saved my life
how to block ad that follows AFTER a certain div block?
I’m also experiencing uBlock’s permanent zapper failing after exiting the browser and then reloading it. In this particular instance it concerns a couple of images of people with severely disfigured faces. While I sympathize with individuals who have to contend with such a drastic change to their lives I don’t want to have to look at the same images of them every day.
I’ve used the permanent zapper to hide them, but as can be seen in this link taken from My Rules they reappear again once the browser has been closed and then reloaded. http://imgbox.com/Eit4yxaZ
Blocking guim.co.uk which is where they’re loaded from results in all images on the site being blocked.
The site where these ghastly pictures appear every day is this one: https://www.theguardian.com/international
how to block div after div with normal idname/classname?
for example:
<– this!
Why is this the first google result for “ublock origin block element >>>>SYNTAX<<<<<"? The only place that word is even mentioned in this page is in a comment! Yet it's still the first result even after placing it in quotation marks to force only results that include it! I'm well aware that I have the right-click option and can navigate the UI myself, thank you very much. Some elements of some webpages just refuse to be selected with the "pick" feature so I was trying to find out how to write the rule myself based on the element class or id. Thanks for wasting my time! If this was caused by deliberately gaming the search results, shame on you.