April 18, 2020 · 4 min read

Pushing the limits of 1Blocker custom rules

web guide

I am a proud Safari user. It’s fast, saves battery power, it’s simple, and it syncs effortlessly across all of my devices. Oh, and not having Google breathing down my neck is nice too 😊

I’ve been using 1Blocker basically since it came out to block ads, trackers, social widgets, and the like on my Mac and iPhone. It blocks pretty much everything and rarely breaks websites.

1blocker

Along with the default lists, you can specify your own custom rules to block entire sites (like Facebook!), cookies, and… CSS elements.

Oh boy! Are you thinking what I’m thinking?

I have two simple principles:

  1. Make the Web a more calm place. Daily tasks like shopping, budgeting, and reading the news should be task-oriented.
  2. Fuck ads.

Ok let’s butcher some websites!

Amazon

amazon.com homepage after amazon.com homepage before
Amazon.com homepage, before and after

The difference is shocking. At first, it feels like there’s something missing. But that feeling quickly goes away… especially once you remember that 100% of the garbage that Amazon puts in front of you isn’t actually relevant to what you’re searching for. But you know what is? The search bar!

amazon.com product page after amazon.com product page before
Amazon.com product page, before and after

It turns out the product page has a lot of redundant information, and all of the added clutter actually makes it harder to find the information you’re looking for. Without all of the extraneous information the product images are bigger too!

The default 1Blocker rules also don’t catch Amazon’s ads for pills, extended warranties, and their music service. None of which I ever plan to use.

Here’s what the magic looks like behind the scenes:

"rules": [
  {
    "content": {
      "action": {
        "type": "css-display-none",
        "selector": "#nav-upnav .nav-a, #nav-upnav, #pageContent, #productAlert_feature_div, #percolate-ui-ilm_div, #hqpWrapper, #center-28_feature_div, #dpx-giveaway_feature_div, #rhf, #nav-xshop > *, #icp-nav-flyout, #nav-link-prime, #sc-new-upsell, #cart-recs-carousel, #cart-item-recs, .prime-ad-banner-content, .recsWidgetContainer, #bia-hcb-widget, .nav-template.nav-flyout-sidePanel-content, .navFooterMoreOnAmazon, #bia_content, #vse-related-videos, .similarities-widget, .sims-carousel-holder, #ask-dp-search_feature_div, #nav-subnav, #nav-global-location-slot, #nav-xshop, #nav-main, #issuancePriceblockAmabot_feature_div, #mbb_feature_div, #navFooter, #smileEligibility_feature_div, #alternativeOfferEligibilityMessaging_feature_div, #image-canvas-caption, #edpIngress_feature_div, #digitalDashLowProminenceAccordion_feature_div, #addToWishlistAccordion_feature_div, #tradeInButton_feature_div, #moreBuyingChoices_feature_div, #olpLinkWidget_feature_div, #va-related-videos-widget_feature_div, #giveaway_feature_div"
      },
      "trigger": {
        "url-filter-is-case-sensitive": true,
        "url-filter": ".*",
        "if-domain": [
          "*amazon.com"
        ]
      }
    },
    "name": "Hide Amazon.com annoyances",
    "id": "593554FC-931F-4C98-AA3F-11CF048AC7CD"
  }
]

At the end of this post, I’ll include a download link that adds all of these rules to 1Blocker with one click.

Mint

While I wait for Monarch to launch, I must rely on Mint for basic budgeting and cashflow tracking. Mint makes money by selling your financial data offering you credit cards and financial services scattered throughout the Mint app.

Or at least they used to!

mint.com overview page after mint.com overview page before
Mint.com overview page—yes the numbers are real

Mint actually becomes somewhat usable when you reclaim 50% of the screen from ads and use it for… I don’t know, financial analysis… instead.

Yes, most of the ads have close buttons. But they come back every time you log in, and I just don’t have the mental energy to be disappointed by my 401(k) and close a bunch of ads for credit cards that offer worse points-per-dollar and lower credit limits than what I already have.

Slickdeals

Don’t judge me.

slickdeals.net homepage after slickdeals.net homepage before
Slickdeals.net homepage, before and after

Sometimes I do browse. Can’t have too many 8TB NAS drives or Staples pricing errors on ballpoint pens, right? The only problem is that most of the screen real estate is devoted to ads and promoted “deals” that aren’t vetted by the community.

Or, at least, it used to be! Now it’s only crowdsourced deals. Slickdeals is a great example of a site that I’d typically never visit becuase it’s just too infested with ads, misdirection, and clutter to be useful. But with 1Blocker custom rules, it actually can be a useful resource sometimes.

Get the Calm Web extension

You can download a pre-packaged Calm Web extension that includes support for Amazon, Mint, Chase, Target, MacRumors, Slickdeals, and a few more.

I put it up on GitHub in the hopes that folks will contribute their own custom rules. The Web is a noisy, frantic place full of ads, distractions, and clutter. Maybe we can calm it down a bit. 😌