Is there some programmatic way (or maybe a browser plugin) that allows users to arbitrarily run any jQuery they want on a webpage that is currently loaded in their browser?
I wrote a bookmarklet that checks the document for jQuery, adds it to the <head>
if it doesn't already exist, and displays a notification (using jQuery) if jQuery was either loaded via the script or already present in the document. Just add this code to your bookmarks to get the functionality:
javascript: (function()
{
var body = document.getElementsByTagName("body")[0];
var head = document.getElementsByTagName("head")[0];
var el = document.createElement('div');
el.id = 'jqbkstatusnote';
el.style.position = 'fixed';
el.style.top = '10px';
el.style.left = '10px';
el.style.textAlign = 'center';
el.style.color = '#fff';
el.style.padding = '3px';
el.style.fontWeight = 'bold';
el.style.display = 'none';
el.style.zIndex = '999999999';
el.style.boxShadow = '0px 0px 0px 1px #fff, 3px 3px 1px rgba(0,0,0,0.5)';
if (typeof jQuery != 'function')
{
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "http://code.jquery.com/jquery-latest.min.js";
head.appendChild(script);
waitForJQ();
}
else
{
el.style.border = '1px solid #522';
el.style.backgroundColor = '#744';
el.innerHTML = 'jQuery already exists in this document!';
body.appendChild(el);
jQuery('#jqbkstatusnote').fadeIn().delay(1000).fadeOut(function(){jQuery(this).remove();});
}
function waitForJQ()
{
if (typeof jQuery != 'function')
{
window.setTimeout(waitForJQ, 100);
}
else
{
el.style.border = '1px solid #235';
el.style.backgroundColor = '#457';
el.innerHTML = 'jQuery added to document!';
body.appendChild(el);
jQuery('#jqbkstatusnote').fadeIn().delay(1000).fadeOut(function(){jQuery(this).remove();});
}
}
})();
You can use Chrome's console to do it. If you're using Chrome, right click the page, then click "Inspect Element." Go over to the "Console" tab and try running $ === jQuery
. If you don't get an error and the result is true
, you've got jQuery.
If not, run the following to add jQuery to a page:
var body = document.getElementsByTagName("body")[0];
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
body.appendChild(script);
After running these commands, jQuery should be loaded into any web page and ready for use in the console :)
The above code should work for any browser with a JavaScript console.
Alternatively, there are userscripts (like Greasemonkey and FireQuery) which, if jQuery isn't included on the page, automatically run the above code to inject jQuery to make it easy for you to script and hack on other people's pages.
eval
executes any string you pass it, but if its usage is 'proper' is contested.
eval('$(function() { alert("hello"); }');
will show an alert on document ready (provided that jQuery is sourced before the eval
is called).
For convenience to inject (and indicate it's presense) jQuery in Chrome even into the HTTPS page with no-conflict mode to Prototype (indicates if Prototype is present on the page too) You probably would prefer jQuerify extension (jQuerify for Chrome) quality of which was proved by thousands of users during several years of experience. In one phrase: "Save your time".
Check this out:
jQuery Bookmarklet Generator http://benalman.com/projects/run-jquery-code-bookmarklet/
For development in firefox you can use Firebug with FireQuery.