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

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
web dev ,bookmarklets ,javascript

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

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}