Include jQuery in the JavaScript Console

Include jQuery in the JavaScript Console

Is there an easy way to include jQuery in the Chrome JavaScript console for sites that do not use it? For example, on a website I would like to get the number of rows in a table. I know this is really easy with jQuery.
$(‘element’).length;

The site does not use jQuery. Can I add it in from the command line?

Solutions/Answers:

Solution 1:

Run this in your browser’s JavaScript console, then jQuery should be available…

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();

NOTE: if the site has scripts that conflict with jQuery (other libs, etc.) you could still run into problems.

Update:

Making the best better, creating a Bookmark makes it really convenient, let’s do it, and a little feedback is great too:

  1. Right click the Bookmarks Bar, and click Add Page
  2. Name it as you like, e.g. Inject jQuery, and use the following line for URL:

javascript:(function(e,s){e.src=s;e.onload=function(){jQuery.noConflict();console.log(‘jQuery injected’)};document.head.appendChild(e);})(document.createElement(‘script’),’//code.jquery.com/jquery-latest.min.js’)

Below is the formatted code:

javascript: (function(e, s) {
    e.src = s;
    e.onload = function() {
        jQuery.noConflict();
        console.log('jQuery injected');
    };
    document.head.appendChild(e);
})(document.createElement('script'), '//code.jquery.com/jquery-latest.min.js')

Here the official jQuery CDN URL is used, feel free to use your own CDN/version.

Solution 2:

Run this in your console

var script = document.createElement('script');script.src = "https://code.jquery.com/jquery-3.4.1.min.js";document.getElementsByTagName('head')[0].appendChild(script);

It creates a new script tag, fills it with jQuery and appends to the head.

Solution 3:

Copy everything from:
https://code.jquery.com/jquery-3.4.1.min.js

And paste it into console. Works perfectly.

Solution 4:

Use the jQueryify booklet:

http://marklets.com/jQuerify.aspx

Instead of copy pasting the code in the other answers, this’ll make it a clickable bookmark.

Solution 5:

Adding to @jondavidjohn’s answer, we can also set it as a bookmark with URL as the javascript code.

Name: Include Jquery

Url:

javascript:var jq = document.createElement('script');jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(jq); setTimeout(function() {jQuery.noConflict(); console.log('jQuery loaded'); }, 1000);void(0);

and then add it to the toolbar of Chrome or Firefox so that instead of pasting the script again and again, we can just click on the bookmarklet.

Screenshot of bookmark

Solution 6:

I’m a rebel.

Solution: don’t use jQuery. jQuery is a library to abstract the DOM inconcistencies across the browsers. Since you’re in your own console, you don’t need this kind of abstraction.

For your example:

$$('element').length

($$ is an alias to document.querySelectorAll in the console.)

For any other example: I’m sure I can find anything. Especially if you’re using a modern browser (Chrome, FF, Safari, Opera).

Besides, knowing how the DOM works wouldn’t hurt anyone, it would only increase your level of jQuery (yes, learning more about javascript makes you better at jQuery).