Creating a Javascript Bookmarklet

For nearly all problems there are probably a hundred different solutions. Recently one solution I have chosen for a few problems has been a Javascript bookmarklet. A bookmarklet is a regular bookmark that runs a bit of Javascript code instead of just going to a link. They are really useful for doing a small task on a website or webpage that you don’t have direct access to the backend or source of. So, today I am going to show you how to make a simple bookmarklet.

The bookmarklet today is going to grab a super high-res photo of Amazon Products. Ok, let me explain a little bit more. So, a designer co-worker uses super high-res product images for design mockups. Well, he typically would go scouring the internet for these images. However, he noticed that on Amazon product pages you can look at really large images of products using their Zoom viewer, but you could right-click and download the image from there. So I created a simple bookmarklet to grab the product id from the page url and then open up a link to the large image.

Okay, back to work. So a typical link which can be turned into a book looks like:

SOTC Tutorials

And the code looks like.

So if we were going to do something javascript we could do something like:

And the code would be:

Now, that just covers the basics of the syntax we are going to use for this. You can see above that to tell the browser to run our href as Javascript we need to start with javascript:. Ok so let’s jump to something a bit more complicated. The next piece of Javascript is going create an alert with the current time – I know we all love alerts.

Looking at the code we start by creating anonymous function and inside the function we create a new Date object, then use it to create a string of hours and minutes, and then show this (current time) in an alert.

So, now if you want to make this a Bookmarklet simply do one of two things.

1. Drag the link to your bookmark toolbar.
2. Create a bookmark. Copy the location of the link above and change location of the new bookmark you just created.

The final piece of code we are going to look a is the actual bookmarklet Javascript for the Amazon Image grabber.

The code starts with creating a regular expression that pulls the product id from a url. Next we run the expression on the current page url – it won’t work on this page – using the match to run the expression. Then the url for the large image is created. The last thing is to change the url of the page to go to the large image. Really, that is about it. For a link we wrap it with the aforementioned function and the javascript: starting. In link format this looks like:

And the link:

Well, I hope you learned something today about Javascript links and Bookmarklets. If you have any questions or comments feel free to leave a comment below or head on over to the forums.