Bookmarklets: An age old solution to a modern annoyance

Have you ever found yourself Reading a reddit thread? Looking up a company on glassdoor? Finding that book on goodreads or that specific pin on pinterest? Then you’ve probably come across an obnoxious banner that forces you to create an account or log in before continuing.

I hate these “hard upsell” banners with a passion and refuse to sign up to services that make excessive use of them to juice their engagement metrics. In most cases, they’ve been hastily implemented by some poor frontend engineer and are easy enough to dismiss with some devtools-fu. Trying to automate away this toil led me down the rabbithole of bookmarklets.

Whats a bookmarklet?

A “Bookmarklet” is a name coined for a special kind of bookmark, one that runs some arbitrary JavaScript on the current page rather than navigating to a different URL. It’s been supported by browsers since all the way back in 1995 when it was invented by Brendan Eich of Netscape fame.

The only thing you need to do is prefix the URL of a bookmark with javascript:, for example, javascript:alert('Hello, world!') shows a classic Hello, world! alert when clicked.

Modifying page styles

Using bookmarklets to influence styles of the current page is trivial. We can use JavaScript to modify styles and classes, all we need to do is wrap our statements in an IIFE for the bookmarklet to execute.

For example, we could build a bookmarklet that switches to a (very basic) dark mode for this blog:

javascript:(function() {
  document.querySelector('body > div').style['background-color'] = '#2b2b2b';
  document.querySelector('body > div').style['color'] = '#fafafa';
})()

Dealing with annoying banners

Now that we know how to modify the current page styles by clicking a button, we can automate getting rid of those pesky upsell banners. As an example, we’ll remove the annoying Glassdoor hardsell banner.

Removing the banner requires a couple changes, one to hide the banner itself and another to remove all of styles from body (Glassdoor appends these to fix the page height and restrict scrolling)

javascript:(function() {
  const banner = document.querySelector('.hardsellOverlay');
  banner.style.display = 'none';
 
  const body = document.querySelector('body');
  body.style = {};
})()

And just like that, all you have to do is push a button to continue using the page when presented with the banner.

Conclusion

I don’t think upsell banners are going away anytime soon as the web continues down the road of enshittification. You could probably build an extension that does this automatically, but you’d need to learn about building extensions; build and maintain the extension (everytime these sites change how they try to upsell) for at least two major browser platforms; and make sure the extension is installed on all your devices.

Instead, sometimes it makes sense to do the easy thing, using something that’s been around forever just waiting to be useful again.