Registration for jQuery Conference 2008 is closed.

Updated jQuery Bookmarklet

About 1 1/2 years ago I put together a little "jQuerify" Bookmarklet (and blogged about it here). It's a nice little tool that allows you to play around with jQuery on a page that doesn't already have jQuery loaded and see the results immediately. Based on feedback from others, I've updated the bookmarklet a bit. Now, it first checks to see if jQuery is already loaded on the page and doesn't bother loading it if it's there. Also, instead of showing an alert message, it temporarily places an absolutely positioned div at the top of the page with a message saying either "This page is now jQuerified" or "This page was already jQuerified." After 2 1/2 seconds, the message fades out and is removed from the DOM. Here is what the script looks like before it is converted to bookmarklet format (replacing spaces with %20, etc.):

PLAIN TEXT
JavaScript:
  1. (function() {
  2. var s=document.createElement('script');
  3. s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js');
  4. if(typeof jQuery!='undefined') {
  5.   var msg='This page already using jQuery v' + jQuery.fn.jquery;
  6. } else {
  7.   document.getElementsByTagName('head')[0].appendChild(s);
  8.   var msg='This page is now jQuerified'
  9. }
  10. var el=document.createElement('div');
  11.   el.style.position='fixed';
  12.   el.style.height='30';
  13.   el.style.width='200';
  14.   el.style.margin='0 auto 0 auto';
  15.   el.id='jq-kswedberg';
  16.   el.style.top='0';
  17.   el.style.left='40%';
  18.   el.style.padding='5px 10px 5px 10px';
  19.   el.style.backgroundColor='#f99';
  20.   el.innerHTML=msg;
  21. var b=document.getElementsByTagName('body')[0];
  22. b.appendChild(el);
  23. window.setTimeout(function() {
  24.   jQuery('#jq-kswedberg').fadeOut('slow',function() {
  25.     jQuery(this).remove()
  26.   });
  27. }, 2500);
  28. })();

It might look like a lot of code for something so simple, but most of it is just setting the styles for the inserted div element. Speaking of which, if you're using this in Internet Explorer 6, you might want to change el.style.position='fixed' to el.style.position='absolute'. Also, notice that the script's src is now pointing to the new Google CDN. Nice!

Here is the bookmarklet, ready to go:

» jQuerify «

Just drag it up to your bookmarks (or favorites) toolbar. Then, when you're on a page that doesn't have jQuery, all you have to do is click on the bookmarklet and you'll be ready to play around with jQuery on that page through the browser's console.

What? Your browser doesn't have a console? If you're using Firefox, you can download the Firebug add-on and use its console (you should really have this add-on anyway; it's amazingly helpful for html/css/js development). For Safari, open the Advanced tab in the Preferences and check the checkbox for "Show Develop menu in menu bar." Then you can open the console by selecting Develop > Show Error Console. Finally, the DebugBar plugin has a console that can be used in Internet Explorer.

Update

Thanks to Jonno's suggestion in comment #4 below, I've slightly modified the bookmarklet again to show which version of jQuery has been included on the page. If you ever want to know the jQuery version without using the bookmarklet, just type this in the console: jQuery.fn.jquery.

Update 2

Mark Fowler suggested that I "properly scope" the bookmarklet so variables wouldn't pollute the global namespace. Makes sense to me, so now the bookmarklet is updated with a self-executing function wrapping it. No need anymore for the void(s) at the end, since the variable is only defined within the bookmarklet's scope now.

24 Responses to “Updated jQuery Bookmarklet”

  1. Robert Says:
    June 8th, 2008 at 3:19 pm

    Mind the trap: Dragging the bookmarklet from this post's feed read in (e.g.) Google Reader won't work as all JS is stripped out there.

  2. Juliano Moreira Says:
    June 9th, 2008 at 12:16 am

    Very nice job, Karl! I'm brand new to your blog and book. I've had your book for a couple of weeks now and I'm loving it. I'm a noob when it comes to javascript so I'm feeling very smart upon reading the first three chapters of your book. Your book is very well laid out! I've got a question for you. I tried using the jquery bookmarks on firefox although I found something very annoying(I'm sure I'm not doing it right). Once I click on jquery on my bookmark, I get a message saying "This page is jquerified!". I try running some code onto the console, click on run and it runs perfect. However, if I want the page to refresh so I can run the code again, I have to reload the page(F5) so I can reuse it again. Is there anyway to refresh the page without having to reload the site? Also, Do you have instructions on how to use google cdn? Thanks alot!

  3. Dominic Mitchell Says:
    June 9th, 2008 at 2:30 am

    Thanks — this is very handy. Just one (minor) stylistic comment. This code:

    
  if(typeof jQuery!='undefined') {
    var msg='This page was already jQuerified'
  } else {
    document.getElementsByTagName('head')[0].appendChild(s);
    var msg='This page is now jQuerified'
  }

    Should probably declare msg outside of the if statement. I hate the scoping of variables in JavaScript, it's really confusing. It looks like block scope, but it isn't, you get function scope instead.

    
  var msg;
  if(typeof jQuery!='undefined') {
    msg='This page was already jQuerified'
  } else {
    document.getElementsByTagName('head')[0].appendChild(s);
    msg='This page is now jQuerified'
  }
  4. Daniel Stockman Says:
    June 9th, 2008 at 3:35 am

    It looks like block scope, but it isn't, you get function scope instead.

    Doing what you suggest does not alter the variable's scope, either. Arguably, it makes the code less readable, not more.

    When two ways of doing something have the same results, my money's on the more readable (for various values of "readable", YMMV, etc, etc).

    Is there anyway to refresh the page without having to reload the site?

    As you are fundamentally altering the script environment of the page, no, there isn't.
    (You could assign window.location = window.location in the console, I suppose, but that would be reloading/refreshing {very confusing terminology, colloquially indistinguishable} the page just like Control/Command + R)

  5. Jonno Says:
    June 9th, 2008 at 6:10 am

    A nice addition would be to put the jquery version number in 'This page is now jQuerified' message. I assume google will update the jquery version.

  6. roScripts - Webmaster resources and websites Says:
    June 9th, 2008 at 6:15 am

    Learning jQuery » Updated jQuery Bookmarklet...

    Learning jQuery » Updated jQuery Bookmarklet...

  7. Marius-Remus Mate Says:
    June 9th, 2008 at 7:21 am

    Here's a nice cross-browser console >> http://www.billyreisinger.com/jash/

  8. Karl Swedberg Says:
    June 9th, 2008 at 8:13 am

    Jonno, including the version number is a great idea. Thanks for the suggestion. I am updating the bookmarklet now.

    Marius-Remus, I like jash quite a bit, too. Thanks for mentioning!

  9. Karl Swedberg Says:
    June 9th, 2008 at 8:25 am

    Juliano, it looks like Daniel Stockman answered one of your questions, but as for the Google CDN question, this article on Ajaxian.com announces the CDN, describes basic usage, and provides a link to the project page. Hope that gets you started, at least.

  10. Mark Fowler Says:
    June 9th, 2008 at 10:37 am

    Dom, Daniel...

    The scope of the variables is indeed messy. spitting el, s and all that all over your namespace. Any reason the bookmarklet couldn't be scoped properly and wrapped in a (function (){...existing code...})() to prevent it from potentially screwing up a whole range of pages?

  11. Juliano Moreira Says:
    June 9th, 2008 at 11:11 am

    @ Daniel - You're right! Very indistinguishable! I knew I was getting a bit confused with the terminology.
    @Karl - Thanks for the link!

  12. Karl Swedberg Says:
    June 9th, 2008 at 11:38 am

    @Mark Fowler, great point. No reason at all not to scope it properly. Will update the entry and the script in a bit. Thanks!

  13. Snowcore Says:
    June 17th, 2008 at 10:37 am

    @Karl:
    I think you are right, thank you too.

  14. Elijah Manor Says:
    June 23rd, 2008 at 3:08 am

    Good job!

  15. Kstreet67 Says:
    June 28th, 2008 at 10:23 pm

    I have a question that may or may not be related. If someone posts a wordpress comment but denies posting it, beside the avatar, is there any code to show us that the person did indeed access his OWN wordpress blog to post on ours? Again, he keeps denying it, saying that someone hacked his email or hacked his wordpress. its important that we prove beyond a doubt that this person wrote these comments. Please email me your response if possible.

  16. Pyrolupus Says:
    July 8th, 2008 at 3:59 pm

    Nice update to the bookmarklet, Karl. I am actually going to incorporate some of this functionality in my jQuery Detector userscript (when clicking the icon). (Hmm...I need to blog about my improvements to that...)

    On the subject of consoles, Opera introduced its own built-in Firebug-type web development tool called Dragonfly with version 9.5. (Current version of Opera is 9.51, as of this writing). It's accessed via Tools => Advanced => Developer Tools. The console is called "Command Line."

    The product page still classifies Dragonfly as "Alpha," but it is functional and feature-rich. There are some warts--such as the page reloading when you open up Dragonfly, losing the original text of this comment in the process--but it is an excellent precursor to the product--and the command line totally works. ;)

  17. Karl Swedberg Says:
    July 9th, 2008 at 7:38 pm

    Thanks a lot, Pyrolupus! That Opera console sounds promising.

    Let us know when you have the updated jQuery Detector userscript ready. I'd love to see it!

  18. Earnest Apathy Says:
    July 30th, 2008 at 10:38 pm

    jQuery Detector Overkill...

    With the ideas, help, and suggestions of some very smart folks, I’ve been able to put together a userscript that displays whether jQuery is used on the current page—along with version—and can also load jQuery into the current page by ...

  19. mckincy Says:
    August 13th, 2008 at 4:22 am

    Great job!Thanks.

  20. Marjorie Says:
    August 14th, 2008 at 11:48 pm

    Let's say jquery is already loaded. (as in a drupal site.) How do I create a bookmarklet using jquery code? For instance, I'd love to create a little bookmarklet that does this:
    $('fieldset').removeClass('collapsed')

  21. Karl Swedberg Says:
    August 14th, 2008 at 11:55 pm

    Marjorie,

    Please see my answer where you cross-posted the question. And please try to avoid cross-posting. It just wastes your time and mine.

  22. Alex Says:
    August 15th, 2008 at 11:23 pm

    Your blog is interesting!

    Keep up the good work!

  23. wsmith Says:
    August 18th, 2008 at 7:45 pm

    Is there any way to use the google api (as i understand it it is already configured for caching and checking to see if it is already loaded). I tried to do this, setting the src of the new script element to "http://www.google.com," then loading jquery with "google.load('jquery','1.2');" it seemed to work, but it blanked out the page display and not being a real javascripter, i don't know what went wrong. I tried to load jqueryUI the same way with the same results. Just wondering if you had any ideas or experience with this.

    meanwhile, thanks! this is very useful.

  24. wsmith Says:
    August 18th, 2008 at 7:47 pm

    The second sentence should read "setting the src of the new script element to "http://www.google.com/jsapi" "

    sorry.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <pre> <em> <i> <li> <ol> <strike> <strong> <ul>

IMPORTANT: If you wish to post code examples, please wrap them in <code> tags. Multi-line code should be wrapped in <pre><code> </code></pre> Also, use &lt; instead of < and &gt; instead of > in the examples themselves. Otherwise, you could lose part of the comment when it's submitted.