How to Easily Inject jQuery into any Web Page

I use jQuery…a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what’s going on under the hood. In many cases, jQuery is being used so it’s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don’t use it which forces me to go back to plain ‘ole JavaScript. There’s nothing wrong with that but I’ve gotten used to the nice, terse syntax jQuery provides and I’d like to be able to use it.

Awhile back, I came across an awesome bookmarklet created by my jQuery teammate, Karl Swedberg, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn’t have jQuery included and you either don’t own the page or don’t feel like adding a script tag to it. The code below shows how the jQuery lib is included.

It’s fairly straightforward in that a script element is created:

[code lang=”js”]var script=document.createElement(‘script’);[/code]

and the script tag’s src attribute is set with the following URL:

‘https://code.jquery.com/jquery-latest.min.js’

Then, they grab a reference to the document’s head DOM element:

[code lang=”js”]var head=document.getElementsByTagName(‘head’)[0]…;[/code]

and then insert the new script tag into the head of the document.

[code lang=”js”]head.appendChild(script);[/code]

That was a very high-level explanation because there’s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery’s .noConflict() method is called should there be another library present that requires the “$” namespace. Very cool. :)

You can find the full source for the bookmarklet below and if you want to install it now, here’s the link for you to use:

» jQuerify «– Drag this link to your browser toolbar

I created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:

Nicely formatted bookmarklet code:

[code lang=”js”]
(function() {
var el=document.createElement(‘div’),
b=document.getElementsByTagName(‘body’)[0];
otherlib=false,
msg=”;
el.style.position=’fixed’;
el.style.height=’32px’;
el.style.width=’220px’;
el.style.marginLeft=’-110px’;
el.style.top=’0′;
el.style.left=’50%’;
el.style.padding=’5px 10px’;
el.style.zIndex = 1001;
el.style.fontSize=’12px’;
el.style.color=’#222′;
el.style.backgroundColor=’#f99′;
if(typeof jQuery!=’undefined’) {
msg=’This page already using jQuery v’+jQuery.fn.jquery;
return showMsg();
} else if (typeof $==’function’) {
otherlib=true;
}
// more or less stolen form jquery core and adapted by paul irish
function getScript(url,success){
var script=document.createElement(‘script’);
script.src=url;
var head=document.getElementsByTagName(‘head’)[0],
done=false;
// Attach handlers for all browsers
script.onload=script.onreadystatechange = function(){
if ( !done && (!this.readyState
|| this.readyState == ‘loaded’
|| this.readyState == ‘complete’) ) {
done=true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}
getScript(‘https://code.jquery.com/jquery-latest.min.js’,function() {
if (typeof jQuery==’undefined’) {
msg=’Sorry, but jQuery wasn\’t able to load’;
} else {
msg=’This page is now jQuerified with v’ + jQuery.fn.jquery;
if (otherlib) {msg+=’ and noConflict(). Use $jq(), not $().’;}
}
return showMsg();
});
function showMsg() {
el.innerHTML=msg;
b.appendChild(el);
window.setTimeout(function() {
if (typeof jQuery==’undefined’) {
b.removeChild(el);
} else {
jQuery(el).fadeOut(‘slow’,function() {
jQuery(this).remove();
});
if (otherlib) {
$jq=jQuery.noConflict();
}
}
} ,2500);
}
})();
[/code]