Why would you want to change the UI of a site you visit?
Well, there're loads of reasons:
- Personalise your experience
- Remove unwanted content
- Add your own menu items
- Mock up UI improvements in the browser, record your results, and submit them as improvement suggestions to existing projects
...knock yourself out.
Basic site modifications
The easiest code-free way to modify a site is just to remove unwanted elements from its pages. This can be done with code but often times that's overkill when you can just re-purpose an ad-blocker instead. I use Ublock Origin for this.
While this is quick and easy, it only really allows you to remove things you're not interested in. You get a more tailored, streamlined experience but you don't get anything new.
Example: remove clutter from Microsoft office online.
So this:
Becomes this:
You can see I've ditched the hero image (which just meant that I had to scroll down on every page when I was using a laptop) and also removed the Office products I'm never going to use. Same goes with the upselling CTA links.
Advanced site modification
Blocking elements is one thing, but adding functionality is a whole 'nother level.
For this, we're going to use "userscripts", little self-contained javascript snippets which trigger themselves automatically when the page URL matches a pattern.
With these scripts, you can perform a major overhaul of how a site behaves. You can hammer it into exactly the shape you want.
Now, userscripts have been around for a long time, and this might seem a little old-school in a world where web extensions are becoming easier and more portable. Why use such a crude tool? Well, because it's quick and easy and there's nothing to learn beyond normal everyday front-end Javascript. Why not use a bookmarklet I hear you ask? Automation and community, mostly.
Some ideas to get you started
Make your favourite site work at your favourite window size
Tired of using sites that aren't properly responsive?
- Remove unwanted elements (watch-list, news, everything in the sidebar, ads for IMDB Pro, the megamenu, etc.)
- Re-style the search form so it stays stuck to the top of the window
- Fix the width and padding issues that naively hiding the sidebar causes (see right hand side of "before" image)
So this:
Becomes this:
Change pagination into infinite scroll
Do you prefer infinite scrolling?
- Write a function to load a page and inject part of it into the current page
- Hide the existing navigation
- Trigger the function on scroll if the page is at the bottom and there's a "next page" link to follow
Fix sites which open every link in a new tab
Some sites (like Quora for example) insist on opening almost every link in a new tab. This breaks the way the web works and is something I personally find very annoying.
- bind to every anchor and prevent it from bubbling
- push the current URL into the browser's history
- update
window.locationdirectly
Hide elements you can't block with a selector or xpath rule
Some websites use frameworks which produce "div soup" and don't have consistent class names or IDs. Sometimes this is just an artifact of the build process, other times it's a deliberate attempt to make it harder for people to detect and block unwanted content.
Let's say you're never interested in following the herd. You're on Reddit and you want a more distraction-free experience.
If you know an element includes the text "Trending communities".
- Write a function to check every div for the known text
- Work your way up its parent nodes until you reach the level you want to hide, and do so
- Flag every div you've checked so you don't check it again
- Re-trigger the script if the DOM is changed or with
setInterval()if you have no better way.
Tools
Greasemonkey was the original standard, but it's been surpassed now by Tampermonkey and Violentmonkey. Despite the ominous name, I recommend Violentmonkey, because it's MIT-licensed.
Tampermonkey is currently the most popular userscript manager, but it's closed-source and can't guarantee your privacy. As far as effectiveness is concerned, it doesn't matter which one you use; they can all run userscripts and they all implement the original Greasemonkey API.
API
The Greasemonkey API allows you to do a bunch of things you might not normally be able to do, such as include arbitrary remote scripts. You don't need to know anything about it most of the time.
Many people use @require front matter to include jQuery, for example. You don't have to, I'm just sayin'.
Sharing
There are public repositories of userscripts such as Greasy Fork which are often a good place to get ideas.
Safety
If you're going to use other peoples' userscripts, these plugins will let you examine them before installation, and there're obviously some constraints on what a script can actually do - but there's always the chance someone is distributing malicious code. Or, giving a little more benefit of the doubt, that their bug-ridden effort is going to have dangerous side-effects.
In reality, this is not any more dangerous than installing software from the Arch User Repository or NPM or any number of user-contributed package systems.
Shop smart.
Cover image from Andrew Beierle at Free Images
Top comments (13)
I'm working on a Firefox Extension that does this for the inventory system ChannelAdvisor that I use a lot at work. If it can save me a single click, I'll find a way to automate it. Things like:
type=numberso I can use the arrow keys instead of typing the numberSaves me a lot of time and I can share it with my coworkers to make everyone's lives easier.
Part of what prompted me to make this post was that at work one of our developers has just converted a userscript into a Chrome extension and we've been looking at different tools for different jobs. Our script reacts to our different development/testing/preprod environments by fetching information about the builds and making it appear in an overlay, with links off to releases and tickets and stuff. That's very bespoke so it's going to remain internal, though.
Are you planning on publishing your extension when it's done?
I haven't really thought about publishing it broadly. I'm not sure how much longer I'll be at my current employer and I wouldn't want to release something into the wild that I wouldn't have any way to continue testing or bug-fixing.
Might move it over to GitHub or something so other people could build off it.
Interestingly I did something like this just yesterday.
I have been using gitlab wikis for a few years now as my personal private diary.
Only yesterday I decided to make the thing look exactly how I wanted:
Absolutely no one else would ever benefit from this extension but the way take my notes, and do my research I am shocked I didn't do this before
That's exactly where I'm coming from! It doesn't matter if nobody else ever uses it as long as it solves a problem for you :)
I did not even think of using a chrome extension to hide elements of a page on a website. I've always been opening up the console, finding an element, and usually applying a
display: none. I might start using a chrome extension so that the style modifications persist accross sessions.You might want to check out userstyles as well then :)
This is Awesome, great post!
I am actually working on a bookmarklet manager chrome extension, you can see it here
It's still in early stages but the premise is simple: Allow editing bookmarklets with the awesome monaco editor that powers Visual Studio Code. So you can easily and quickly edit long bookmarklet scripts as if you were using VSCode.
I have so many ideas for this extension, but it's not there yet. And I think it's going to be awesome!
Is it possible to overwrite a javascript function on a website`?
Kinda. It depends what you're trying to do - for example if you want to replace the handler for a DOM event, you can do that easily enough, but other things aren't possible like simply replacing a function. And you can't touch code that takes place inside someone else's closure...
Can't you block the website's javascript and inject your own? That way you should be able to rewrite whatever you would like, right?
Yes you can do this, but unless they have the bit of script you want to block in a separate file, then you're likely to be blocking all the other code which is often required to make the site work!
After reading your post, I started blocking elements with uBlocker Origin. I decluttered the websites I visited the most and I am very happy with the result! Thank you for the tips!!