from Hacker News

My uBlock Origin filters to remove distractions

by mig4ng on 9/20/23, 1:53 PM with 185 comments

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

  • by perihelions on 9/20/23, 3:13 PM

    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)

  • by gzer0 on 9/20/23, 5:17 PM

    If you go to Options > Filter Lists > Annoyances and check mark the following items:

      "AdGuard – Annoyances"
  "EasyList – Annoyances"
  "uBlock filters – Annoyances"
    You will get rid of 99.9% of website annoyances without affecting any main functionality of websites.

    I've been doing this on every fresh install of Chrome for years. Works wonders.

  • by runjake on 9/20/23, 2:17 PM

    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

  • by aendruk on 9/20/23, 3:53 PM

    Personally I have to hide Stack Exchange’s trending questions on my work machine. Those things are catnip to me.

      askubuntu.com###hot-network-questions
  serverfault.com###hot-network-questions
  stackexchange.com###hot-network-questions
  stackoverflow.com###hot-network-questions
  superuser.com###hot-network-questions
    Also many sites disregard prefers-reduced-motion, so I’m often hiding visual distractions like endless carousels and cute decorative animations.

  • by waxali9815 on 9/20/23, 2:36 PM

    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

  • by perihelions on 9/20/23, 2:06 PM

    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)

  • by hedora on 9/20/23, 2:36 PM

    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.

  • by bloopernova on 9/20/23, 3:41 PM

    Here's my filters in ublock origin for Hacker News:

        news.ycombinator.com##.comment:style(max-width: 70ch !important; overflow: hidden !important;)
    news.ycombinator.com##.c00:style(color: #3f3f3f !important;)
    news.ycombinator.com##.comhead:style(background: #e6e6df; font-weight: italic; color: #686868 !important;)
    news.ycombinator.com##.hnuser:style(background: #e6e6df; font-style: italic; color: #575757 !important;)
    news.ycombinator.com##html:style(filter:invert(100%) hue-rotate(180deg); background: white)
    Restricts width of comments so that they're about 10 or so words wide, for optimal reading. Also changes some of the colours.

    Experiment with the above, and if you have any improvements please let me know!

  • by beltsazar on 9/20/23, 2:32 PM

    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

  • by noname120 on 9/20/23, 3:56 PM

    Arc has native support for cosmetic improvements. Those are called Boosts and you can interactively create your owns in just a few clicks, and also add custom CSS/JS if needed.

    I use this extensively to declutter/dedistract most websites I visit: Facebook, Twitter, Reddit, Medium, Gmail, YouTube, and so on. It's a real life-changer!

    See the Boosts shared by other users here: https://arc.net/boosts

  • by Taylor_OD on 9/20/23, 3:17 PM

    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.

  • by ronjouch on 9/20/23, 3:31 PM

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

  • by SushiHippie on 9/20/23, 11:10 PM

    For read only I really like these privacy friendly alternatives:

    Twitter, completely skinned down to just the content and no login nags:

    Nitter - https://nitter.net - https://github.com/zedeus/nitter

    Youtube, also very skinned down and you can also collapse recommendations by default etc.:

    Piped - https://piped.video - https://github.com/TeamPiped/Piped

    Invidious - https://invidious.io - https://github.com/iv-org/invidious/

    Stackoverflow, also completely skinned down to just the content and nothing more:

    AnonymousOverflow - https://code.whatever.social - https://github.com/httpjamesm/AnonymousOverflow

    For all of these I use LibRedirect to redirect the original pages to the open source/privacy friendly frontends:

    https://libredirect.github.io/

  • by dcminter on 9/20/23, 3:24 PM

    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)

  • by rschiavone on 9/20/23, 2:36 PM

    There is also https://letsblock.it/filters, a collaborative repository of uBlock content filters, to which I encourage you to contribute your own ones.

  • by philip1209 on 9/20/23, 2:10 PM

    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.

  • by db48x on 9/20/23, 2:57 PM

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

  • by squarefoot on 9/20/23, 2:19 PM

    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.

  • by cantSpellSober on 9/20/23, 3:33 PM

    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.

  • by kup0 on 9/20/23, 5:24 PM

    Using rules to completely block shorts from appearing in any YT feeds (and rules to fix the feeds so they don't look broken afterwards) has been great. YT breaks it from time to time with a UI update, but it's something I'll always use. I hate YT Shorts

  • by mnorris on 9/20/23, 3:36 PM

    Thanks for sharing!

    I've been doing this for the last year with YouTube. YouTube is just a search bar now which prevents mindless browsing and distractions.

    If I find myself using a site mindlessly I add it to my /etc/hosts file to block them.

  • by i13e on 9/20/23, 3:45 PM

    You should submit these rules to https://letsblock.it ! AFAIK their distractions rules really only cover YouTube

  • by pimlottc on 9/20/23, 2:02 PM

    Needs blocks for Stack Exchange hot questions

  • by citruscomputing on 9/20/23, 3:17 PM

    Love this! I've been working on one for pull quotes: https://codeberg.org/oneirophage/filter-list-pull-quotes

  • by generalenvelope on 9/20/23, 2:27 PM

    +1 for UnHook. Amazing how the experience of youtube changes when all you can see is a search bar and the current video

  • by _joel on 9/20/23, 10:07 PM

    There's an irony of me getting distracted from what I should be doing by looking at ditraction filters...

  • by captn3m0 on 9/20/23, 7:47 PM

    I have a habit of creating filters to hide away footers in all sites I browse regularly. Modern SEO practices have made footers entirely useless, so I just zap them away for a lighter look.

  • by meerita on 9/20/23, 3:18 PM

    I would suggest the author to explain, briefly, how to use the filters in uOrigins in the README.

  • by verdverm on 9/20/23, 2:22 PM

    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.

  • by hedora on 9/20/23, 3:10 PM

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

  • by userbinator on 9/21/23, 4:14 AM

    I've been using Proxomitron (a MITM proxy) to filter sites and have accumulated plenty of filters over the years, but unfortunately it doesn't seem there's an easy way to convert between the filtering systems; uBlock and similar in-browser extensions work on document structure (DOM), while Proxomitron is basically an application-specific-regex syntax search-and-replace.

  • by lancesells on 9/20/23, 5:27 PM

    I use StopTheMadness on Safari and have a lot of similar custom things.

    For Linkedin I use to get rid of the feed:

    .scaffold-finite-scroll__content { display: none }

  • by scopeh on 9/20/23, 5:06 PM

    I've been looking for something like this solution for a while. Never thought of using ublock filters. Cheers

  • by GuB-42 on 9/20/23, 2:56 PM

    You definitely should add news.ycombinator.com, all of it :)

  • by type0 on 9/20/23, 10:36 PM

    One of the most useful is removing home page clutter on youtube:

      youtube.com##ytd-browse[page-subtype*='home']

  m.youtube.com##ytm-browse > ytm-single-column-browse-results-renderer > div > div[tab-identifier*="FEwhat_to_watch"]

  • by fifteen1506 on 9/20/23, 3:35 PM

    Please someone do shareable Twitter users ABP-based user KILL LIST, like in Usenet had!

  • by wolpoli on 9/20/23, 5:56 PM

    I tend to associate the tweaks on the site with Tampermonkey and not uBlock Origin.

  • by HexDecOctBin on 9/21/23, 6:03 AM

    This there any way to use this list in AdGuard? I tried adding it, but it showing up as having zero rules. (I am on iOS, so no uBlock Origin for me)

  • by jackyard86 on 9/20/23, 11:46 PM

    My filter to make all elements square (I don't like today's trend of making everything rounded):

    ##:style(border-radius: 0px !important)

  • by ta367457377 on 9/20/23, 3:14 PM

    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.

  • by dredmorbius on 9/20/23, 10:51 PM

    NB: Before/after screenshots are highly useful when pitching or demonstrating something such as this.

  • by zf00002 on 9/20/23, 4:36 PM

    If someone has some filter strings to help clean up Etsy search results, that would be appreciated.

  • by polyterative on 9/20/23, 2:29 PM

    newsfeed eradicator extension is a more configurable way to achieve similar features

  • by BitwiseFool on 9/20/23, 3:59 PM

    Personally, I can't stand how distracting YouTube thumbnails are. I found this list to block them from the sidebar when watching videos.

      ! Hide all of the recommended videos on the right side of the page, except for the first up-next video.
  ! If you have a tall monitor you may need to add more entries, this blocks the initial list on most resolutions.
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(2)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(3)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(4)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(5)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(6)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(7)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(8)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(9)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(10)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(11)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(12)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(13)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(14)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(15)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(16)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(17)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(18)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(19)
  www.youtube.com###items > .ytd-watch-next-secondary-results-renderer.style-scope:nth-of-type(20)
  
  ! Prevents the list of recommendations from expanding when scrolling down.
  www.youtube.com##ytd-continuation-item-renderer.ytd-watch-next-secondary-results-renderer.style-scope
  www.youtube.com###continuations > .ytd-watch-next-secondary-results-renderer.style-scope
  www.youtube.com##.use-ellipsis.ytd-watch-next-secondary-results-renderer.style-scope
  www.youtube.com##ytd-compact-playlist-renderer.ytd-watch-next-secondary-results-renderer.style-scope
    Also, if you hate Shorts as much as I do, use this to hide them from appearing in search results.

      youtube.com##ytd-rich-section-renderer:has(#rich-shelf-header:has-text(Shorts))
  youtube.com##ytd-reel-shelf-renderer:has(.ytd-reel-shelf-renderer:has-text(Shorts))

  • by shortrounddev2 on 9/20/23, 2:14 PM

    Would be cool to see some examples

  • by lencastre on 9/20/23, 5:01 PM

    Lucy?