A Quick Intro To BookMarkLets

DZone 's Guide to

A Quick Intro To BookMarkLets

Bookmarklets are an easy way to have custom JavaScript to support your testing that sync across browsers. Read on to learn how to use them!

· Web Dev Zone ·
Free Resource

It took me quite a while to start using Bookmarklets but now that I’ve started, ooh, just try and stop me.

A Bookmarklet is basically some JavaScript code that you store as a bookmark in your browser so you can click on it and instead of being taken to a new link something else happens.

For example, if I typed the following code into the JavaScript console it would prompt me for an input and then set the title of the page to whatever I typed in.



In the past, if I wanted to re-use this, I would store it in Evernote or save it as a snippet in Chrome (inspect/sources).

Now, I would create is as a bookmarklet.


Well, first I need the code to be runnable as an anonymous function that runs immediately:


Type that into the console and you’ll see code run immediately. Pretty much the same as the previous code.

But now, if I put javascript: on the front, it magically becomes code that I could add as a bookmarklet. I have to remove the new lines and stuff so it looks like:


If you copied that into the bookmark manager in your browser then you could change the title on any page you go to.


You could have JavaScript code that:

  • Creates data.
  • Adds new options on the page.
  • Makes XML HTTP Requests.
  • Deletes annoying popup divs.
  • Exports variables to the console.
  • … whatever … new tool … use your imagination.

I use it for all of the above.

If you add them to Chrome, and you are logged in to Chrome then they will sync across to all your Chrome browsers - which ‘snippets’ don’t do.

Tool Support

The simplest tool for creating a bookmarklet I could find was typing the following into the console:

"javascript:(function(){" + encodeURI(window.prompt("")) + "})()"

Paste your JavaScript code into the prompt then copy and paste the generated JavaScript code from your console into your bookmark manager.

I avoided a lot of coding by using a prompt which strips out all the new lines and then using encodeURI to prevent me from having to worry about formatting.

I Wrote Another Tool

I wrote a GUI tool to help as well. It's very minimal. You can find it on Github.

And the tool is live on my website.

For this tool, basically:

  • Click [Rename] and type in a name to rename the link.
  • Click [Make BookMarkLet], copy in the code you want to convert and click OK.
  • Drag the link to the bookmark toolbar.
  • Or copy and paste into the bookmark manager from the JavaScript Console.

I like the GUI version because I can drag and drop a named link to the bookmarks bar.

Other Tools

If you want a more ‘professional’ tool that does something similar, then check out:


Other Links

bookmarklets, javascript, web dev

Published at DZone with permission of Alan Richardson , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}