Screencasts

Creating a Simple Bookmarklet

Show Notes

In this quick video tutorial we'll show you what a bookmarklet is, and how you'd go about to create one.

What you'll Learn

  1. What a Bookmarklet is
  2. How to create a simple Bookmarklet

Script

Hello and welcome to the Creating a Simple Bookmarklet screencast. In this quick screencast we'll show you what a bookmarklet is, and you how'd to create one.

What is a Bookmarklet?

A bookmarklet is a link in your browser bookmarks, and doesn't take you off the current page, but executes some JavaScript code that performs a particular task; in other words, it's a bookmark applet.

Bookmarklets come in all shapes and sizes and perform a wide variety of functions, such as content manipulation, browser manipulation and even games.

Today we're going to create a bookmarklet to resize a browser window to a 1280 by 720 pixel resolution. We'll call it 720pify. We use something similar to resize our browser windows when capturing our screencasts. One click and the browser is re-sized, and ready for capturing.

The Project

Let's create an HTML file. It doesn't matter what the name is, it's just somewhere to put our link.

Within this, let's create a link with nothing for the href attribute.

<a href="">720pify</a>

Now this is going to feel a bit like going back to the days before jQuery. We're going to put JavaScript code into the href attribute.

Let's do an alert saying 'Hello World!'. Before any of our Javascript code, we need to add javascript:.

<a href="javascript:alert('Hello World!')">720pify</a>

As you can see, an alert appears.

While we're not going to declare or use any variables in this tutorial, it's best to wrap our code in an anonymous function.

<a href="javascript:(function(){alert('Hello World!')})();">720pify</a>

As you can see, the alert still appears.

Now for the 720pifying code. We need to call the resizeTo method on our window. It takes two parameters: width, and height. By the way, the resizeTo method doesn't work in Chrome or Opera. But Firefox, Internet Explorer and Safari should all be fine.

<a href="javascript:(function(){window.resizeTo(1280, 720)})();">720pify</a>

Let's press this link and see what happens. Just as expected, it resizes our window!

Now, we can drag this link into our bookmarks bar.

When we visit another website and press the 720pify bookmark, it resizes our window. That's because all the JavaScript is contained within the bookmarklet itself.

And that's how to create a bookmarklet.

Bookmarklets with small amounts of code are easily managed in-line. However, you may want to write more complex code that would be better to write in an external file. So we plan on doing some follow-up bookmarklet screencasts, on creating more complex bookmarklets that incorporate external sources and jQuery. If there's anything you'd like to see covered in these follow-up screencasts, please let us know in the comments on Screencasts.org.

Thanks for watching! Subscribe to our RSS feed, follow us on Twitter, and please leave any questions, comments or suggestions for new screencasts in the comments below. If you like our videos, and think your friends, followers or colleagues would benefit from seeing them, please feel free share via any of the links below the video. We really appreciate your support.

Help support Screencasts.org by purchasing the Screencasts iPhone and iPad apps, available through the App Store and iTunes. You can also donate directly via PayPal in the side bar. Thanks in advance for helping us share this content.

See you next time!

← Latest Episodes

blog comments powered by Disqus