This is a system of bookmarklets for making notes on web pages and then creating a link to send other people that will display those notes and resume your scroll position. The looks are similar to those found on the greasemonkey script annotate, but this doesn't require the viewer of the link have that script installed or greasemonkey installed at all. You can see below how to use it, how it works, or how to build it. So, a noted page looks like this.

Here are a couple examples:


The entire system is controlled by these three bookmarklets:

I put these in one menu, such as this (I made this image before adding the third link, and I have to run and then meet someone, so I'll update the image later...use your imagination, and you can pretend a third link, go wild, make it whatever you want, you're in charge):

So this is how this is used.

How this works

Everything here is really pretty uncomplicated. When you add a box, you are adding a <div> node with some style to the DOM. Unlike with annotate where I could store information on the location and text of boxes as bindings in the javascript environment, I had to reference them directly from the DOM for this, because on each invocation of the script, new values were taking on -- hence, each call is stateless other than the state in the DOM.

To construct the final URL, I go and grab all the relevant <div>s with class name _mbox, grab the x and y coordinates in the style, and the text in a <div> contained within and create another url. That url (target URL) and the rest of these values are passed to load.php, which is responsible for inserting the common.js and client.js scripts either in the HEAD element of the target URL or creating a new HEAD element and putting it in there; and insterting a script tag that makes a call to clientMain(), contained in client.js that will actually do all the work to reconstruct the message boxes and scroll position from the location of the created URL.


First, you'll need the source.


After that, the only requirement for building in the create_bookmarklet script on your PATH. This script condenses and takes any number of plain javascript files and converts them into one bookmarklet. Other than that the main idea is to put all the common code in common.js, then type make.

DISCLAIMER: Nothing on this site is affiliated at all with tinurl, yahoo, AOL, or any other company