Inject jQuery into any page / A better jQuery bookmarklet
Posted on July 8th, 2008 in JavaScript, jQuery |
The problem
I had to find out the language codes of all supported languages in TinyMCE (this page), but unfortunately, they were only listed in the actual download link for each file. A quick sprinkle of jQuery code in my Firebug console would have returned me a list easily but this page didn’t have it - which lead me to consider making a bookmarklet to add jQuery on any page.
The solution:
My wonderful coworker Bryan told me immediately about a simple bookmarklet that does the above called jQuerify. Looking through it, I saw a few potential issues with this script and also decided I wanted something a little more personal, so I came up with my own version:
Notable differences:
- Moved the jQuery shortcut
$to$j. I always do this on any site I work on because I find$is used by so many other libraries and scripts that I want to minimize conflicts. Using$jalso for sure tells me I’m using jQuery. - If
$isn’t being used it becomes a shortcut todocument.getElementById. I think it’s what people naturally expect$to do, and in my daily coding I like using$('id');better than$j('#id')[0];when all I want to do is return an element. - Added an initial check for jQuery to prevent running the script unnecessary.
The full source looks like this:
(function(){ if(!window.jQuery){ var s=document.createElement('script'); s.src='http://jquery.com/src/jquery-latest.js'; document.getElementsByTagName('head')[0].appendChild(s); var z=setInterval(function(){ if(window.jQuery){ $j = jQuery.noConflict(); alert('jQuery loaded!'); window.clearInterval(z); } },100); } if(!window.$){ window.$=function(x){return document.getElementById(x);}; } })();
$jQuerify <-- Try me out, drag me to your tool bar.
Happy endings
Now I can just hop back over to the TinyMCE Language Pack Download page, run my bookmarklet, type the following in Firebug:
$j('#examplecontent form:first table tbody tr').each(function(c,i){ var country = $j(this).find('td:eq(2) label').html(); var code= $j(this).find('td:eq(1) a').attr('href').match(/(?:code=)(..)/)[1]; console.log(c,country,'=',code); });
And the list is returned:
0 Arabic = ar 1 Bokmål, Norwegian; Norwegian Bokmål = nb 2 Bosnian = bs 3 Bulgarian = bg 4 Catalan; Valencian = ca 5 Chamorro = ch 6 Chinese = zh 7 Croatian = hr 8 Czech = cs 9 Danish = da 10 Dutch; Flemish = nl 11 English = en 12 Estonian = et 13 Finnish = fi 14 French = fr 15 German = de 16 Greek, Modern (1453-) = el 17 Hebrew = he 18 Hungarian = hu 19 Interlingua (International Auxiliary Language Association) = ia 20 Italian = it 21 Japanese = ja 22 Korean = ko 23 Latvian = lv 24 Lithuanian = lt 25 Macedonian = mk 26 Malay = ms 27 Northern Sami = se 28 Norwegian Nynorsk; Nynorsk, Norwegian = nn 29 Persian = fa 30 Polish = pl 31 Portuguese = pt 32 Romanian = ro 33 Russian = ru 34 Sardinian = sc 35 Serbian = sr 36 Sichuan Yi = ii 37 Sinhala; Sinhalese = si 38 Slovak = sk 39 Slovenian = sl 40 Spanish; Castilian = es 41 Swedish = sv 42 Tatar = tt 43 Turkish = tr 44 Twi = tw 45 Ukrainian = uk 46 Vietnamese = vi