HN Explorer

My uBlock Origin filters to remove distractions (github.com)

469 points by mig4ng ↗ HN
Repository with my filter lists that block some distractions from sites I want to keep using.

I am pretty ruthless removing distractions from my life (e.g. no Instagram, Facebook, TikTok), but some tools I'd like to keep using some parts of it. E.g. Twitter/X, I dislike the feed but I like reading some threads that are shared here or on blog posts. Same for YouTube, I enjoy some videos but I do not want recommendations when I finish the video I was watching.

Feel free to suggest more, open issues, pull requests or send me an email :)

189 comments

[ 3.7 ms ] story [ 92.0 ms ] thread
pimlottc
Needs blocks for Stack Exchange hot questions
hutzlibu
Oh yes, they are annoyingly interesting, which is fine when I am browsing for fun, but usually I go to StackExchange for a very specific problem and then suddenly, uups, where am I?
mig4ng
That's true, feel free to open PR, or I might eventually add them too.
db48x
Here are the rules I’ve been using for Stack Exchange; you can see that I have been doing this for a while. Some of these may no longer even be necessary…

    ! 5/8/2018, 9:16:29 AM https://emacs.stackexchange.com/questions/13080/reloading-directory-local-variables
    emacs.stackexchange.com###overlay-header
    ! 3/31/2020 https://emacs.stackexchange.com
    emacs.stackexchange.com###divQuestionFollowFeaturePopover
    ! 2021-04-14 https://emacs.stackexchange.com
    emacs.stackexchange.com##.js-teams-promo
    ! 2021-08-14 https://emacs.stackexchange.com
    emacs.stackexchange.com###hot-network-questions
    ! emacs.stackexchange.com###sidebar
    ! 2021-10-01 https://emacs.stackexchange.com
    emacs.stackexchange.com##.js-create-team-cta
    ! 2022-09-18 https://emacs.stackexchange.com
    emacs.stackexchange.com##.s-sidebarwidget:not(.js-review-actions)
    emacs.stackexchange.com##.js-feed-link
    ! 2022-12-18 https://emacs.stackexchange.com
    emacs.stackexchange.com##.icon-winterbash
    ! 2023-07-28 https://emacs.stackexchange.com
    emacs.stackexchange.com##.js-announcement-banner
perihelions
A while back I worked out how to erase the pay-to-win monetization spoor from Reddit and Twitter,

    reddit.com##.awarding-icon
    reddit.com##.awardings-bar
    reddit.com##.give-gold-button
    
    twitter.com##:xpath(//div[contains(@style, "hex-hw-shapeclip-clipconfig")]):style(clip-path: circle(50%) !important)
mig4ng
What does the last one do?
perihelions
I don't know if they still do it, but at the time Twitter charged money to display user avatars in a larger size, and styled as a hexagon. I think they were NFT tie-ins or something? They were difficult to ignore, so I wrote a snippet to turn hexagons back into circles.

[edit]: https://news.ycombinator.com/item?id=30012904 ("Twitter Rolls Out NFT Profile Pictures")

mig4ng
Never seen it, if I do and it bothers me I will keep in mind and add this too. Thanks!
brezelgoring
I had an extension (that I found here) that transformed all NFT avatars into Jared from Subway. It really takes the edge off of whatever they say. Even the most serious arguments just turn into kids' spats with that picture, it made the site more pleasant to be in.
lapetitejort
Reddit has ended awards (for now). The filter is still applicable for older posts though.
philip1209
I use similar filters in my uBlock origin. I like this approach because it avoids installing more browser extensions, each of which risks security or privacy issues.
mig4ng
Please share them to see if I can improve mine :)
shortrounddev2
Would be cool to see some examples
mig4ng
Like screenshots?
ronjouch
Not OP, but here's a screenshot illustrating what I personally typically do on sites I use a lot: hide things, make things low opacity until hovered, add a dark mode if missing. https://imgur.com/a/tCFkVzK

EDIT should have installed uBlock on the left/default browser for a fair comparison. Oh well, you get the idea :)

runjake
If you use uBlock Origin, did you try to submit these filters to the uBlock Annoyances[1] or EasyList Annoyances lists before starting up this project?

That would help far more people that starting up yet another Annoyances list.

1. https://github.com/uBlockOrigin/uAssets

notsylver
These aren't just annoyances, they are core features of the sites.
runjake
So? Any corporation would argue that about the annoyances on their properties.
reyqn
I thought people used those list because it cleaned up the websites without breaking them. This is largely breaking the websites, only letting through a very opinionated subset of functionalities.

Even if it's nice for people who want just this, I don't think this has its place on the annoyances lists you mentioned.

[deleted]
(comment deleted)
thrdbndndn
No they wouldn't?

Annoyances are mainly for things like cookie popup or copy-protection etc. I doubt companies would argue these are their "core features".

ruined
the main timeline is a core feature of twitter for most people.
pbhjpbhj
Might be scope for upstream projects to add a new group like "uBlock Focus" where blocks are to focus main content?

Before IT took away all plugins (!) I used uBlock this way, hiding sidebars and leads that weren't conducive to work (eg interesting stuff).

matheusmoreira
> Before IT took away all plugins

They really like dealing with users and their malware infections I guess. It's the only possible explanation given that uBlock Origin is probably the most effective anti-malware software in existence.

tejtm
why not both? the site pushes their features, the user filters their annoyance and we all normalize the wasted resources.
mig4ng
I didn't know about this. Might add them to my filters, and see if mine apply there too. Thanks.
runjake
Some people here bring up some good criticisms of my comment. Perhaps it would be more focused to call your list "Distractions" or some such.

I certainly buy their stance that these are different from what are traditionally on the Annoyances lists.

gxnxcxcx
PSA: Some annoyances lists can be zealous about removing from websites any visual cue indicating the availability of an RSS feed.
dredmorbius
I strongly suspect that those get caught up on "social" or "sharing" icons, often indicated by a "social" class, or "share-daddy" specifically (I block that last a heck of a lot myself).
squarefoot
Interesting. I wonder how hard would be to create a filter to programmatically eliminate certain sellers from Ebay query results, say those known for selling counterfeit hardware, those with feedback ratings below a given threshold, etc.
crtasm
Unfortunately the search results page doesn't appear to include the seller id or username for the items.

However if you had a list of usernames to exclude eBay lets you do that in the advanced search.

verdverm
I've been using uBlock to remove or revert the "improved designs" as much as possible.

Really like the click to remove (and build a filter) to aid in this effort.

generalenvelope
+1 for UnHook. Amazing how the experience of youtube changes when all you can see is a search bar and the current video
mig4ng
I have been using it for years now, it is perfect. Main reason I will still keep it because it works.

Removing an extension from my list would be great but it is amazing as is.

polyterative
newsfeed eradicator extension is a more configurable way to achieve similar features
mig4ng
I have used it in the past, it does not give me the same flexibility. It might have changed over the years. I have used it long ago. Thanks for sharing.
beltsazar
I'm using uBlock similarly! I've accumulated hundreds of custom filters for the past eight years. My newest entries on uBlock's "My Filters" tab are for hiding spoilers on IMDb:

  ! 2023-09-05 Hide episode's description and image (+ watchlist for not breaking the layout) [new experimental IMDb layout]
  imdb.com##article.episode-item-wrapper .ipc-slate
  imdb.com##article.episode-item-wrapper .ipc-html-content
  imdb.com##article.episode-item-wrapper .ipc-watchlist-ribbon

  ! 2023-09-05 Hide top rated episode's description both on a TV page and an episode page
  imdb.com##[data-testid="episodes-top-rated-card"] ul + div
mig4ng
Do you have the others open sourced? Mind sharing them?
RexM
Might want to also hide the number of episodes an actor is in the show for. That’s bitten me a few times.
rschiavone
There is also https://letsblock.it/filters, a collaborative repository of uBlock content filters, to which I encourage you to contribute your own ones.
mig4ng
I found that and I actually link it in the repository. I will investigate it later.
hedora
This one gets rid of the Login With Google popups that have infested most corners of the internet:

   accounts.google.com/gsi/iframe
It doesn't break the login with google button, so you can still login with your google account, if you must.
mig4ng
Will try it and might add it too, I find those annoying. Thanks!
waxali9815
I use something similar to this, the only differences are because my use case is privacy protection and avoiding algorithmic feeds. I use the Redirector extension for Firefox so that it redirects e.g. Youtube, Twitter, and StackOverflow links to the corresponding alternative frontends Piped, Nitter, and AnonymousOverflow. You can find maintained lists [1] [2] of such projects and their instances. Mostly they are FOSS and privacy-respecting, and they have distraction-free frontends because it's a helpful coincidence of being ethical software.

[1] https://github.com/digitalblossom/alternative-frontends [2] https://farside.link

mig4ng
This is amazing. I had similar ideas in my bucket list of creating distraction free alternatives and redirecting somehow.

Happy to know someone had the same idea and there are versions of it online. Thanks for letting me know of this, I really appreciate it!

GuB-42
You definitely should add news.ycombinator.com, all of it :)
mig4ng
I do have it, just the homepage, /news, and /newest. Haven't added to the repository yet but will probably soon.
hollerith
I block only the "firehose" pages so I can continue to run search-engine queries over HN (using hn.algolia.com):

  ||news.ycombinator.com/|
  ||news.ycombinator.com/news^$document
  ||news.ycombinator.com/newcomments^$document
  ||news.ycombinator.com/newest^$document
  ||news.ycombinator.com/classic^$document
  ||news.ycombinator.com/front^$document
  ||news.ycombinator.com/bestcomments^$document
pbhjpbhj
Maybe you'd like noprocrast mode? Limits use time.

It's in your user config, click your username.

db48x
I do a lot of the same things to remove sidebars, navigation, suggestions, search, etc from various sites. There are a couple of web comics where I nuke everything but the image and the next/previous navigation links (Order of the Stick, Schlock Mercenary, etc).
mig4ng
Feel free to share them in the repository via PR, issue, or here :) Thanks.
hedora
Tangentially related: Has anyone tried the Orion Browser by Kagi for iOS?

https://browser.kagi.com/

They claim to support Firefox and Chrome extensions (specifically, uBlock Origin). It's in beta. I'm surprised Apple hasn't blocked it yet, but I'd consider paying for a developer account just to install it on my phone (assuming it works).

djcannabiz
Ive been using it on my laptop and phone. The phone version doesnt feel like it has enough polish yet. You can install it from the app store BTW, no need for a developer account. Ive been having problems with the app crashing, being unresponsive. However, the Mac version works 100% for me. I have ublock origin, bitwarden, bypass paywalls clean and sponsorblock installed. I havent noticed any issues and im very satisfied. I also really love the programable buttons feature, which let you define a button in the toolbar that runs some JS when you click on it (like a bookmarklet).
freediver
uBlock Origin works on Orion for Mac (running forked WebKit), but does not work on Orion for iOS (because of Apple's limitations on iOS).
mig4ng
Just tried it and it seems pretty cool. I hope they go open source as stated in the FAQ.

Also would love to see a similar browser with vertical tabs for Linux/Windows.

perihelions
Tangentially: after you've blocked a very large number of ads and sidebars, one useful enhancement is to expand whatever text elements remain, to regain use of all that now-empty whitespace. Something like so:

    :xpath(//main/div):style(min-width: 80% !important)
(I've been looking at going a step further for some sites, by annotating a "column-count:" [0] rule and making the screen look like a newspaper. (Narrow columns for readability—multiple columns for "scan-ability"). Unfortunately, there's a lot more fiddling and tuning to this than I expected: it doesn't automagically work in the way you'd hope. Modern website DOM layouts are basically Superfund sites).

[0] https://developer.mozilla.org/en-US/docs/Web/CSS/column-coun...

[late edit]: Here's a minimal example of "column-count:" injected by uBlock (on a website where it sort-of works)—this is what I'm trying to coerce other websites into looking like:

https://i.ibb.co/k3bRwhP/example-1.webp

    theguardian.com###maincontent:style(margin-left: -28vw !important; min-width: 90vw !important; column-count: 4 !important)
    theguardian.com##div:style(border: none !important)
flir
Are you at the point where you should be pouring this content into RSS, and styling it as columns in a reader?

(I really like the column idea, and I'm working back towards RSS, with a bunch of smart filters, being my primary way of interacting with anything I visit regularly. I never should have given it up).

ehPReth
The only reliable way I've found (so far) to shuttle Facebook Pages into something easily to consume (RSS) is unfortunately a paid service... even paid IFTT doesn't support a page posts -> fire webhook/email/etc sadly. Unfortunate, since some local government stuff or otherwise noteworthy stuff is... only available on Facebook. Sometimes it's available on 'X'/Twitter but often not as detailed, or it links to Facebook for more details.
flir
Good point. I've found nothing off the shelf that will work for private groups, and that's the only bit of FB I'm interested in.
mig4ng
The first one is a nice trick. Sometimes websites get broken when you remove some elements. Thanks!
dredmorbius
I'm quite the fan of various site restylings, using both uBO and Stylus.

But often just switching to Reader Mode is the faster and preferable option.

(This isn't always an option, but frequently is.)

smegsicle
> Stylish

is that the one with a bunch of spyware on it? or is that the one that replaced the one with a bunch of spyware on it

notRobot
It would be cool if you could figure out a way to have this work on top of FF's reader view.
[deleted]
(comment deleted)
WithinReason
It's possible to style the page Reader View uses by creating new files in FF's folders somewhere...
perihelions
That works too!

    @-moz-document url-prefix(about:reader) {
      .container {
        column-count: 4;
        min-width: 85vw !important;
        margin: 0 50px 0 50px;
      }
    }
https://i.ibb.co/7XT4zfs/example-2.webp

It's chrome/userContent.css in the Firefox profile subdirectory, enabled by the about:config flag toolkit.legacyUserProfileCustomizations.stylesheets.

ta367457377
Between Firefox for Android and uBlock, i dub this guy a literal saint. Truly good stuff. Havent seen a yutube or otherwise ad in a while.
Taylor_OD
This is cool. I did something similar at one point. Unfortunately these websites change their basic layout so often that it felt like these fixes would work for 1 month max then I'd have to configure again.

I ended up moving to news feed eradicator. https://chrome.google.com/webstore/detail/news-feed-eradicat...

I let myself use reddit for 5 minutes every morning. It auto blocks the feed when those 5 minutes are up. Every other site I just leave blocked.

ronjouch
> "Unfortunately these websites change their basic layout so often that it felt like these fixes would work for 1 month max then I'd have to configure again."

You're exaggerating. My userContent.css is 60kB, and although breakages do happen indeed, it's occasional and nowhere near "redo everything every month".

What I will reckon is a pain, are machine-mangled CSS classes (e.g. by packers for React / other frameworks). They are kinda stable, until they're not, and at any rate, their inscrutability makes maintenance more difficult (because .user-profile-picture is human-transparent, while .cD5aZf is not :-/ ).

aendruk
Judging by some of the other examples here I’m guessing this is a case of writing fragile rules that e.g. count n and m items into a tree and test unnecessarily for incidental classes. If all you do is accumulate the often senseless outputs of the element picker I’d expect the gains to be short-lived.
ronjouch
Indeed, 100%. I learned to never do such things, and would rather not have a rule than have a brittle one. This explains that my experience differs from OP's.
db48x
There are better ways to do it. For example, you can match elements containing specific text, such as the text that introduced the annoyance. On NewEgg you might match the text “Download our app” and use it to remove that whole box.
ronjouch
Yup yup.

- Standard CSS (for userContent.css): https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_s...

- uBlock Origin: https://github.com/gorhill/uBlock/wiki/Static-filter-syntax & https://github.com/gorhill/uBlock/wiki/Procedural-cosmetic-f...

Still, sometimes it's difficult/impossible to make a reliable filter, and in such cases I'd rather not have it than have a brittle one.

mig4ng
Yes, I feel the same. Even though I still have some brittle rules, I avoid most and prefer filtering for specific text or classes/ids and find the correct element from there. Before I did not use uBlock to filter elements that much because I used the filter.

I wonder if you have your filter rules open source or available somewhere. Please share.

ronjouch
I didn't make the effort to share them, sorry. That being said,

1. My rules are not any different from yours. I doubt you'll learn much from them given what you're already doing in your repo.

2. I feel that the "what to hide" / "not to hide" choice is too personal to be reusable by anyone else. I'm sure some of the stuff I hide will be considered excessive, and some will be considered missing. What I enjoy in this HN thread is that we share the { practice, tools, docs, tips }, then to each their own :)

3. I'm not interested in maintaining a public repo of that kind of stuff, and/or replying to Issues. So, would rather not make it public.

Sorry/notsorry ¯\_(ツ)_/¯ , at any rate, glad we're sharing tips around the practice.

mig4ng
The repository I shared is very opinionated and I will decide what goes in or not (a benevolent dictatorship). I want to make it easy for me to maintain, and others to use/fork if they want.

You could share them publicly without having the burden of replying to issues/PRs etc. But I get you.

meerita
I would suggest the author to explain, briefly, how to use the filters in uOrigins in the README.
mig4ng
Thanks for the suggestion, added it :)
dcminter
Mostly I'm using one of the default uBlock origin ones, but custom rules that have made (desktop) Facebook much pleasanter for me:

  www.facebook.com##div:nth-of-type(8):has-text(Suggested for you)
  www.facebook.com##div:nth-of-type(8):has-text(Reels and short videos)
mig4ng
I don't really use facebook these days, but thanks for sharing. I might add them if I ever step into a facebook post that I want to see and they annoy me :)
ronjouch
Thanks! I do this all the time too :) . Makes for a more pleasant / less cluttered experience on sites I use a lot.

I'll add that another thing that is pretty easy to do is to add a Dark Mode to websites that don't have one. All you need is a userContent.css/uBlock rule like

    @media (prefers-color-scheme: dark) {
        body {
            background-color: #111 !important;
            color: #eee !important;
        }
        /* etc, more stuff here depending on site */
    }
, and ta-da! Dark mode respecting your OS dark/light setting based on pref or time of day :)
notpushkin
Dark Reader extension does basically this (I think they either change colors or add the invert filter depending on what looks better?), but also has builtin CSS override rules for many sites. Love it.
ronjouch
Sure. I prefer to minimize depending on more extensions (for futureproof-ness, performance, security). These days, { uBlock Origin, Vimium } is all I need :)
notpushkin
That's a nice approach! I try to maintain a practical balance here, my extension list is basically: GreaseMonkey, Stylus, uBlock Origin, Consent-o-Matic, Dark Reader and maybe a couple more.

In theory, one can use uBlock0 for everything (with CSS and I think also JS injection), but userstyles and userscripts are way easier to use sometimes. And you can reimplement Dark Reader with userstyles, but you'll have to keep track of various site-specific tweaks to make it look good. (Should be possible though! Might be a cool idea for a pet project.)

But I understand the concerns with having too many extensions from too many different authors, yeah.

mig4ng
Thanks for sharing. I don't use Dark mode but someone might be interested in this!
cantSpellSober
I've written so many of these. Any reason you chose uBlock over something like userstyles?

I'd like to open source/release my styles but I'm not sure which is the best choice.

uBlock is great for blocking things from loading (like images) but for visual updates I prefer CSS.

bloopernova
Not OP, but I use ublock origin for a small number of visual tweaks. I use ublock origin because I don't want to use an extra extension.
mig4ng
I am just using it to remove elements, not visual tweaks, at least for now.

Also, I try not to have many configurations/extensions extra that I have to install in a new machine. As I did not find a good way to manage these configs as code.