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

At it's very basic level it will be using createElement to create the elements to insert into the page and appendChild or insertBefore to insert them into the page.

Answer 2

You can use a simple bookmarklet to add a <script> tag which loads an external JavaScript file that can push the necessary elements to the DOM and present a modal window to the user. The form is submitted via an AJAX request, it's processed server-side, and returns with success or a list of errors the user needs to correct.

So the bookmarklet would look like:

javascript:code-to-add-script-tag-and-init-the-script;

The external script would include:

• The ability to add an element to the DOM
• The ability to update innerHTML of that element to be the markup you want to display for the user
• Handling for the AJAX form processing

The window effect can be achieved with CSS positioning.

As for one complete resource for this specific task, you'd be pretty lucky to find anything. But have a look at the smaller, individual parts and you'll find plenty of resources. Have a look around for information on modal windows, adding elements to the DOM, and AJAX processing.

Answer 3

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%20e=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.