How to run jQuery directly on any page in the browser?

pulkitsinghal picture pulkitsinghal · Dec 14, 2011 · Viewed 25.4k times · Source

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?

Edit:

My motivation is to be able to test jQuery syntax and commands ahead of time on a page and then go add them to its source or suggest tweaks to the webadmins whose pages I experimented with.

I have been using jQuery from the main site to run the tests. It is currently on 3.5.1: jQuery download page

Answer

Naftuli Kay picture Naftuli Kay · Dec 14, 2011

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.