Question

I want to create a bookmarklet that will allow users to submit URLS from sites on the fly as they browse.

I’m looking for three possible implementations of this bookmarklet.

1. Simply click the bookmarklet and be taken to the page with my form field and have the URL they just came from entered into the field.

2. Simply click the bookmarklet and be taken to the page with my form field and the link they had highlighted from the previous page is entered into the field.

3. The preferred option – Click the bookmarklet, a popup (similar to Twitter’s tweet box in size and function) opens with my form field pre-populated with the URL of the page they clicked the bookmarklet on. Like Twitter’s tweet box and facebook’s share box.

Answer 1

I typically don’t just give away code, but this is so simple I figure it’s worth sharing and explaining.

Compressed:

javascript:(function(f,s,n,o){window.open(f+encodeURICompnent(s),n,o)}('http://example.com?url=',window.location,'yourform','width=300,height=200'));

Expanded

(function (formurl, site, name, options) {
    window.open(
        formurl+encodeURIComponent(site),
        name,
        options
    );
}('http://example.com?url=', window.location, 'yourform', 'width=300,height=200'));

The way this works is it just calls an anonymous closure to pass variables to the window.open function. It passes the current page’s location as the uri value in the query string.

On the page containing your form, you’ll need to populate the correct field with the value from the query string.

Although this could be written without using a closure, you need to make sure that there isn’t a return value from whatever’s being called, as javascript:<string value> will re-write the DOM with whatever text was in <string value>.