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

Question

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

There's a plugin for that in Chrome and you could use Greasemonkey for firefox. I'm not sure about IE — Peter Olson, Dec 14 '11 at 17:03
There's the browser's built-in JavaScript console (usually Ctrl+Shift+J), or [FireBug](http://getfirebug.com/), or you can just type `javascript:alert('hi');` into the address bar. To load jQuery, you can use the [jQuerify Bookmarklet](http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet/). What exactly are you trying to do (or prevent)? — Rocket Hazmat, Dec 14 '11 at 17:06

Naftuli Kay · Answer 1 · 2011-12-14T17:12:41.427

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.

Also, you can use my new userscript, [jQuerify](http://github.com/rfkrocktk/jQuerify). — Naftuli Kay, Dec 18 '11 at 17:30
Your 5 lines of code here works great for me. When I paste your jQuerify code into my Chrome console and execute it, that does not work. These comments don't support line-breaks, but here is what appears in my console beginning with the "document.getElementsByTagName" at the bottom of your jQuerify: document.getElementsByTagName("body")[0].appendChild(script); } true $ === jQuery ReferenceError: jQuery is not defined — Blaine, Dec 29 '13 at 16:19

score 13 · Answer 2 · edited Sep 16 '16 at 02:33

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.

score 4 · Accepted Answer · answered Dec 14 '11 at 17:04

4

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"

answered Dec 14 '11 at 17:04

Stefan

5,468
4
21
29

I know that there are similar answers but I can't tell who answered first (so pardon me), I just made a choice ... this is the approach that helped. – pulkitsinghal Dec 14 '11 at 23:05

score 2 · Answer 4 · answered May 08 '13 at 16:38

2

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

answered May 08 '13 at 16:38

Intervoice

145
1
5

This! Not sure why this is not rated higher just tried it out and its absolutely fantastic for testing a line or 2 on a page. Thank you! – Sam Mar 29 '16 at 11:18
Thank you for the words of appreciation! I am so glad you like it. – Intervoice Mar 31 '16 at 15:14
No problems I wish I had come across something like this sooner, the number of times I have sat scratching my head because a selector was wrong and I am sticking all these console.log lines in to try and find out what exactly is broken, and when working on live websites and not locally this saves a ton of time not having to re-upload files and doing a cache refresh. – Sam Apr 04 '16 at 08:04

Aaron · Answer 5 · 2015-12-26T23:08:49.613

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();});
        }
    }
})();

score 0 · Answer 6 · answered Dec 14 '11 at 17:06

0

For development in firefox you can use Firebug with FireQuery.

answered Dec 14 '11 at 17:06

amit_g

28,825
7
54
111

score 0 · Answer 7 · answered Dec 14 '11 at 17:08

0

Check this out:

jQuery Bookmarklet Generator http://benalman.com/projects/run-jquery-code-bookmarklet/

answered Dec 14 '11 at 17:08

Ayman Safadi

11,348
1
25
41

score -1 · Answer 8 · edited May 23 '17 at 10:31

-1

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

edited May 23 '17 at 10:31

Community

1
1

answered Dec 14 '11 at 17:04

Alex

8,774
1
34
42

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

8 Answers8

Linked