If you are a developer, you might have probably used or heard of Bookmarklets once or twice in your coding journey.
They can do anything from simply making an alert popup box to making a post request with the fetch api.
href attribute. An example would be
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.
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.
- 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!