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

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

ublock origin block element

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.

block page element

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

ublock add blocking 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

ublock origin filters

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
Publisher
Ghacks Technology News
Logo
Please share this article

Facebooktwittergoogle_plusredditlinkedinmail



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

  1. Hy February 21, 2017 at 7:08 am #

    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!

    • Martin Brinkmann February 21, 2017 at 7:59 am #

      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.

      • pHROZEN gHOST February 21, 2017 at 3:44 pm #

        I agree with Hy. Your article is quite informative.

      • Anonymous February 22, 2017 at 2:56 am #

        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.

      • All Things Firefox February 22, 2017 at 3:30 am #

        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.

    • Tom Hawack February 21, 2017 at 11:45 am #

      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.

  2. justakiwi February 21, 2017 at 9:05 am #

    here's a filterlist, that has alot of good stuff

    https://filterlists.com

    • insanelyapple February 21, 2017 at 12:19 pm #

      It's literally same stuff ublock origin shows inside its preferences dash.

      • Tom Hawack February 21, 2017 at 12:30 pm #

        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.

      • insanelyapple February 21, 2017 at 4:02 pm #

        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

      • negroj February 22, 2017 at 12:55 am #

        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.

    • Tom Hawack February 21, 2017 at 12:32 pm #

      It's excellent indeed. Summarizes all filters lists available, those included with uBlockO as well as other lists so called "Custom".

    • Klaas Vaak February 21, 2017 at 6:32 pm #

      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?

  3. flyli5411 February 21, 2017 at 11:33 am #

    uBlock Origin Plus uBlock Origin extra ....Can't go wrong with this ad blocker,Been using
    for years ... Does what it says ...

  4. insanelyapple February 21, 2017 at 12:17 pm #

    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.

    • Hy February 21, 2017 at 1:26 pm #

      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...

    • Tom Hawack February 21, 2017 at 1:37 pm #

      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.

    • gorhill February 21, 2017 at 2:49 pm #

      > 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.

      • insanelyapple February 21, 2017 at 4:23 pm #

        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.

      • gorhill February 21, 2017 at 6:38 pm #

        > 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).

    • Jason February 21, 2017 at 4:34 pm #

      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.

      • gorhill February 21, 2017 at 6:42 pm #

        > 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.

  5. negroj February 21, 2017 at 1:30 pm #

    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.

  6. LD February 21, 2017 at 1:38 pm #

    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.

    • Jan February 28, 2017 at 12:59 pm #

      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. :)

  7. Marcin February 21, 2017 at 1:50 pm #

    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.

  8. earthling February 21, 2017 at 1:54 pm #

    @Martin Brinkmann

    would you mind forwarding an email to Pants for me? Can I send it to news@ghacks.net?

    • Martin Brinkmann February 21, 2017 at 1:55 pm #

      Sure ;)

      • earthling February 21, 2017 at 2:14 pm #

        Thank you, I appreciate it. Just sent it using a sharklasers.com address.

      • Martin Brinkmann February 21, 2017 at 2:42 pm #

        Done.

  9. Third Eye February 21, 2017 at 2:43 pm #

    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.

    • gorhill February 21, 2017 at 3:07 pm #

      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.

  10. Third Eye February 21, 2017 at 2:47 pm #

    Hey Martin please will you review 360 total security,

  11. gorhill February 21, 2017 at 3:15 pm #

    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

    • Martin Brinkmann February 21, 2017 at 3:22 pm #

      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.

  12. Yuliya February 21, 2017 at 6:21 pm #

    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..

  13. A different Martin February 21, 2017 at 9:26 pm #

    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)

    • earthling February 21, 2017 at 10:32 pm #

      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.

      • A different Martin February 22, 2017 at 1:13 am #

        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!

      • earthling February 22, 2017 at 11:52 am #

        You're welcome :)

      • A different Martin February 22, 2017 at 7:48 pm #

        @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!

  14. Jd February 23, 2017 at 10:20 am #

    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

Leave a Reply