DEV Community

loading...
Cover image for Bookmarklets - The Ultimate Web Tools - What they are and how to make them.

Bookmarklets - The Ultimate Web Tools - What they are and how to make them.

leviathanprogramming profile image 𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming ・2 min read

What are bookmarklets?

If you are a developer, you might have probably used or heard of Bookmarklets once or twice in your coding journey.

Bookmarklets are javascript extensions that you can add to your browser that almost anyone can use. Developing one is extremely simple and super easy for anyone to use.
They can do anything from simply making an alert popup box to making a post request with the fetch api.

How to make one

<a> tags in HTML can have javascript in their href attribute. An example would be

<a href="javascript: alert('hello world');">Anchor Tag</a>
Enter fullscreen mode Exit fullscreen mode

If you make that in HTML and drag it into your bookmarks bar, you have just added a bookmarklet to your browser. It's that simple.

Sometimes, to quickly view the stats of a certain site, I will make a bookmarklet that runs on the Fetch API so that it alerts me with all the information I need.

Note that all the javascript in your bookmarklet has to be minified.

<a href="javascript: fetch('https://api.website.com/endpoint').then((data) => { alert('data'); })"></a>
Enter fullscreen mode Exit fullscreen mode

Bookmarklets can control documents from their top level. That means you can completely wipe the body content of a URL temporarily and replace it with something else.

<a href="javascript: document.body.innerHTML = '<h1>Hacked</h1>' })"></a>
Enter fullscreen mode Exit fullscreen mode

A couple of tips

  • There is a 2000 character limit in some browsers for the URL on a bookmark so watch out if you are trying to inline it all.
  • A cleaner way to handle bookmarklets is to simply use them to inject a script from a server you control. This means you can just FTP a new version of the script and not have to change the bookmarklet if you are trying to test something or have a bookmarklet that needs to update regularly. (Thanks to @inhuofficial )

What will you make? A bookmarklet to display your codepen pen live? An extension to let you create a dev.to post in one click? A bookmarklet to make yourself a temporary dark mode? Go crazy!

Don't forget to mention what you've made in the comments below!

Discussion (2)

pic
Editor guide
Collapse
inhuofficial profile image
InHuOfficial • Edited

I use bookmarklets extensively while testing things on other people's websites.

A couple of things to add to your article.

  1. There is a 2000 character limit in some browsers for the URL on a bookmark so watch out if you are trying to inline it all.
  2. A cleaner way to handle bookmarklets is to simply use them to inject a script from a server you control. This means you can just FTP a new version of the script and not have to change the bookmarklet if you are trying to test something or have a bookmarklet that needs to update regularly.

A couple of ones I have been working on

This one is an editor for dev.to I am working on, just drag it to your bookmarks bar and then navigate to the new article page and press the bookmarklet and voila, a full editor (with a tonne of bugs!):-

and this one is a bookmarklet to switch off animated GIFs on dev.to for people who find them distracting.

.
Collapse
leviathanprogramming profile image
𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming Author

Thanks for the tips. Those bookmarklets look really nice!