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 IE
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 IE Fx Opera Safari
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 IE Fx Opera Safari
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 IE Fx Opera Safari
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 IE
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 IE Fx Opera Safari
This opens a new window and displays the nested structure of framed documents.
Outline View 1 IE Fx Opera Safari
This extracts any headings from the document and puts them into a new window as a hierarchical list of links.
Outline View 2 IE
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 IE Fx Opera Safari
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 IE Fx Opera Safari
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 IE Fx Opera Safari
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 IE
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 IE Fx Opera
This provides tooltips that give the title, destination, and target window of links.
Zoomable Images IE
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 IE Fx Opera Safari
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 IE Fx Opera
This loads the selected location when a URL string (e.g., bookmarklets.html) is selected.
Open All IE Fx Safari
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 Fx Safari Opera (Partially Supported)
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 IE Fx Opera
This opens any <!--hidden comments-->:
Reveal Hidden Fields IE Fx Opera Safari
This opens any hidden form fields so that you can read/edit their values:
Enable All Fields IE Fx Opera Safari
This enables all form controls including those disabled accidentally:
Indicate Contents of Form Fields IE Fx Opera Safari
This enables the indication in the status bar that shows "name=value" of the current field in a form:
Display Form Data IE Fx Opera Safari
This shows the name/value pairs of all form fields in the page.
Display Cookie IE Fx Opera Safari
This shows the cookie for the site.
View Source 1 IE
This opens the document in the client's default HTML editor using the view-source: protocol.
View Source 2 IE
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 IE
This opens a new window and shows the HTTP response headers and the raw content of the document.
View Document Object Tree IE
This opens a new window and shows a DOM tree representing the hierarchical structure of the document.
Validate HTML IE Fx Opera Safari
This validates the document using W3C MarkUp Validation Service.
Validate CSS IE Fx Opera Safari
This validates the CSS in the document using W3C CSS Validation Service.
Turn Words into Hyperwords IE Fx Opera Safari
This makes text within the document more interactive. See Liquid Information for details.
Links to Google Cache IE Fx Opera Safari
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 IE Fx Opera
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 IE Fx Opera Safari
This shows a list of the archived pages of the site using Internet Archive.
Edit Page IE
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 IE Fx Opera Safari
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 IE Fx Opera
Load Form Data from Cookie IE Fx Opera
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 IE
This copies the document title, location, and selected text into the clipboard.
Copy Title, URL, and Selected Text into Text Field IE Fx Opera
This copies the document title, location, and selected text into a text field.
Link Title, URL, and Selected Text into Clipboard IE
Cite Title, URL, and Selected Text into Clipboard IE
Cite Title, URL, and Selected HTML into Clipboard IE
Link Title, URL, and Selected Text into Text Field IE
Cite Title, URL, and Selected Text into Text Field IE
Cite Title, URL, and Selected HTML into Text Field IE
These tools create an A, Q, or BLOCKQUOTE element, respectively, from the document title, location, and selected region.
Google Search IE Fx Opera
This searches for the selected/entered phrase using Google's WebSearch.
Google Search on This Site IE Fx Opera
This searches for the selected/entered phrase within the site using Google's SiteSearch.
Google Search by Gesture IE
Google Search on This Site by Gesture IE
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 IE Fx Opera Safari
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 IE
This removes the malicious script that kills the context menu.
Check LCD Pixels IE Fx (Partially Supported) Opera (Partially Supported) Safari (Partially Supported)
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 IE Fx Safari
This provides a 3D view of the Page. Any images and headings will pop up through binocular disparity.
Mystery 1 IE
Mystery 2 IE
Mystery 3 IE
Mystery 4 (And Then There Were None) IE Fx Opera Safari
Each of these is just a joke program.
Lupin III IE
This is also a joke program. Press Alt+F4 to exit on IE.
Hi!! I'm... IE Fx (Partially Supported) Opera (Partially Supported)
Hi!! This opens a new window, so please resize it as you like. He is not a keyboard, but a...
Unicode Escape IE Fx Opera Safari
Enter the text string you want to escape. Note: This is a stand-alone tool (independent from the content of the document).
Make Boookmarklet IE Fx Opera Safari
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 IE
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
KOBAYASHI Masatomo <kobayash at is.s.u-tokyo.ac.jp>
Last Updated: Wed, 26-Apr-2006 JST