Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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.

document.title=window.prompt("","hello");

Impressive.

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.

How?

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

(function(){
    document.title=window.prompt("","hello");
})()

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:

javascript:(function(){document.title=window.prompt("","hello");})()

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

Why?

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:

ted.mielczarek.org/code/mozilla/bookmarklet.html

Other Links

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:
web dev ,bookmarklets ,javascript

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}