Project Idea — Notification Hider For Medium.com (Firefox Browser Extension)
It didn’t work, but I still wanted to write what I learned about browser extensions
A little while ago, I wrote a Medium post about a Minecraft YouTube video, and someone left me a particularly critical comment about how this video was so pointless, and my article so stupid, that he had now lost faith in humanity. In response I had considered taking a long break from Medium, but thought it might be easier to simply hide notifications.
What this post will be:
- Some early experiences with a Firefox browser extension
- Some 101 resources
What this post will not be:
- A tutorial
- A behind-the-scenes look at a completed, fully functional product
Getting Started
The core idea is simple enough. You go to this webpage by MDN, which details how to make a really simple Firefox browser extension, or you do your own work. Basically, what you need is a new directory, a manifest.json file you write yourself (they include a template), an icon, and a JavaScript file.
Then I navigated to about:debugging, clicked the This Firefox option, clicked the “load temporary addon” button, and selected my manifest.json. I ran their extension, which surrounded their MDN page with a little red box. That was all well and good.
I got my own icon from an open source page, I resized it, and then I loaded it.
I played around a bit with my own script. This next part is not recommended — there is a way to properly set the debug level — but I used console.error statements, just to do some simple “hello world” checks. Then I started messing with the DOM.
Why This Didn’t Work
This MDN page here establishes that with just four lines of code, you can replace a webpage with giant text that reads, “This page has been eaten.”
document.body.textContent = “”;
let header = document.createElement(“h1”);
header.textContent = “This page has been eaten”;
document.body.appendChild(header);
Why, then, did my tiny bit of JavaScript to hide the notification icon fail?
I started by using document.getElementsByClassName to target a div. This worked, but the class names are randomly generated letters that are subject to change. Instead, I targeted data-testid, like so
let div = document.querySelectorAll(‘[data-testid=headerNotificationButton]’);
…but when I tried to actually remove the node, something happened. It worked, and then the page simply refreshed. On the console I could see React error 423.
div[0].parentNode.removeChild(div[0]);
I had a similar experience when I tried to replace text with a ?. It worked once, and I thought it was perfect — the entire notification icon simply became a single question mark, with no more notification count to indicate how many notifications I had. But when I tried again, it refreshed.
This, it seems, is a hydration error. I think that React is automatically detecting some discrepancy, so it reloads the page. I have not found a simple solution to this, but it is just a guess.
Motivation
I have received positive comments before, and every now and then I get a particularly useful comment that advises me to correct a blog post, or leaves some tip for how to get unstuck on a current project. But when I see a comment lambasting me for writing about some Minecraft video, it makes me want to batch comments.
At the very least, I’d like to be checking this less often. At least then, the positive comments would dilute the negative. Disabling comments entirely would prevent this from being a free forum, and blocking commenters would violate free speech.
If you are wondering why I do not simply stop clicking the icon from my own free will, it is that I want to build something akin to the kSafe box. I want to break a habit by eliminating the cue.
