About a year and a half ago I had to create a simple bookmarklet for a work project that captures the url and title of the current page. While there was a lot of information scattered about the internet there was no single step-by-step guide that I could find. As I started to learn more about bookmarklets I gained a greater understanding of their potential. Many new ideas came to mind that I never had time to explore until now.
This series of posts is intended to provide that simple step-by-step guide as well as offer some new and exciting bookmarklets ideas.
How does a bookmarklet work?
A bookmarklet is simply a bookmark that uses the javascript: protocol instead of the more usual http(s): protocol. When you click on a bookmarklet from your Bookmarks toolbar the javascript is executed within the context of the current document.
Since a bookmarklet is just another url it can be presented in a webpage just like any other link. Adding a bookmarklet to the browser Bookmarks toolbar is just a matter of dragging and dropping the link. A bookmarklet can even be put into a folder on the Bookmarks toolbar for less frequest access.
Bookmarklets also have access to any other Uri and are not limited by the same-origin policy. Bookmarklets often inject into the current tab a script tag that points to a completely different domain. Since the script tag has access to both the current document and the remote domain it can pass information between them.
Of course, passing information between domains has security implications. Users adding bookmarklets to their toolbar should do so only in trusted situations. Since there is no universal code signing mechanism for javascript, bookmarklets should be treated with the same caution as any other website.
Known Issues
- Javascript is required. It goes without saying that any link that uses the javascript protocol is going to require that javascript be enabled in the browser.
- Framesets present a challenge too since there is no DOM element to attach a child script element to.
Hello World
Lets create the simplest of bookmarklets. No web server is required and the IDE of choice can be as simple as notepad. Copy the following code block into a new text document and save it with an appropriate name. I named mine helloworld.htm but you can choose whatever you like as long as the extension is recognized by your web browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World</title>
</head>
<body>
<a href="javascript:{alert('Hello World!');}">Hello World!</a>
</body>
</html>
After you have saved the file open up your web browser and navigate to the file or double click it from within Windows Explorer or the Mac Finder. You should see a plain white page with a single link. Drag that link to your Bookmarks toolbar and when you drop it you should see a new button labelled Hello World!
Navigate to a totally unrelated page then click the button.
Assuming there were no accidental typos you should see an alert box with the Hello World! text in it.
Congratulations. You have created your first bookmarklet. In part II of this series I will show you how to do something a little more useful than hello world. I will demonstrate how to manipulate some information from an existing page and present it in an embedded iFrame.
The Screaming Carrot 