How to create nifty browser features using JavaScript bookmarks

More than meets the eye

Virtually everyone knows how to bookmark a webpage, unexciting and as commonplace as using a search engine:  Firefox and Chrome users know how to "Bookmark this page", fans of Internet Explorer use "Add to favorites", and Safari surfers click "Add bookmark" from a menu.

However, few users realize they can use a bookmark with JavaScript (JS) code snippets to enhance, expand or customize their web browsing experience. There are a few key advantages in using bookmark "applets" or bookmarklets instead of browser plugins or extensions.

The first advantage of  using a JS bookmark relates to security: Unlike a random browser extension or plugin, you are always assured you will be able to read any JavaScript snippet to ascertain if a security risk is present. Another advantage is portability. This is because most JavaScript bookmark code works across most -- if not all -- major desktop browsers. This can be expanded to include many of the mobile browsers found on iOS, Android, and Windows tablets.

A simple example -- page scrolling with bookmarks

There are three major steps that need performed in order to make bookmarked JavaScript code run in most browsers:

1. Create a function or series of actions to run in a single line of JavaScript.
2. URL encode the javascript snippet, then prefix the encoded string with javascript:
3. Create a new bookmark, pasting the prefixed and encoded snippet in the URL field.

 To illustrate, I created the following line of JS to scroll to the top of a webpage:

window.scrollTo(0,0);

After being URL encoded and prefixed, the snippet looks like this:

javascript:window.scrollTo%280%2C0%29%3B 

Finally, the snippet was copied and pasted into the URL field of a new bookmark I named "Scroll to top." For convenience, I placed the bookmark in IE's Favorites toolbar and added an icon:

Similarly, the image below shows a new Scroll to bottom shortcut created for placement in Chrome's Bookmarks bar.

Again, starting with a normal line of JS code:

window.scrollTo(0,document.body.scrollHeight);

The string is escaped and prefixed with "javascript:" producing the following line, which is then pasted into the URL of a new Chrome shortcut.

javascript:window.scrollTo%280%2Cdocument.body.scrollHeight%29%3b

Incidentally, I've found that the Escaping special characters page provides a quick easy way of encoding JavaScript snippets.

What is my IP

Taking "bookmarklets" a step further, I decided to create a JS shortcut that would open a popup window and display my IP address. I found and used this free service  -- with its easy to use JS code -- to provide IP data.  Finally, I used encoded a JS bookmark snippet to open a popup window, then use the document.write method to push an entire HTML document to the newly opened popup. The final encoded string became this:

javascript:var%20winIP%3D%20window.open%28%22%22%2C%20%22MsgWindow%22%2C%20%22width%3D200%2C%20height%3D100%22%29%3Bvar%20sOut%20%3D%20unescape%28%22%253Chtml%253E%253Chead%253E%253Cscript%2520type%253D%2527text/javascript%2527%2520src%253D%2527http%253A//l2.io/ip.js%2527%253E%253C/script%253E%253C/head%253E%253Ctitle%253EYour%2520IP%253C/title%253E%253Cbody%253E%253Cp%253E%253Ca%2520href%253D%2527javascript%253Awindow.close%2528%2529%253B%2527%253EClose%2520window%253C/a%253E%253C/p%253E%253C/body%253E%253C/html%253E%22%29%3BwinIP.document.write%28sOut%29%3BwinIP.focus%28%29%3B   

This is a screenshot of the bookmark applet running on IE:

NOTE: If your bookmark code utilizes a popup like the snippet above, your browser may prevent the code from executing due to security settings or if you use a popup blocker such as Firefox's Adblock extension.

That being said, without changing browser settings, I found the snippet above not only ran in the desktop version of Internet Explorer but also on the iPad version of Safari:

Final thoughts

For ideas, you can use the examples above or use source from pages such as The Javascript Source or Sitepoint's Javascript page. Have fun bookmarking!

This story, "How to create nifty browser features using JavaScript bookmarks" was originally published by ITworld.