User Interface Research Group - Masatomo Kobayashi - Bookmarklets

Bookmarklets

Bookmarklets are simple tools that extend the surf and search capabilities of Netscape and Explorer web browsers. See Bookmarklets Home Page - free tools for power surfing for details.

Takeshi Nishida provides a useful tool for developing and publishing your original bookmarklets: Bookmarklet Editing Environment (in JScript).

Contents

1. General Forms of Bookmarklets
2. Examples of Bookmarklets
   1. Improving Usability/Accessibility of Web Documents
   2. Debugging Web Documents
   3. Misc
3. Project: HTML to Slide Show

General Forms of Bookmarklets

A bookmarklet looks as follows:

javascript:[one-line JavaScript code]

Statements that return no value can be written in a simple form:

javascript:alert('Last%20Modified:%20'+document.lastModified)

Each value-returning statement requires a void operator:

javascript:void(status='Last%20Modified:%20'+document.lastModified)

An anonymous function can be used to avoid namespace collision:

javascript:(function(w){w=open();w.document.open();w.document.write('Last%20Modified:%20'+document.lastModified);w.document.close()})()

A recursive function call lets a bookmarklet work on framed documents:

javascript:(function(w,i){for(i=0;i<w.length;++i){arguments.callee(w.frames[i])}alert('Last%20Modified:%20'+w.document.lastModified)})(top)

Examples of Bookmarklets

Note: Most examples still have room for improvement in capability, efficiency, and readability. For example, some doesn't work on non-IE browsers or on framed documents.

Improving Usability/Accessibility of Web Documents

Seeing is Wheeling

This assists you to read the document. To cancel the effect of this tool, please execute the bookmarklet again. See Seeing is Wheeling: Reading Assistance by Moving Hilight Using MouseWheel for details.

Check Boxes as Toggle Map

This enables you to toggle multiple check boxes with a single mouse drag operation. You will be free from clicking on each box individually:

Make Links from URL-like Strings

This finds URL-like strings (e.g., http://www-ui.is.s.u-tokyo.ac.jp/~kobayash/misc/bookmarklets.html) within the document and replaces them with the corresponding links. Make Links from URL-like Strings (h-Complement Version) (i.e., ttp:// → http://) is also available.

Scroll by Dragging

This enables you to freely scroll a large document as with the "Hand Tool" in Adobe Acrobat. To cancel the effect of this tool, please execute the bookmarklet again.

List Alternate Style Sheets

This adds a multiple choice menu to the top of the page, so that you can toggle each style sheet associated with the document. The latest Mozilla and Opera browsers provide such a menu as a default feature.

List All Frames

This opens a new window and displays the nested structure of framed documents.

Outline View 1

This extracts any headings from the document and puts them into a new window as a hierarchical list of links.

Outline View 2

This shades any elements in the document except for headings. You can read (or shade again) de-emphasized contents by double-clicking on them.

Toggle Links

This inactivates/reactivates every links in the document. You can interact with (e.g., select, copy, ...) the contents of inactive links without jumping to their destinations.

Inactivatable Links

This is an interactive version of the preceding one. You can toggle any links individually by mouse-wheeling on them (or clicking on them with the control key down).

Target Alert

This adds an alert icon to the right of the following links: (a) whose target is another window/frame, (b) to other sites, (c) with non-HTTP protocols, (d) to Adobe PDF docuements, (e) to movie clips (.mpg, .wmv, .mov, .rm, .avi, and .swf), or (f) to sound clips (.mp3, .wma, .wav, .au, .mid, and .swa).

Opera-like Zoom

This enables you to zoom the page view in/out by 10% by mouse-wheeling with the control key down. Unlike the default behavior of IE, this scales not only texts, but also images, components, and layouts.

Opera-like Tooltip for Links

This provides tooltips that give the title, destination, and target window of links.

Zoomable Images

This adds a scaling feature to each image in the document. You can zoom images in/out by using mouse wheel on them.

Load Alternative URL Manually

This provides a way to load an refreshed URL when the automatic redirection via META is disabled and there is no alternative navigation on the page.

Load Selected URL

This loads the selected location when a URL string (e.g., bookmarklets.html) is selected.

Open All

This loads any URLs, images, and quotation sources contained in the selected region. Note: In some cases, this tool opens so many windows at once.

Overlay Images

This finds all the links to an image and makes their behavior more cool. Try it with the following samples (Firefox is recommended): sample #1 sample #2

Debugging Web Documents

Reveal HTML Comments

This opens any <!--hidden comments-->:

Reveal Hidden Fields

This opens any hidden form fields so that you can read/edit their values:

Enable All Fields

This enables all form controls including those disabled accidentally:

Indicate Contents of Form Fields

This enables the indication in the status bar that shows "name=value" of the current field in a form:

Display Form Data

This shows the name/value pairs of all form fields in the page.

Display Cookie

This shows the cookie for the site.

View Source 1

This opens the document in the client's default HTML editor using the view-source: protocol.

View Source 2

This opens a new window and shows the HTML source of the document. In contrast to the preceding one, the source will be in the internal expression of IE. View Source 2 (Color-Coded Version) is also available and will provide a better experience for you.

View HTTP Response

This opens a new window and shows the HTTP response headers and the raw content of the document.

View Document Object Tree

This opens a new window and shows a DOM tree representing the hierarchical structure of the document.

Validate HTML

This validates the document using W3C MarkUp Validation Service.

Validate CSS

This validates the CSS in the document using W3C CSS Validation Service.

Turn Words into Hyperwords

This makes text within the document more interactive. See Liquid Information for details.

Links to Google Cache

This rewrites every links in the document to take you to the cached page at Google. With this tool, you can review the content of a site that is temporarily down.

Links to Coral Cache

This rewrites every links in the document to use Coral: The NYU Distribution Network. With this tool, you might avoid slashdotting a site.

Go to Archive for This Site

This shows a list of the archived pages of the site using Internet Archive.

Edit Page

This enables you to edit the content of the document. To cancel the effect of this tool, please execute the bookmarklet again.

Misc

Referer Messenger

This rewrites any destination URL within the page to a specified URL. Usage: (1) search for a message (e.g., "i love u") using Google, Yahoo!, and so on; (2) use this tool on the search results page; (3) enter the URL where you want to send the message; (4) click any link; then (5) the message will be recorded in her/his access log as a referer (search query). Good luck!

Save Form Data to Cookie

Load Form Data from Cookie

The former creates a cookie that contains a temporary backup of the values of the form fields in the page. The latter restores the backup. The cookie will be stored for a week.

Copy Title, URL, and Selected Text into Clipboard

This copies the document title, location, and selected text into the clipboard.

Copy Title, URL, and Selected Text into Text Field

This copies the document title, location, and selected text into a text field.

Link Title, URL, and Selected Text into Clipboard

Cite Title, URL, and Selected Text into Clipboard

Cite Title, URL, and Selected HTML into Clipboard

Link Title, URL, and Selected Text into Text Field

Cite Title, URL, and Selected Text into Text Field

Cite Title, URL, and Selected HTML into Text Field

These tools create an A, Q, or BLOCKQUOTE element, respectively, from the document title, location, and selected region.

Google Search

This searches for the selected/entered phrase using Google's WebSearch.

Google Search on This Site

This searches for the selected/entered phrase within the site using Google's SiteSearch.

Google Search by Gesture

Google Search on This Site by Gesture

These are interactive versions of the preceding ones. You can search for any selected phrase by swinging the mouse cursor vertically on the phrase. The search results will appear in a pop-up window.

Restore Indication of Destination

This removes the malicious script that obscures the default indication in the status bar that appears when you points a link in the document.

Restore Context Menu

This removes the malicious script that kills the context menu.

Check LCD Pixels

This assists you to check dead or stuck pixels on the LCD. Keys 1-8 fill the screen with red, green, blue, cyan, magenta, yellow, white, and black, respectively. A dead green pixel, e.g., drops a magenta dot on the white screen, and a black dot on the green screen. You have to manually maximize the window to full screen on non-IE browsers. Press Alt+F4 to exit on IE.

3D View

This provides a 3D view of the Page. Any images and headings will pop up through binocular disparity.

Mystery 1

Mystery 2

Mystery 3

Mystery 4 (And Then There Were None)

Each of these is just a joke program.

Lupin III

This is also a joke program. Press Alt+F4 to exit on IE.

Hi!! I'm...

Hi!! This opens a new window, so please resize it as you like. He is not a keyboard, but a...

Unicode Escape

Enter the text string you want to escape. Note: This is a stand-alone tool (independent from the content of the document).

Make Boookmarklet

Enter a bookmarklet code. A link, which will help you add the bookmarklet into your Bookmarks Toolbar, appears on the upper-right corner of the window. Click the link text to remove it.

Project: HTML to Slide Show

HTML to Slide Show

This tool constructs a PowerPoint-like slide show based on an existing HTML document. Press Esc to start the slide show. Offline files are also available: slideshow.js and slideshow.css.

Version

0.05β

Controls

Esc to start/pause/resume the slide show

Space/Down/PgDn or mouse wheel down to go forward

BS/Up/PgUp or mouse wheel up to go backward

Home/End to jump to the first/last slide, respectively

Features

Fullscreen slides with a header/footer

Control by mouse or keyboard

Freehand annotation

To Do

Hyperlink navigation across slide show pages

More flexible HTML→slide show translation

DOM-based implementation for cross-browser support