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?
This question is related to
javascript
jquery
Put your code in yourCode_here
function. And prevent HTML without HEAD tag.
(function(head) {_x000D_
var jq = document.createElement('script');_x000D_
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js";_x000D_
((head && head[0]) || document.firstChild).appendChild(jq);_x000D_
})(document.getElementsByTagName('head'));_x000D_
_x000D_
function jQueryReady() {_x000D_
if (window.jQuery) {_x000D_
jQuery.noConflict();_x000D_
yourCode_here(jQuery);_x000D_
} else {_x000D_
setTimeout(jQueryReady, 100);_x000D_
}_x000D_
}_x000D_
_x000D_
jQueryReady();_x000D_
_x000D_
function yourCode_here($) {_x000D_
console.log("OK");_x000D_
$("body").html("<h1>Hello world !</h1>");_x000D_
}
_x000D_
One of the shortest ways would be just copy pasting the code below to the console.
var jquery = document.createElement('script');
jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.head.appendChild(jquery);
I just made a jQuery 3.2.1 bookmarklet with error-handling (only load if not already loaded, detect version if already loaded, error message if error while loading). Tested in Chrome 27. There is no reason to use the "old" jQuery 1.9.1 on Chrome browser since jQuery 2.0 is API-compatible with 1.9.
Just run the following in Chrome's developer console or drag & drop it in your bookmark bar:
javascript:((function(){if(typeof(jQuery)=="undefined"){window.jQuery="loading";var a=document.createElement("script");a.type="text/javascript";a.src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";a.onload=function(){console.log("jQuery "+jQuery.fn.jquery+" loaded successfully.")};a.onerror=function(){delete jQuery;alert("Error while loading jQuery!")};document.getElementsByTagName("head")[0].appendChild(a)}else{if(typeof(jQuery)=="function"){alert("jQuery ("+jQuery.fn.jquery+") is already loaded!")}else{alert("jQuery is already loading...")}}})())
this answer based on @genesis answer, at first I tried the bookmark version @jondavidjohn, and it is not working, so I change it to this (add it to your bookmark):
javascript:(function(){var s = document.createElement('script');s.src = "//code.jquery.com/jquery-2.2.4.min.js";document.getElementsByTagName('head')[0].appendChild(s);console.log('jquery loaded')}());
words of caution, is not tested in chrome but work in firefox, and not tested in conflict environment.
FWIW, Firebug embeds the include
special command, and jquery is aliased by default:
https://getfirebug.com/wiki/index.php/Include
So in your case, you just have to type :
include("jquery");
Florent
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.
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.
If you want to use jQuery frequently from the console you can easily write a userscript. First, install Tampermonkey if you are on Chrome and Greasemonkey if you are on Firefox. Write a simple userscript with a use function like this:
var scripts = [];
function use(libname) {
var src;
if (scripts.indexOf(libname) == -1) {
switch (libname.toLowerCase()) {
case "jquery":
src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
break;
case "angularjs":
src = "//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js";
break;
}
} else {
console.log("Library already in use.");
return;
}
if (src) {
scripts.append(libname);
var script = document.createElement("script");
script.src = src;
document.body.appendChild(scr);
} else {
console.log("Invalid Library.");
return;
}
}
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).
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.
Modern browsers (tested on Chrome, Firefox, Safari) implement some helper functions using the dollar sign $
that are very similar to jQuery (if the website doesn't define something using window.$
).
Those utilities are quite useful for selecting elements in the DOM and modifying them.
intuitive one-liner
document.write(unescape('%3Cscript src="https://code.jquery.com/jquery-3.1.1.min.js"%3E%3C/script%3E’))
You can change the src
address.
I referred to ReferenceError: Can't find variable: jQuery
If you're looking to do this for a userscript, I wrote this: http://userscripts.org/scripts/show/123588
It'll let you include jQuery, plus UI and any plugins you'd like. I'm using it on a site that has 1.5.1 and no UI; this script gives me 1.7.1 instead, plus UI, and no conflicts in Chrome or FF. I've not tested Opera myself, but others have told me it's worked there for them as well, so this ought to be pretty well a complete cross-browser userscript solution, if that's what you need to do this for.
Copy everything from:
https://code.jquery.com/jquery-3.4.1.min.js
And paste it into console. Works perfectly.
Per this answer:
fetch('https://code.jquery.com/jquery-latest.min.js').then(r => r.text()).then(r => eval(r))
For some reason I have to execute it twice to get the new '$' (which I have to do with the other methods as well), but it works.
This is the equivalent if your browser isn't so modern:
fetch('http://code.jquery.com/jquery-latest.min.js').then(function(r){return r.text()}).then(function(r){eval(r)})
It's pretty easy to do this manually, as the other answers explain. But there's also the jQuerify plug-in.
Here is alternative code:
javascript:(function() {var url = '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; var n=document.createElement('script');n.setAttribute('language','JavaScript');n.setAttribute('src',url+'?rand='+new Date().getTime());document.body.appendChild(n);})();
which can be pasted either directly in Console or create a new Bookmark page (in Chrome right-click on the Bookmark Bar, Add Page...) and paste this code as URL.
To test if that worked, see below.
Before:
$()
Uncaught TypeError: $ is not a function(…)
After:
$()
[]
The top answer, by jondavidjohn is good but I'd like to tweak it to address a couple of points:
http
to a page on https
.jquery.com
's protocol to https
results in a warning if you try it straight from the browser's URL bar: This is probably not the site you are looking for!
My only issue is that I have to include a version number where in the console I really always want the latest.
var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();
Post 2020 method, using dynamic import, self executing IIFE, asynchronous function!
(async () => {
await import('https://code.jquery.com/jquery-2.2.4.min.js')
// Library ready
console.log(jQuery)
})()
_x000D_
Source: Stackoverflow.com