The web is somewhat adversarial.

Generally, a public webpage will have something valuable - the thing you’re there for, which you searched for and for which the search engine sent you to this page.

There will be some things surrounding this useful central thing - many are fine and useful things, like the branding of the company that runs the website, some navigation to get to related pages, or a link to the home page of the site. All good.

But, a lot of the things surrounding the useful central thing are designed to hijack your attention - peripheral advertisements, most obviously, but more insidious things as well:

I have a method for clearing this brush from the paths I generally travel, and I recommend it to you.

Custom CSS

In the early days of CSS, there was the idea of a “user defined stylesheet”. A website owner would publish their content as semantic HTML, and provide their own stylesheet - the user’s web browser would take this stylesheet and cascade it together with the user-defined stylesheet, and the browser would show the user the result. Thus, as the user of a browser you could define your own styles, and the browser would use them.

Like a lot of ideas from this era, including the semantic web, user-defined stylesheets never got off the ground. But, it’s exactly the tool I wanted when I started looking for a way to blowtorch away all this ancillary web-cruft. If there’s a way to define one in a browser like Google Chrome, I can’t find it.

There have been a couple of Chrome extensions that promise to do this - you can configure them with websites and custom CSS, and they’ll do some background magic and your custom CSS will be applied to the website in question.

However, I generally distrust Chrome extensions. The most popular of these custom-css extensions has the following permissions disclaimer when you try to install it:

Add this extension? It can: Read and change all your data on all websites

Seems pretty bad! Even if I knew the underlying code was written by my grandmother, supply-chain attacks against browser extensions don’t seem all that technically difficult, and maybe my grandmother will need some spare change and end up selling her extension to an Oslo motorcycle gang.

So, write your own extensions!

It’s easier than you’d think. Let’s take GitHub for an example - pretty good website, but the right nav on the homepage is unecessary: let’s hide it.

You want a directory with two file in it, like so:

$ tree github-styles 
github-styles
├── manifest.json
└── style.css

manifest.json looks like this:

{
    "manifest_version": 2,
    "name": "GitHub styles",
    "version": "0.1",
    "content_scripts": [{
        "matches": [
            "*://github.com/*"
        ],
        "css": ["style.css"]
    }]
}

and styles.css looks like this:

aside[aria-label="Explore"] {display: none;}

Pretty simple - GitHub is not that adversarial, so this is an easy one - just find the “Explore” aside, and hide it.

Head to chrome://extensions/, turn “Developer mode” on, and click “Load unpacked”. Navigate to your github-styles directory, and click “Select”.

If all went well, a little “GitHub styles 0.1” extension appears in your extensions list. And when you navigate back to the GitHub homepage, the right nav is gone, never to trouble you again.

A couple more examples I’ve found useful:

Youtube - hide comments, right nav, and “secondary results”:

#comments { display: none; }
#secondary { display: none; }
ytd-item-section-renderer.ytd-watch-next-secondary-results-renderer { display: none; }

Stack Exchange - hide sidebars, cookie widget, and “hot network questions”:

#hot-network-questions { display: none; }
div.s-sidebarwidget { display: none; }
#left-sidebar {display: none; }
#sidebar {display: none;}
div.js-consent-banner {display: none; }

The manifest for that one is a bit tricky because of all their domains:

{
    "manifest_version": 2,
    "name": "Stack exchange styles",
    "version": "0.1",
    "content_scripts": [{
        "matches": [
            "*://*.stackexchange.com/*",
            "*://stackoverflow.com/*",
            "*://superuser.com/*"
        ],
        "css": ["style.css"]
    }]
}

And one more - Chrome itself is a bit adversarial. The default new tab page, along with its giant Google branding, frequently contains an invitation to consider “national fentanyl day” or something similar. I don’t want this in my attention, so I wrote this one to give me blank pages for new tabs:

$ tree chrome-extension-empty-new-tab
chrome-extension-empty-new-tab
├── manifest.json
└── tab.html

Manifest:

{
    "name": "blank new tab",
    "description": "Remove default new tab page",
    "version": "0.1",
    "manifest_version": 2,
    "chrome_url_overrides" : {
        "newtab": "tab.html"
    }
}

and tab.html is an empty file.

These days, every time I find myself on a website, and thinking about how annoying it is, I will spend 15 minutes writing one of these things, to show to good parts and hide the annoying parts.

I encourage you to write your own. It’s very satisfying to clear the eels away in this manner.

Links