I’m excited to present you a free toolset that I use daily. Ok, the proxy doesn’t get daily use, but we’ll get there 🙂 What all of these tools have in common is that they have some ability to change any 3rd party website however you like. However, any change you see is for your eyes only. So no, these will not turn you into a hacker, even if you could change your bank account balance or twitter follower number to millions. It’s just cosmetics, and inherently for fun. Once used wisely, these tools can benefit your daily internet usage by removing and changing annoying things about websites. I view this as having the ultimate power to change whatever I want about the world (the digital one). Sort of how Neo looked down on that corridor in the Matrix. He realized he could change anything.
Let’s put the mildly clickbait title aside and see what you are going to read about here. Feel free to skip to those you find interesting; I know y’all are just scrolling to the interesting parts. Mind you that this is no tutorial this time (it would be way too long). It’s merely intended to give you an idea about what tool is right for which kind of task. I lay out the solutions in the order of required skill level.
- Stylish
- uBlock Origin
- Greasemonkey
- Developer tools
- Burp, an interactive HTTP proxy
Stylish
Oh, this is my all-time favorite cosmetic browser plugin. It applies the makeup to sites before they even load. So there is no flash of the unstylish page. This aspect is an important distinction between user styles of Stylish and user scripts of Tampermonkey (see later).
It’s not unusual for me to change a website to have a dark theme. Ok, maybe not all, but those that I use often. Sites like Google, Facebook messenger, CodeCanyon dashboard, phpMyAdmin, Grammarly, and the list goes on. Stylish is THE plugin for this kind of change. Just take a look at Userstyles.org and see if anything catches your eyes. There are so many fanmade redesigns of well-known sites! Ever complained about a style change on your favorite website? Perhaps you are not the only one. Maybe someone out there created a user style that reverts a site to how it used to be! Or you could write your own, but you need CSS knowledge to create a user style (duh?).
uBlock Origin
Typically it’s an ad blocker plugin, and we can’t exclude it from the list as it brings a substantial change to almost every website. After all, this has the most significant benefit on your browsing experience, with no coding skills required. That almost sounded like a sales pitch? Anyway, I’m always amazed how few people I know use an ad blocker. Whenever I see a site I also use, like YouTube, I can’t help but wonder…
“Wait, this site has ads?
…that explains how this is a free service!”
Every time! I thought there are just good samaritans who run sites like snag.gy purely for my benefit. Once you have an ad blocker, it certainly feels that way. Makes sense? If you take home just one thing from this article, let’s make it uBlock Origin.
It’s lesser-known, but you can manually block anything on a site that you don’t like. Find the Block Element option in the right-click context menu, opened over the target. It brings up an interface that highlights what’s about to be blocked and you can go up its list of parents to widen the criteria (CSS selector). I use it all the time to prevent non-intrusive advertising or just individual images like forum user avatars that I find offensive.
It can also block a request by its URL (even using wildcards) if you use the My filters tab in its settings. I used it to deny entire WordPress plugins or themes from loading assets when checking for compatibility issues.
Tampermonkey
You guessed it, another browser plugin. I don’t use this all that much. But when I need it, this is the most powerful way to change a website. My #1 use case is participating in the war against anti-adblock popups. You know, when you have an ad blocker and the sites detect it and nag you with a popup? Or they display a distracting message where the ad used to be. Even though uBlock Origin has an anti-adblock filter, sometimes I have to take matters into my own hands. When I’m against this, I use JS to search for any element with the particular image or anti-adblock wording, and remove the entire thing, starting from an appropriate parent. This process is sometimes impossible to do with uBlock’s element blocking as some sites tend to use randomized IDs and Classes to go below the filters’ radar (it’s a war after all).
More noble use cases for Tampermonkey include adding your assets to a page or enhancing site features. There are tons of 3rd party user scripts, and you might find some that tickle your fancy. I used some for YouTube to force HD, but now I have a browser plugin for that. But perhaps you like fewer plugins and more userscripts? Who knows. Look around on Greasy Fork and OpenUserJS to get started with scripts by other people.
Developer tools
I think I spend more time tinkering in Chrome DevTools than programming in any IDE. When I develop WordPress plugins, it’s often about trial and error. Since I work mostly with front-end stuff, I’m continually inspecting bits and pieces of my creation. I do what I imagine (like re-color or position anything) with the developer tools, and when I like the result, I set it in stone by coding. The latter part is often quicker.
Use the developer tools when you want to change something temporarily on a website. A most notable non-advanced use case is taking a screenshot or printing something. This tool allows you to hide, remove, change anything that gets shot or printed. Using the Inspector, you may change any text, insert or delete any element, reorder or recolor anything. Reload the page any every change to the website is gone.
When debugging customers’ sites and trying to find 3rd party conflicts, I often block specific resources (in this case JS files) from ever being loaded. The Block request URL option in the context menu of rows on the Network tab is especially helpful for this purpose.
Burp, an interactive HTTP proxy
Here is where things get advanced, but for me, this is the most interesting approach. You’ll likely run into some situations where you wish the server would send the data your desired way. In those cases, it’s not economic or wise to try getting Greasemonkey to change some incoming asset of the website. It’s not that good at stepping in and re-writing stuff on the fly. This is where an interactive HTTP proxy can shine. There are many like this, but I chose Burp for no particular reason (Community edition). In a nutshell, it acts as a middleman between your browser and the remote server. It can intercept and change any request going in or out. It requires changing your proxy settings to a localhost address and installing SSL certificates so you can still work with https sites. Honestly, that’s about the hardest part, installing that darn certificate.
Storytime: How I changed The New York Times website
So, in December 2018, some news sites predicted the end of the world another recession. They based this prophecy on the inversion of the US Treasury Yield Curve. I wanted to see for myself what that curve is about and just how inverted can it be. After getting fed up by illustrations that showed the curve as a hockey-stick, I decided to visualize the data: The Yield Curve’s 28 years in 2 minutes. It shows how much % yield you could have gotten if you invested in US bonds. When a shorter-term bond yields more than a longer-term, that’s the inversion, and it’s an economic problem.
As you can see, it blew up. When someone asked for a 3D yield curve, I found the old 3D Yield Curve by the New York Times. Unfortunately, it’s from 2015 (this is important) and doesn’t show the latest developments regarding yield. I couldn’t let such a useful visualization tool go to waste, so I intercepted and changed the data coming from their server, based on what the 3D view is generated. Using Burp, I added the missing data from the Treasury, so the graph goes all the way to 2018! Since this only changes the page for me (unless NY Times is willing to update it), I can only share this with you as a video (screen capture).
Afterword
As you can see, it’s possible to do some exciting things to websites if you view them as your playground. I certainly do, and I genuinely enjoy manipulating them to my liking even if nobody else sees it. Think of it as modding in a video game or the interior of your car. It’s mostly only for you, but if it makes you happier, then do it. Since childhood, I was into customizing how my computer UI looks (Windows). It started by changing the cursor to be animated (it kind of still is these days. but it isn’t drawn by me anymore). My Windows taskbar even looked like the OSX dock. At some point, I’d rewrite interface texts to swear mildly and to be funnier. This ploy transcended into the web world once I started working with websites. Old habits never die, huh?
How would YOU change this website? Don’t be shy – share it in the comments below!
