DECLUTTERING MEDIUM
I’m cheap, and I know there are other lurkers like me out there.
The Medium platform has become one of my favorites for consuming great content that is easily accessible, actionable, and informative. I have learned so much about the Design world from peers across the industry. However, my next article to read discovery process has had a few speed bumps introduced. Everyone here is familiar with the ★ that appears next to the preview of member only stories and it seems like my feed is slowly becoming filled with more of these over time.
I love reading on Medium, but I do not feel like I a missing out on much by not being a member so I get annoyed when I read the preview of a story only to then realize that I can’t actually read the article.
I find the lack of intrusive advertisements on the platform appealing, because it helps keep the aesthetic of Medium clean. No matter how good a product is though, there will still be some nagging features that affect the people using it. Member only stories is one of those things for me. I want to spend more time picking from articles that I can read and not parsing through the noise.
To alleviate my pain point, I decided to write a little extension to do the heavy lifting for me. I am not a developer by trade, so I reached out to my buddy David Sayer on where to start.
This guy is a total boss, and he gave me a some javascript to run in the console to get me started. He encouraged me to pull down his Airbnb Price Per Night Corrector and use it as an example to model off of. It was the #2 Product of the Day on Product Hunt, Lifehacker’s Extension of the Week, and was written up by Forbes and BuzzFeed News. That extension is available on Chrome and Firefox.
First thing I noticed was that Medium’s HTML and CSS was still easy to read through Dev Tools. It uses a fairly consistent class structure which made it easy to parse through.
<div class="js-homeStream">...</div>I started out by setting up two files in my project and loading them into the Chrome Extensions using Developer mode.
These things alone remove the big featured article section that is at the top of the page taking precious real estate away from the screen, which I had come to ignore anyway.
But I quickly ran into a problem because my script to find all the starred articles in the body of the page wouldn’t delete them when the page loaded.
This code works like a charm when used in the console, but fails to work when its live in the extension. So I tried playing around with the run time options, but that didn’t work either. 🤔
"run_at": "document_start""run_at": "document_end""run_at": "document_idle"
Next I setup a MutationObserver to monitor DOM changes and react to them accordingly. This dynamically tells me when something in the body of the page changes, now when a specific className is added then I can run my function to remove unwanted objects from the page because I know that they have all been loaded in together.
