Having fun with JavaScript bookmarklets to determine loaded libraries

Lately I have been looking at ways to make writing JavaScript a little more fun .
Actually the first step was to write CoffeScript instead and letting it compile the JavaScript for me.

I’m also very interested in the libraries that make a lot of things like cross browser issues easier. So a lot of times when I see a site I like, I’m wondering, what libraries it is using under the hood. I wanted a faster way to determine this than ‘view page source’.
So this became my first little JavaScript task.

I went to jsFiddle to spike how it could be done (unfortunately I couldn’t use jQuery here, since then I would have needed to reference it and it would obviously have obscured the results).

After a few attempts I had my little JavaScript function ready. Since I couldn’t rely on any map function, it is using a lot of for loops and is not too pretty, but some people may find it useful:

 
 
 
 
 
 
 
 
 
 
 
 
 
 1 (function showLoadedLibs() { 
 2  
 3     var names = ['jquery', 'mootools', 'backbone', 'prototype', 'yui', 'simpleyui', 'glow', 'dojo', 'modernizr', 'processing', 'ext-core', 'raphael', 'right'];
 4     var scripts = document.getElementsByTagName("script");
 5     var loadedScriptNames = "";
 6     for (var i = 0; i < scripts.length; i++) { 
 7         var src = scripts[i].src;
 8         for (var n = 0; n < names.length; n++) { 
 9             var lib = new RegExp(names[n] + '[^/]*[.]js').exec(src);
10             if (lib) { 
11                 loadedScriptNames += " " + lib + ",";
12             } 
13         } 
14     } 
15     alert("\nLoaded libraries: " + loadedScriptNames.substr(0, loadedScriptNames.length - 1) + "\n\nLooked for: " + names);
16  
17 }());

In order to use it as a bookmarklet, I went to the Bookmarklet Crunchinator to ' crunch' the above code.
The result looks like this:
javascript:(function(){(function showLoadedLibs(){var names=['jquery','mootools','backbone','prototype','yui','simpleyui','glow','dojo','modernizr','processing','ext-core','raphael','right'];var scripts=document.getElementsByTagName("script");var loadedScriptNames="";for(var i=0;i<scripts.length;i++){src=scripts[i].src;for(var n=0;n<names.length;n++){var lib=new RegExp(names[n]+'[^/]*[.]js').exec(src);if(lib){loadedScriptNames+=" "+lib+",";}}}alert("\nLoaded libraries: "+loadedScriptNames.substr(0,loadedScriptNames.length-1)+"\n\nLooked for: "+names);}());})();
Finally, I added it to my bookmark bar - the above 'crunched' code becomes the Url of the bookmark.
All I have to do now is click this bookmark and am informed about known libraries that are loaded on the page I am currently on.


About these ads