Better, Stronger, Safer jQuerify Bookmarklet

read 55 comments

A long time ago I built myself a little bookmarklet to load jQuery on pages that don't already have it. The idea was to allow me to play around with any page on the web, using jQuery in the Firebug (and now Safari or IE8) console. I blogged about it, got lots of great feedback, and then blogged about an improved version. Now that a lot more great feedback has come through the comments of the updated bookmarklet post, I've decided to update it one more time.

The Bookmarklet

Update: May 7, 2012

Apparently, Safari 5.1 is stricter than other browsers in its enforcement of URL encoding for bookmarklets. The literal "%" needs to be converted to "%25" — something my bookmarklet generator was not doing when it encountered'50%'. I've updated the bookmarklet now, so it should work in Safari 5.1 as well as other browsers. ( cf. )

To use the bookmarklet, drag the following link to your bookmark/favorites list:

Continue Reading Below

» jQuerify «

Then, when you're on a page in which you want to play around with jQuery in the console, just click the bookmarklet.

Problems with the Other One

The biggest problem with the former version was that it didn't work when other libraries that use the $ function, such as Prototype and Mootools, were already loaded on the page. A number of people in the comments suggested that I simply add a jQuery.noConflict(); line to the script. But I wasn't crazy about the idea of having to use jQuery() instead of $() even if no other libraries had been loaded.

Another problem, one that I noticed while testing my new version, was that sometimes the jQuery file that I was inserting from the Google CDN wouldn't fully load by the time I attempted to use it later in the bookmarklet. At least, I think that's what was going on. In any case, it was throwing a "jQuery is not defined" error.

A Few Improvements in This One

To handle the problems, I'm having the script do a few things differently:

  • Set up a counter to check 10 times if jQuery is loaded before giving up.
  • Use a setTimeout to put a one-quarter-second (250ms) delay interval in between attempts.
  • Check if the $() function is already being used by another library. If it is:
    • use jQuery's $.noConflict function to release the $() to the other library.
    • set $jq as an alias to jQuery for convenience.
    • mention in the flash notice that jQuery is in noConflict mode and that $jq() should be used instead of $().
  • If after multiple attempts jQuery still won't load for some reason, set the flash notice's message accordingly and then remove it through plain old JavaScript rather than jQuery.


Based on a few comments, I've updated the script one more time to "basically watch the onload and readyState, and fire the callback, thus removing the necessity to poll," as Paul Irish describes below.

The script also removes references to script after success now, as suggested below, to avoid a memory leak.

I updated the bookmarklet link above. Here is the updated script:

  1. (function() {
  2.   var el=document.createElement('div'),
  3.       b=document.getElementsByTagName('body')[0],
  4.       otherlib=false,
  5.       msg='';
  12.'5px 10px';
  13. = 1001;
  18.   if(typeof jQuery!='undefined') {
  19.     msg='This page already using jQuery v'+jQuery.fn.jquery;
  20.     return showMsg();
  21.   } else if (typeof $=='function') {
  22.     otherlib=true;
  23.   }
  25.   // more or less stolen form jquery core and adapted by paul irish
  26.   function getScript(url,success){
  27.     var script=document.createElement('script');
  28.     script.src=url;
  29.     var head=document.getElementsByTagName('head')[0],
  30.         done=false;
  31.     // Attach handlers for all browsers
  32.     script.onload=script.onreadystatechange = function(){
  33.       if ( !done && (!this.readyState
  34.            || this.readyState == 'loaded'
  35.            || this.readyState == 'complete') ) {
  36.         done=true;
  37.         success();
  38.         script.onload = script.onreadystatechange = null;
  39.         head.removeChild(script);
  40.       }
  41.     };
  42.     head.appendChild(script);
  43.   }
  44.   getScript('',function() {
  45.     if (typeof jQuery=='undefined') {
  46.       msg='Sorry, but jQuery wasn\'t able to load';
  47.     } else {
  48.       msg='This page is now jQuerified with v' + jQuery.fn.jquery;
  49.       if (otherlib) {msg+=' and noConflict(). Use $jq(), not $().';}
  50.     }
  51.     return showMsg();
  52.   });
  53.   function showMsg() {
  54.     el.innerHTML=msg;
  55.     b.appendChild(el);
  56.     window.setTimeout(function() {
  57.       if (typeof jQuery=='undefined') {
  58.         b.removeChild(el);
  59.       } else {
  60.         jQuery(el).fadeOut('slow',function() {
  61.           jQuery(this).remove();
  62.         });
  63.         if (otherlib) {
  64.           $jq=jQuery.noConflict();
  65.         }
  66.       }
  67.     } ,2500);
  68.   }
  69. })();

Let me know if this one causes any problems.

comment feed


  1. Rather than using setTimeout to repeatedly check and see if the script is loaded, you can use the onload event handler for the script itself. When the script loads, the onload event fires for the script element, and you can then notify the user that jQuery has loaded.

  2. Looking good Karl! One suggestion: a small helper function I use quite a lot (when jQuery isn't available) for adding styles to elements:

    function applyStyles( elem, styles ){
        for (var prop in styles) {
  [prop] = styles[prop];
    // Usage:
    applyStyles( el, {
        position: 'fixed',
        height: '32px',
        width: '220px',
        marginLeft: '-110px',
        top: '0',
        left: '50%',
        padding: '5px 10px 5px 10px',
        fontSize: '12px',
        color: '#222',
        backgroundColor: '#f99'
  3. WC

    You're awesome. But then, you already knew that. ;)


  4. Nice stuff! Did you ever checkout the jQuery console?

    I've been using this for a while now.

  5. @Jason, using the onload handler with SCRIPT elements doesn't work in Internet Explorer or Safari. Here's a cross-browser "lazy-loading" solution:

  6. With getting external script from inside a bookmarklet, an emerging standard is to basically watch the onload and readyState, and fire the callback, thus removing the necessity to poll.
    Here's some getScript code to consider.

    And it's worth noting you're not doing the full noConflict(true), but I certainly don't mind having both $jq and jQuery available.

    The version number additions are most good; thanks for that. Cheers

  7. I think you can replace the synchronization code by putting most of the script into a seperate file, and loading both jQuery and your script using regular script tags. That way you can rely on the browser to execute both scripts in sequence.

  8. You could also check the version of jQuery that is loaded. Here's how I add jQuery before then loading my own bookmarklet script:

  9. Thanks, everyone, for the excellent suggestions so far!

    @sergiomas - looks nice! It doesn't have any of the version messaging, but it's definitely elegant.

    @James - that's a great little function. I'm not sure it's worth putting into a bookmarklet if it's only going to be used once, but I really like that sort of thing in general, so thanks!

    @Cody - I haven't checked out the jQuery console bookmarklet. But I will now. :)

    @Jason, James, Paul Irish, and Jörn Zaefferer - great ideas for avoiding the polling thing. I'll definitely look into all of them.

    @Paul Irish - yeah, I figured it wasn't worth doing the extreme noConflict since I'm not loading it if another version already exists. The $jq() is just a convenience, and -- you're right -- either that or jQuery will do.

    @Howie, I am checking the version of jQuery.

  10. Just some nitpicks

    This is a more reliable way to detect jQuery
    if(window.jQuery && jQuery.fn && jQuery.fn.jquery)

    And to detect other libraries

    even $ is assigned to a non-function, we should not overwrite to prevent conflict.

  11. Norman Flecha "STRAIGHTALK"

    Very nice articles on JQuiery loved every bit of it.. thanks for all the help!

    Norman Flecha

  12. I just posted my own jQuerify bookmarklet version based on your improved version.
    It was just a javascript bookmarklet exercise, but I think it's clean.
    Thanks for the great idea and for the code!

  13. Serkan

    Google cannot show this page on top of its results for "jquerify" keyword. You should add a note to the previous posts to point here.

  14. I'm working on a bookmarklet that popups up a window and grabs some information from the page to submit a form back to my website. I've done this already for the most part with regular old javascript... could I use this code in theory to add jQuery to a page if it doesn't exist and use jQuery for improved UI of the bookmarklet interface? It looks like it, but i wanted to open that question up to the experts. :)

  15. Great bookmarklet! Thanks for explaining in detail, very useful.

  16. It's not working for me. When I drag & drop the bookmarklet into my bookmarks, it doesn't get the full function. If you click on the bookmarklet and copy link location, you can see the failure. It doesn't get the full function, instead it cuts somewhere near head=document.getElementsByTagName("head")[0]

    Also the bookmarklet version and the unbookmarkleted version don't seem to be the same. I think there is a problem with the bookmarklet version, because the unbookmarkleted version works perfectly in Firebug command line.

    The working bookmarklet for me is;


  17. Nico

    Perfect, thx !

  18. Your tutorials and ideas are simply great. Something like you cannot find anywhere else.

  19. Great bookmarklet!

  20. Thanks Karl, I was thinking of making a scriptlet like this for quite a while so that i can play with DOM elements live on site who don't have jQuery. Looks like you've done it right.

  21. Ken Lin

    This is a very useful bookmarklet. Thank you, Karl.

    One minor aesthetics issue I found is that with IE7 and IE8 in quirks mode, the message "This page is now jQuerified" is displayed below the bottom left of the page. This is due to IE not supporting position=fixed in that mode.

    To workaround this, I added the following lines after the block of assignments:

        var m = document.compatMode;
        if (m) {
            if (m == 'BackCompat') {
       = 'absolute';
       = b.scrollTop;

    Not sure if this is the best way to detect quirks mode, but other people might be able to come up with something better.

  22. Kenneth Lee

    What do you use to convert your JS code from "unbookmarkleted" to "bookmarkleted" form? Thanks.

    • Hi Kenneth,
      I use the JavaScript Tools TextMate bundle, which can be found on GitHub. You can also try the web-based bookmarklet crunchinator.

      • Kenneth Lee

        Thanks for that, I'm using the TextMate bundle now as well.

        Just FYI... The code in the the Plain Text version of your lastest code doesn't match the filtered version there is a || missing around line 31 and also the use of double quotes around the head tag causes issues as well which isn't in you previous version.

        Fixing those it seems to work like a dream, thanks, Ken.

        • Thanks for mentioning those problems, Kenneth. Finicky syntax-highlighting plugin. I've updated the code sample, so hopefully the plain text version will match the filtered version now.

  23. SirG

    Thanks for the bookmarklet - it's getting quite lengthy, but more full featured. Thanks again for sharing.

    Just an fyi the code on line 53 is not escaped properly. Simple oversight, but easily found with a good code coloring scheme.

    53. ... jQuery hasn't loaded

    Should be...

    53. ... jQuery hasn\'t loaded

    • Good catch! It's fixed now. Actually, though, that error was in the older version of the script. Take a look at the update, which is even more robust, a little farther down in the entry.

  24. American Yak

    You may wish to update your getScript function to include IE memory leak prevention:

    	// Handle memory leak in IE
    	script.onload = script.onreadystatechange = null;

    Post this right after the callback success() line and you're good.

  25. Kevin

    I really really love this idea, but I would find it more convenient if it'd "pop up" (div with text area and such) a little text area to let me enter my jQuery and a button to execute it against the page. I have a webpart that does this for SharePoint pages and it's super convenient. Sure, I can open a console, but if I just want to play with something quick, I'd like the pop up.
    A great example is SelectorGadget.

  26. E. Adatepe

    you don't need four values to specify - two values are sufficient. the first is for the top and bottom and the second for the left and right.

    padding: '5px 10px'
    is the shorter version of
    padding: '5px 10px 5px 10px'

  27. I've created a miniframework to build bookmarklets easily and quickly, loading css and javascript files (even jquery). You can check it here:

  28. just did a little thing that helps you save paper when printing a page with no printable version.
    it was possible to done thanks to your work :)
    tell me what you think

  29. Just FYI, the way your code is currently setup, you can't use your convenience alias $jq (if another lib is detected) within your custom code, unless your custom code is run after the showMsg() function has been called, because you've defined $jq() within that showMsg() function.

    For example, say I create myFunction() to contain all my $jq() reliant code, then I call it from within the else section of your jQuery check, like so:

    getScript('',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();

    If myFunction then starts making $jq calls, they all fail, stating "$jq is not defined". However, they work fine if I just change those $jq() calls to jQuery() calls. Haven't tested this with $() calls, though. So in the above example, myFunction() ends up being called before the $jq() convenience alias is defined by your script.

    Again, I noticed that the $jq() alias is actually being defined from within your showMsg() function. However, since it's completely unrelated to the functionality required for showing a message, perhaps you can simply move it to the if (otherlib) conditional that already exists within that else half of the conditional that checks if jQuery is undefined. After all, it's clearly unrelated to showing a message, so there's no need to have another if (otherlib) conditional.

    Also, perhaps you could overhaul your code just a bit further to better demonstrate just how to best insert one's own jQuery-reliant code, whether it be via the myFunction() concept I'm using, or via some other more optimal approach as you see fit. I just think that would make it easier for those who see this, but don't necessarily pick up on the fact that they can place their jQuery-reliant code in that else half of the jQuery-undefined conditional.

    Granted, you could also just replace the showMsg() function with your own entirely, but then you'd lose the $jq() alias if you didn't move it yourself, since that's where you've currently defined it. So moving the $jq() alias definition to the jQuery check conditional is plenty appropriate.

    Just my 2¢ :)

  30. Great bookmarklet! I always use this with Firebug to debug my webpages.

  31. In Google Chrome, it gives error

    Uncaught SyntaxError: Unexpected number

    in the js console.

  32. Michelle Lupei

    FYI, in the latest Chrome release, trying to drag the link to the bookmarklet at the top of the page into the bookmark bar will cause the browser to crash.

    Reason: there's an escaped space at the beginning of the script javascript:%20(function()...

    Workaround: instead of dragging the bookmarklet, bookmark this page, then edit the bookmark and replace the page url with the bookmarklet script (but remove the errant %20 before saving).

    • Thanks for the report, Michelle! I just updated the href for the bookmarklet, so it should work now.

      • Ramez

        It's not working on Safari 5.1.5
        Even when replacing % with %25
        I get in the console : SyntaxError: Expected an identifier but found 'jQuery' instead

        • I just updated the bookmarklet, and it's working for me in Safari 5.1.5 now. Can you grab the latest, above, and let me know how that goes?

  33. Ali Robertson

    Can we have it link to the developer version, not the minified version? I want to see the full names of the parameters for functions ,comments, etc

  34. If you load this on an HTTPS page you get the warning (at least in Chrome) "Page has insecure content - do you want to load?" which is because the jquery link you are using is with HTTP. You can't just fix that by switching it to HTTPS for SSL because jQuery does not sign their SSL cert with a certified certificate. However you can use this link instead:

    That link will load the latest version of the v1 family of jQuery, so right now v 1.7.

    Also note you can use this link to load the latest version of the 1.7 family:

    Or this link to load the latest version of the 1.7.1:

    Also works for older versions. And if your script was really tricky you could check the protocol that the current page is using and switch between using HTTPS and HTTP instead of just defaulting to HTTPS, but even HTTPS would be better than just HTTP as it would work without error for both types of pages.

    Thanks for a great post, I've been using this one (and before that the original one) for quite a long time.

    • Good catch on the https issue. To avoid the problem, you can use the Google CDN URL without the protocol:


  35. skyrail

    great job.

    Unfortunately, it does not work while browsing facebook with google chrome. Same issue with google result pages (not cached pages)

    It works fine in IE (9+) in compatibility mode.
    A few french web site ( have random troubles (not displaying jquery version before 2 or 3 click attempts). Have to wait the whole page loaded before clicking on the bookmarklet.

    • For the google search results pages, you might have better luck if you change the URL for jQuery. I have it set to but if the search results are on the https protocol, you should probably use the Google CDN. Change the URL to //

      For Facebook, it looks like they only allow scripts to load from a small set of trusted domains.

      When I tried to load the script, I got this error output in the console:

      Refused to load the script '' because it violates the following Content Security Policy directive: "script-src https://* http://* https://* http://* * * * ** **

      Sorry, but there is nothing I can do about that.

  36. Joe

    Got the book mark but in console, I don't see the dollar prompt. How can I get it?

45 Pings

  1. [...] matching your CSS selectors or XPath expressions. Nice! As an alternative one could of course hook jQuery via a bookmarklet and then type some selector s(h)izzle into the regular console. Spread the [...]

  2. [...] read 38 comments by Karl Swedberg For the most recent version of the bookmarklet, see the Better, Stronger, Safer jQuerify Bookmarklet [...]

  3. [...] see my entry about the updated and improved bookmarklet Better, Stronger, Safer jQuerify Bookmarklet. comment [...]

  4. Better, Stronger, Safer jQuerify Bookmarklet » Learning jQuery - Tips, Techniques, Tutorials

    [...] via Better, Stronger, Safer jQuerify Bookmarklet » Learning jQuery - Tips, Techniques, Tutorials. [...]

  5. [...] jQuerify is a simple way to inject the jQuery framework into any website and enable immediate DOM manipulation. To try it out, just drag this link to your bookmark list. Depending on the browser you’re using, you can then enter any javascript commands via the console window in Firebug, IE 8 Developer Tools, or Chrome Developer Tools. [...]

  6. De-Pagify – Endless Scroll jQuery Plugin » UXDriven

    [...] into everyday websites. Keep in mind you may need to either inject jQuery with a bookmarklet (link) and the De-pagify [...]

  7. hotgazpacho » Blog Archive » Weekly Digest for the week ending October 10th

    [...] Shared Better, Stronger, Safer jQuerify Bookmarklet » Learning jQuery – Tips, Techniques, Tutorials [...]

  8. [...] the jQueryify bookmarklet is integrated into FireQuery which makes injecting jQuery into any website [...]

  9. FireQuery: Firebug Enhancements For jQuery |

    [...] a jQueryify bookmarklet is integrated in to FireQuery that creates injecting jQuery in to any website [...]

  10. jQuerify Bookmarklet – 为网页引入Jquery的最快速方法

    [...] 在learningjquery上面讲到了关于jQuerify Bookmarklet ,使用它可以快速的为任何一个网页加入Jquery库,从而可以做任何你想做的事情。 [...]

  11. [...] 原文:Better, Stronger, Safer jQuerify Bookmarklet作者:Karl Swedberg [...]

  12. [...] el jQueryify bookmarklet está integrado a FireQuery permitiendo inyectar código de jQuery en cualquier sitio [...]

  13. [...] see embedded data elements and event handlers that were added via jQuery. Also, the familiar jQuerify Bookmarklet has been built into Firebug allowing you to inject jQuery into pages that didn’t have it [...]

  14. [...] see embedded data elements and event handlers that were added via jQuery. Also, the familiar jQuerify Bookmarklet has been built into Firebug allowing you to inject jQuery into pages that didn’t have it [...]

  15. [...] mich freuen wenn sich das SEOQuake-Team, Karl Swedberg (jQuerify), David Naylor (Playground) und all die anderen JavaScript-Schreiberlinge daran ein Beispiel nehmen [...]

  16. [...] a comment » jQuerify is a bookmarklet that can dynamically add jQuery to any page, in case you wanted to use it through [...]

  17. En çok kullandığım bookmarklet: jQuerify | HÜSEYİN MERT

    [...] kaynak: [...]

  18. [...] Thread collapser. There will be a slight delay when you run this first time. I adapted the jQuerify bookmarklet by Karl Swedberg to inject jQuery into the DOM and then execute our function when jQuery has been [...]

  19. [...] you can use jQuery on every site – to run scripts and more – using the jQuerify bookmarklet: jQuerify on ‘learning jQuery [...]

  20. [...] Better, Stronger, Safer jQuerify Bookmarklet [...]

  21. [...] jQuerify – a little bookmarklet to load jQuery on pages that don’t already have it [...]

  22. [...] 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 [...]

  23. [...] jQuerify är ett snyggt sätt att infoga jQuery i Firebug på en sida som inte har det integrerat. Detta gör att man sedan kan påverka sidans upplägg eller funktion eller helt enkelt testa och utveckla jQuery utan att behöva jobba i ett rent utvecklingsgränssnitt. [...]

  24. bookmarklet to parse html tables | Spencerhold

    [...] Karl Swedberg‘s awesome always-working jquery bookmarklet, I’ve made a bookmarklet that lets you parse them into a more usable [...]

  25. [...] (although not trivial: follow the evolution of the jQuerify bookmarklet here, here and finally, here) but the complexity of “importing” jQuery overtakes the even simpler task of finding an [...]

  26. [...] a very useful bookmarklet I use all the time is jQuerify. It loads jQuery on any page. Then I can just do the cool stuff through console This entry was [...]

  27. [...] Last but not least, here is a little (very) useful bookmarklet that let you have jQuery fun inside firebug. [...]

  28. How do I nest cdn loading of jquery and jquery-ui in a bookmarklet?...

    I found examples of linking and loading jquery in bookmarklets but couldn't find a case where both jquery and jquery-ui were both loaded. * jQuery Bookmarklet Generator * better stronger safer jqueryify bookmarklet Here's the gist I'm working on: ht...

  29. [...] Better, Stronger, Safer jQuerify Bookmarklet [...]

  30. Best bookmarklets for web developers and designers - DesignShock

    [...] 12. jQuerify [...]

  31. [...] Better, Stronger, Safer jQuerify Bookmarklet » Learning jQuery – Tips, Techniques, TutorialsSeems like a really good bookmarklet to load jquery onto a page [...]

  32. What got me interested into bookmarklets ? jQuerify !!!! | JavaScript Bookmarklets

    [...] with other websites using your JavaScript debugger console, but miss jQuery, look no further than This entry was posted in Uncategorized by admin. Bookmark the [...]

  33. [...] loaded on the page. If you are working with sites that aren’t using jQuery, you can use the jQuerify bookmarklet to inject jQuery on the fly for testing. Just now ago # Leave a [...]

  34. [...] This code was adapted from here. [...]

  35. [...] saw this bookmarklet for injecting jQuery in another thread Tagged: firebug, jquery, questions /* * * CONFIGURATION VARIABLES: [...]

  36. [...] included on the page. However, you can easily include jQuery on any page with this bookmarklet: Tagged: console, firebug, javascript, jquery, questions /* * * CONFIGURATION VARIABLES: [...]

Sorry, but comments for this entry are now closed.