Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 973
pulkitsinghal Avatar asked Dec 14 '11 17:12

pulkitsinghal


4 Answers

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.

like image 129
Naftuli Kay Avatar answered Oct 09 '22 12:10

Naftuli Kay


This uses the Google CDN, and it's HTTPs friendly, one-line, and wrapped:

(function(){var jQueryVersion="1";var a=document.createElement("script");a.src="//ajax.googleapis.com/ajax/libs/jquery/"+jQueryVersion+"/jquery.js";a.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(a);})()

You can specify the version of jQuery, e.g. jQueryVersion="2.0.2".

All versions are listed at developers.google.com/speed/libraries/devguide.

like image 31
Luqmaan Avatar answered Oct 09 '22 14:10

Luqmaan


FireQuery is a great Firebug extension that can include jQuery for you and from there you´re able to use jQuery in your console.

"jQuerify: enables you to inject jQuery into any web page"

like image 4
Stefan Avatar answered Oct 09 '22 13:10

Stefan


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".

like image 2
Intervoice Avatar answered Oct 09 '22 14:10

Intervoice