How to make a bookmarklet
That's pretty easy, just create a bookmark (using whatever method your browser has) with the following content:
The rest of the code is executed as normal, but you can make it an IIFE (Immediately-Invoked Function Expression) so that you don't accidentally overwrite any variables already defined. The code can be whatever you like, but on some sites (like GitHub) some action may be blocked (like injecting scripts)
Another neat trick is that if you make the bookmarklet return any HTML, the content of the current page will be overwritten with the HTML! (which is perfect if you want a random xkcd fetcher)
It's pretty annoying to have to copy the code for a bookmarklet if you want to use it yourself, right!
- Bookmarklets are just URLs
- URLs can be added to the
hrefof a link
- A link can be bookmarked (right click or drag to bookmarks bar)
So, if you want to put a shareable bookmark on a website, just make an
<a> element with the
href set to whatever code
Unfortunately, I can't seem to be able to add bookmarklets over here, so here's a pen with the output:
Here's some more bookmarklets which you could use:
Bookmarklets are equal to running scripts on a page, so you have to be really careful with them.
For example, this bookmarklet could easily read cookies and post them somewhere:
Once again, you have to be really careful about what bookmarklets do.
Thanks for reading! If you have any nice bookmarklets, please share them down below!
Top comments (6)
Ah another opportunity to shamelessly self promote my bookmarklets 😂.
Weird that two people wrote about bookmarklets on the same day and both of you encouraged sharing bookmarklets you have made!
My dev.to editor (WIP)
7 new features, 51.3 new bugs added 😋, the DEV.TO 👩💻👨💻 editor [PART DEUX!]
InHuOfficial ・ Apr 7 ・ 8 min read
My "click to tweet" button creator
Do you want more 📈 shares on your dev.to articles❓ Add a fancy "click to tweet" button to your posts in just one click!
InHuOfficial ・ Jun 20 ・ 11 min read
Nice! I really need that dev editor update
Yeah I know, it would make life a lot easier! ❤️
I have been using bookmarklets for 10+ years now. recently in one of my projects i encountered pages where bookmarklets don't work. Found out that it's because it's React js generated content on the page.
Do you know how to get this to work on such pages?
I don't see how react can affect a bookmarklet
Could you share the site/bookmarklet? Then I might be able to take a look into it.
I just made a Markdown Editor (which is a Textarea Improver for now), and at the end of the post I also provide a bookmarklet which does so to every textarea (Works on DEV too!)
Let's build a Markdown Editor!
Siddharth ・ Jun 28 ・ 4 min read