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

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

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

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.

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 }}