Add jQuery to any web page by using a bookmarklet!

I had an inspiration today: I can create a bookmarklet to append a reference to the jQuery library to any page! And, by using Firebug, I can execute custom jQuery code against a page in the console tab.

Here’s the bookmarklet code: Append jQuery to current page

Simply right-click the hyperlink above and add it as a Favorite (IE) or a Bookmark (Firefox, Mozilla). Make sure you add it to your Favorites–>Links folder in IE, or your Bookmarks Toolbar in Firefox. This way you can click the toolbar to execute the bookmarklet’s code.

Here’s what the code looks like (in long form):

1
2
3
4
5
6
7
8
9

javascript:void(function(){
    // create a new script element in the DOM
    var jQscript=document.createElement('script');
    // use the latest version of the jQuery core library
    jQscript.src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js';
    // append the new script element to the DOM
    document.documentElement.appendChild(jQscript);
}());

The latest version of jQuery (core) can be found at: https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js

Implications

Once you have appended the latest version of the jQuery library, you can use “$” syntax to access elements of the current page’s DOM. You can use all of the other features that jQuery allows! It helps to have a “console” interface for executing custom Javascript, like the console in Firebug.

Note: To use some advanced UI features of jQuery, you’ll also need to “attach” some optional jQuery add-on libraries (like drag-and-drop). You can experiment with the best way to do that.

Possible uses

Using this technique, you can…