jQuerify Bookmarklet
Someone recently asked if it was possible to somehow include jQuery in Firebug for testing jQuery code on web pages that don't already have it included.
It's not only possible to include the jQuery source right from the Firebug console, but you can also add a bookmarklet to your Bookmarks toolbar for one-click jQuery action!
Here is an example of what you could type into the Firebug console, line by line, to make a page ready for jQuery fun:
-
var s=document.createElement('script');
-
s.setAttribute('src','http://jquery.com/src/jquery-latest.js');
-
document.getElementsByTagName('body')[0].appendChild(s);
Or, simply drag the following link to your Bookmarks toolbar:
> jQuerify <
Please note that both the JavaScript example code and the jQuerify bookmarklet point to the jQuery source code on jquery.com. I've heard it's considered poor etiquette to freeload off of someone else's server like that, so if you plan to use the bookmarklet regularly, please point it to a copy of the source code on your own server if you have one.
Also, in the bookmarklet I added an alert message that says "Thank you for using jquery" when you activate it. I wanted that in there for myself because I like knowing for sure that it's working. Feel free to pluck that part out, though, if it annoys you.
Thanks to the folks at Left Logic for their microformats bookmarklet, which inspired me to make this one. In fact, the jQuerify bookmarklet is just a subset of theirs.
December 16th, 2006 at 7:34 pm
Very nice little tool, thank you.
December 17th, 2006 at 1:02 am
This is great. Thank you. Really enjoying your feed.
December 17th, 2006 at 3:54 pm
This is excellent, Karl. Thanks. I seem to always forget about bookmarklets but I think this one will get a lot of use!
December 23rd, 2006 at 12:56 am
Thanks for your bookmarklet. That's great.
To ensure it is working, you may try the new friend Firebug console.log instead of alert box.
January 6th, 2007 at 5:04 pm
Interesting!
I think that I might just make a little Greasemonkey script for something like this!
Give me a little while.
Maybe even a Firefox extension if I have time!
January 6th, 2007 at 5:28 pm
Hey Dan,
Great idea! Let us know when you get something put together.
January 7th, 2007 at 4:54 pm
Hey!
I've got something put together now. It's been up onto Mozilla Addons for review and approval. Hopefully I'll have something approved within the week.
January 7th, 2007 at 5:04 pm
Wow, that was fast! Thanks for the work, Dan. Looking forward to checking it out.
January 20th, 2007 at 12:09 pm
"if you plan to use the bookmarklet regularly, please point it to a copy of the source code on your own server if you have one."
But doesn't browser load scripts from local cache if possible? Using the bookmarklet many times will have the same impact on the jQuery server as using it only once.
January 20th, 2007 at 2:33 pm
I copied your code to make a bookmarklet generator in Yubnub.
bookmarklet2addscript - bookmarklet to add script
It lets you add any javascript file to any webpage.
For example, to generate a bookmarklet that will include the most recent jQuery when clicked, enter the following in Yubnub:
bookmarklet2addscript jQuery -path http://jquery.com/src/jquery-latest.pack.js
January 27th, 2007 at 8:28 am
script tags should be in head tag not body.
January 27th, 2007 at 2:29 pm
J, thanks for that bookmarklet generator. I'm sure it'll come in handy.
MaLi, if you want to load the script into the
head, you can just changegetElementsByTagName('body')[0]togetElementsByTagName('head')[0]. But I bet you already knew that.I prefer to put
scriptelements in thehead, too. I'm a firm believer in the separation of behavior and content. However, with this bookmarklet, we're talking about injecting ascriptelement dynamically for temporary use. I don't really see the harm in that.Also, I haven't been able to find an authoritative source that says it's wrong to to put them in the
body. For example, see the W3C's Scripts in HTML documents:That's from their HTML 4 spec, but the XHTML docs don't suggest otherwise.
I'm curious: Which references claim that
scriptelements should not be placed in thebody? And why?January 30th, 2007 at 8:46 am
"Which references claim that script elements should not be placed in the body? And why?"
Purist ones that want all script to be in external files called in the <head> section. Whilst I am in some agreement with them, it's only if you actually know JavaScript that you can write your code in such a way that it doesn't need inline script.
There is also the fact that organising the code makes it easier to maintain, as well as not pissing off accessibility checkers...
I can be completely anal about it, with zero script in the tag (including onXXX events, they get added dynamically thanks to jQuery!), along with zero inline CSS, leaving me with bald semantic HTML, mainly because I strive for AAA / 508 and usability in every page. Works for me, but, as ever YMMV.
January 30th, 2007 at 9:59 am
MrBester, appreciate the explanation. Makes a lot of sense coming from an accessibility standpoint.
Also, I want to reaffirm my personal "belief in the separation of behavior and content." Especially given all the recent articles about "inaccessible JavaScript frameworks," it's important to stress how ridiculously easy it is to keep scripting behavior tucked away in a separate file, safe from any accidental commingling with HTML.
That said, I'm still curious about why injecting a script into the
<body>via a bookmarklet would be considered harmful. It does nothing to the actual markup; it's temporary, immediately removed upon page refresh; and its sole purpose is for "live" testing of jQuery methods with Firebug.April 12th, 2007 at 9:40 am
@Karl - injecting the JS in to the body isn't harmful.
All W3C's documentation refers to the delivered state of the document - which should be followed as they have outlined.
There's nothing to say how you play with that loaded DOM afterwards. Inject a script in to the head, inject in to the body - it makes no difference. If you didn't have to inject it in to the DOM (i.e. your browser supported loading external libraries) - you would, and there would be no question over whether it should be in the head.
Finally, in the interest of reducing and redundant parts, the bookmarklet should actually just be this (since we can only debug in Firefox via Firebug):
var s=document.createElement('script');s.src = "http://jquery.com/src/jquery-latest.pack.js";
document.body.appendChild(s);
May 6th, 2007 at 8:01 pm
[...] É claro que tive a vantagem de não me ter de preocupar em importar o script de jQuery porque a própria página já o faz. Caso estivesse a alterar o DOM de uma página que não use jQuery, podia fazer o mesmo tipo de alterações usando o jQuerify. [...]
May 15th, 2007 at 4:35 pm
"Inject a script in to the head, inject in to the body - it makes no difference."
Actually it does make a difference, you might not have a body, only a frameset. But you can always inject in the head! The first site i tried the bookmarklet on was a framed one (yes, they still exist!) and it didn't work. Luckily, firebug told what was wrong even before I started guessing.
Having jQuery on a framed site wasn't that fun though. I seem to have forgotten everything concerning JS+frames (thank god), can you even get into the DOM of a frame from the top level?
May 28th, 2007 at 11:47 am
[...] mi sono imbattuto in questo tutorial sull’utilizzo della stessa (con la bookmarklet jQueryfy) insieme a FireBug per modificare al volo i [...]
September 8th, 2007 at 12:31 am
Better to do it like this just to be safe:
javascript:(function(){var%20s='http://jquery.com/src/jquery-latest.js',%20t='text/javascript',q='\u0022',d=document,n=navigator,e;if(/mac/i.test(n.platform)&&/msie/i.test(n.userAgent))(d.createElement('div')).innerHTML='\u003cscript%20type='+q+t+q+'%20src='+q+s+q+'\u003e\u003c/script\u003e';else{(e=d.createElement('script')).src=s;e.type=t;d.getElementsByTagName('head')[0].appendChild(e)}})();void(0);
=)
September 8th, 2007 at 2:51 am
If you're using IE and need a quick JS console try this bookmarklet out:
javascript:var Msg;window.onerror=function(msg,url,lno){Msg='[ Error: '+msg+' ]';runJS(1);return true};function runJS(num){Msg=(num==0)?'Javascript Console':Msg;if(JSval!='undefined'){JSstr=JSval};JSstr=prompt(Msg,JSstr);if(JSstr==''){runJS(0)}else if((JSstr!=null)&&(JSstr!='undefined')){setTimeout('JSval=""+eval(JSstr);runJS(0)',10)}else{JSval='';JSstr=''}}JSval='';JSstr='';runJS(0);
Error handling, resolves values in the prompt (try typing "document.cookie"), and executes JS commands in page scope--very handy.
=)
November 30th, 2007 at 8:02 pm
thanks for share
March 19th, 2008 at 4:10 pm
Has anyone tried to use this with debugbar/jscompagnion for IE? Would be nice...
April 15th, 2008 at 3:27 pm
Love it, Thanks for sharing!
May 8th, 2008 at 9:51 pm
Mais um bookmarklet para a coleção: jQuerify...
Como desenvolvedor Web estou sempre à procura de ferramentas que me auxiliem a criar, modificar ou entender a estrutura das páginas e assim obter como resultado uma interface melhor.
E não custa lembrar que, além de linguagens, frameworks, IDEs e t...
May 12th, 2008 at 1:43 pm
Cool!!!