MY WORKSHOPMaster Next.js
Everything you need to master universal React with Next.js in a single intense master class. Includes full pass to ffconf, the web developer conf.
I've created a Firefox plugin and Greasemonkey version of the app:
- If jQuery is not on the page - nothing happens.
- If jQuery is up to date - nothing happens.
- If jQuery is out of date - a message appears.
- If Firebug is installed, the message is sent to the console, otherwise it is sent to an alert box.
How it works
I've been making use of the version number in jQuery - which is nicely tucked away:
>>> $.fn.jquery "1.2.3"
Using this, I figured I could automate a way of comparing the local jQuery version against the latest production version.
The logic is simple:
- Create an iframe sandbox and inject a script tag pointing to the latest jQuery.
- Compare current
$.fn.jqueryto the iframe version and notify if different.
- Kill the iframe to restore the DOM back to original.
Although this shouldn't strictly be doable in Greasemonkey, I kind of found a way around the sandboxing rules it enforces on you.
I managed to get around the sandboxing rules by doing the following:
- Create the iframe.
- Drop it in to the DOM.
document.writeon the iframe, populate it with code to do the donkey work.
If you look at the source code you'll see the function to be run sits in a variable, which I convert to text and wrap in
'(' + code.toString() +')()' - to make it auto-execute once the iframe has been dropped in.
Since the iframe is in the original page's DOM, it means I have full access to the
window.parent - which holds all the public variables on the
window object - which is how all the magic works.