How to display a form in any site's pages using a bookmarklet (like Note in Google Reader)?

Question

In Google Reader, you can use a bookmarklet to "note" a page you're visiting. When you press the bookmarklet, a little Google form is displayed on top of the current page. In the form you can enter a description, etc. When you press Submit, the form submits itself without leaving the page, and then the form disappears. All in all, a very smooth experience.

I obviously tried to take a look at how it's done, but the most interesting parts are minified and unreadable. So...

Any ideas on how to implement something like this (on the browser side)? What issues are there? Existing blog posts describing this?

Answer 1

Aupajo has it right. I will, however, point you towards a bookmarklet framework I worked up for our site (www.iminta.com).

The bookmarklet itself reads as follows:

javascript:void((function(){
    var e=document.createElement('script');
    e.setAttribute('type','text/javascript');
    e.setAttribute('src','http://www.iminta.com/javascripts/new_bookmarklet.js?noCache='+new%20Date().getTime());
    document.body.appendChild(e)
})())

This just injects a new script into the document that includes this file:

http://www.iminta.com/javascripts/new_bookmarklet.js

It's important to note that the bookmarklet creates an iframe, positions it, and adds events to the document to allow the user to do things like hit escape (to close the window) or to scroll (so it stays visible). It also hides elements that don't play well with z-positioning (flash, for example). Finally, it facilitates communicating across to the javascript that is running within the iframe. In this way, you can have a close button in the iframe that tells the parent document to remove the iframe. This kind of cross-domain stuff is a bit hacky, but it's the only way (I've seen) to do it.

Not for the feint of heart; if you're not good at JavaScript, prepare to struggle.