Ever wondered which JavaScript library (if any) is hidden beneath the bells & whistles of each site you gazed at? Since I am a curious person, I find myself wondering every time, so after a bit of research, I wrapped up a little bookmarklet that instantly told me the answer every time.
The logic behind it is that every JavaScript library creates at least one global variable with an easily recognizable name. For most JavaScript libraries, this is simply their name (Prototype, jQuery, DOMAssistant, MooTools, dojo). For some others, its something close enough to their name (YAHOO for YUI, Scriptaculous for script.aculo.us, Ext for ExtJS). So if you check the precence of this global variable, you are effectively checking for the precence of the related framework. Most of them also contain a property with their version (which is usually named ‘version’ or ‘Version’ or ‘VERSION’ (in YUI)) – in fact the only library that did not contain such a property was DOMAssistant. So, after a sneak peek at their code, I could easily set up some conditionals that check whether a certain library exists in the page and if so, alert its name and version. If multiple libraries exist at the same page, multiple popups will appear.
So, here is the bookmarklet: JS library detector
Just drag it to your bookmarks toolbar and it’s ready.
And here is the human-readable code:
if('Prototype' in window) { var ret = 'Prototype ' + Prototype.Version; if('Scriptaculous' in window) ret += ' with script.aculo.us ' + Scriptaculous.Version; alert(ret); } if('jQuery' in window) alert('jQuery ' + jQuery.fn.jquery); if('MooTools' in window) alert('MooTools ' + MooTools.version); if('YAHOO' in window) alert('YUI ' + YAHOO.VERSION); if('dojo' in window) alert('Dojo ' + dojo.version); if('Ext' in window) alert('ExtJS ' + Ext.version); if('DOMAssistant' in window) alert('DOMAssistant');
Am I nuts? Certainly. Has it been useful to me? Absolutely.