How to Easily Inject jQuery into any Web Page
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:
and the script tag’s src attribute is set with the following URL:
Then, they grab a reference to the document’s head DOM element:
and then insert the new script tag into the head of the document.
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:
Originally published at Rey Bango.