JMM’s uBlock Origin notes

uBlock Origin is a free (GPLv3), fast, and customizable content blocker for your web browser.

“Content blocker?”, you ask. “Don’t you mean ‘ad blocker’?” No! Ads aren’t the only kind of web spam it blocks, and I should say I think a “spam blocker” is a good metaphor here. Just like your email spam filter prevents unsolicited advertisements, it also importantly blocks malware, phishing, and anything else you think is spam.

uBlock Origin, similarly, can block tracking, fingerprinting, phishing, malware, and cryptominers. And these are just the obviously bad things. You can also creatively use it to block distractions, attention-grabbers, bandwidth-intensive resources on mobile, or even comments by specific users you dislike. Blockers not only increase your security on the web¹, they increase your agency as a human. Use it to block anything that “steals” your bandwidth or “infringes on your attentional or emotional property”.

My Filters

I’ve got some uBlock filters at /ubofilters. You can import it by adding the URL “https://jmm.io/ubofilters” to your rules. You probably shouldn’t, though. In particular, I block YouTube’s homepage because it’s a distraction.

I mostly use cosmetic filters. My rules do things like highlighting MDN and hiding blogspam in search engines. I also dislike sticky headers in mobile, so I force some of those to be static.

Unsticking sticky elements

I dislike sticky elements robbing me of screen real estate, especially on mobile. I tend to use the following rule a lot:

##*:matches-css(position: sticky):style(position: static !important)

Blocking distracting websites

Sometimes you want to stop yourself from constantly refreshing a distracting website. Like, sites with infinite feeds that’ll make you doomscroll for hours. You can block entire pages like so:

||www.example.com/^$document

Blocking CSS and images

Maybe you want the text-only experience of a website. You can block CSS using:

example.com$csp=style-src-elem 'none'

example.com$csp=style-src 'none'

The former is preferable if you don’t want to affect, say, style= attributes in SVGs.

To block images as well, do:

example.com$csp=style-src-elem 'none', img-src 'none'

To block them on all pages (as well as scripts), do:

*$csp=style-src 'none', img-src 'none', script-src 'none'

Adjusting font size of a website

Here’s an example of adjusting the font size of a website:

jmm.io##:root:style(font-size: 20px)

If you want to adjust the size of some particular pages, do something like:

jmm.io##:matches-path(/notes/) :root:style(font-size: 20px)

Replacing text

Replacing text requires trust (i.e. check the “Allow custom filters requiring trust” box) because of security implications (e.g. filter authors could rewrite links to their own sites). Here’s an example of an old web extension that replaces the word “cloud”:

*$replace=/cloud/butt/gi

Without “g”, it’ll only replace one. “i” is case-insensitive. Note that this also replaces matches in links.

Scriptlets

Scriptlets are small pieces of Javascript that are used in rules to facilitate some aspect of blocking. For example, they might prevent certain events from triggering popovers or they could set/remove cookies that a website checks. You can see some documentation for various scriplets on the Resources Library page on the uBlock Wiki.

Blocking geolocation prompts

One example use of scriptlets is to block geolocation prompts in private windows. Normally in Firefox, you can deny a location prompt (e.g. “Allow https://www.example.com:443 to use your location?” and check the “Remember decision for this site” box). However, this preference isn’t remembered in private windows, which actually kind of makes sense since private windows aren’t supposed to remember anything. But this also means you’ll annoyingly have to deny geolocation requests each time. This tends to happen with commerce sites like Best Buy or Ace Hardware.

Using the abort-on-property-read.js scriptlet, we can defuse attempts to access geolocation like so:

bestbuy.com##+js(aopr, navigator.geolocation)

Now code that tries to read your geolocation will throw an error.

Blocking the Page Visibility API

YouTube uses the Page Visibility API to pause the video when you switch to another tab or otherwise have it in the background. I find this kind of annoying. We can fix this functionality by using addEventListener-defuser.js to block the document “visibilitychange” event.

youtube.com##+js(aeld, visibilitychange)

Custom Scriptlets

You can make your own custom scriptlets, but you need to make a URL for them. Then you can set your “userResourceLocation” to point to your URL(s).

This used to be a hidden setting that you could only modify by editing a JSON file. Like, there’s a "hiddenSettings" section where you’d need to add a “userResourceLocation” key and value. It looks like as of 2023-11-03 that it’s not a secret anymore.

I’ve got some old scriptlets located at /scriptlets.js, which I mostly just used to remove sticky headers.

Settings

Besides turning on the advanced user setting, I also like to set:

uiPopupConfig to “+logger” on Android (see the uiPopupConfig section in the Advanced Settings page)
filterAuthorMode: true is needed for logging with the aeld scriptlet (e.g. jmm.io##+js(aeld)). This is documented in the wiki.

Android

Some notes on using uBlock Origin on Android (through Firefox on Android).

Exiting “Element Zapper Mode” in Android

Swipe right twice anywhere on the screen to exit element zapper mode. This isn’t explicitly shown on the screen.

Footnotes

^ Even the FBI wants you to have an ad blocker.

References

Cyber Criminals Impersonating Brands Using Search Engine Advertisement Services to Defraud Users. Federal Bureau of Investigation. December 21, 2022. Retrieved November 15, 2023