If you’ve used services like Instapaper, Delicious, Evernote, Posterous or Tumblr, chances are you’ve encountered a bookmarklet at some point. A bookmarklet is a bit like a regular browser bookmark, but instead of sending you to a different web page, it does something new and interesting with the page you’re currently viewing. Most of the time, it inserts some code into the page that the browser processes, which can do any number of different things from bookmarking the page with a bookmarking service to creating a blog post. Let’s look at some examples.
After you install the Posterous or Tumblr bookmarklets, you can highlight a portion of the web page, click the “Share on [service]” bookmarklet and it will spawn either a pop-up window or a new content container within the page your viewing, prefill the body of a new post with the content you highlighted and let you edit and publish the new post.
If you install the Instapaper bookmarklet, you can click “Read Later” on any web page and it will grab a copy of the salient portion of the page and save it to your Instapaper account for reading later.
If you’re a Delicious or Pinboard user, clicking one of their two bookmarklets will allow you to bookmark the current page and, if you’ve highlighted part of the page, pre-fill the comments section of the bookmark editor. You can also add tags, change the bookmark title and other sundry options all without ever leaving the page.
So, being a true man of the people, I decided to cobble one of these together so’s I could show ya’ll how it worked. Note that this is my first attempt and it’s pretty simple, but I think it explains how they work pretty well. For our test, I wanted to build a bookmarklet that would insert a <link> attribute pointing to Steven Frank’s shutup.css file (which hides the comment areas on many popular sites like YouTube and Last.fm). Here’s the JavaScript:
Let’s walk through this one line at a time.
The first line creates a new link element within the DOM and assigns it to a variable, s.
Lines 2, 3, and 4 each assign the various attributes to the element:
- rel : which defines the element’s relationship to the current document
- type : which defines the content type of the linked resource
- href : the URL of the linked resource
On line 5, we take our new link element and append it to the <body> element of the HTML document.
Finally, we toss in a call to void(0); because the browser thinks this is a link, after all, and will try to take you to a new page or refresh the current page. This function call returns a value of null, so the page isn’t refreshed or any other funny business like that.
The easiest way to turn this into a bookmarklet is to join all of the lines together and prepend it with “javascript:” so the browser knows what to do with it:
Next, create a new bookmark in your browser’s bookmark bar. Note that it doesn’t matter which page you bookmark as we’re going to completely gut and redo the bookmark in a second. Most browsers will let you do this by dragging a site’s favicon (the small image next to the URL in your address bar) down to the bookmark bar. Here it is in Firefox:
The process is similar in Safari and Google Chrome. Once you’ve done that, view the properties of your bookmark. Again, in Firefox:
Change the name to whatever you like. In this case, we’re going to call it “Shut Up”. For the location, paste in that big line of JavaScript we built a couple of minutes ago:
We wouldn’t be very good web developers if we didn’t test this, right? Visit this YouTube video in your favorite web browser and scroll down past the video to the always-enlightened and eloquent comments section:
Now, after we click our new “Shut Up” bookmarklet…
Look Ma, no comments!
Naturally, building these things requires a bit of familiarity with HTML and JavaScript, but, conceptually, it’s pretty straightforward.
Any questions? :)
Photo by oskay
One of my all time favorite bookmarkets is bit.ly bookmarklet, highly recommend.
If someone wants to enhance their Instapaper bookmarklet experience, check out Instapaper firefox addon .