How to inject jquery to any webpage

Question

Is there any way to inject jQuery into any page as we do with javascript(from url). with javascript we do this

javascript:alert("b");

I tried this but I don't know why it dosen't work

javascript:var x = document.getElementsByTagName("head")[0];
var y = document.createElement("script");
y.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";
x.appendChild(y);

var a = document.getElementsByTagName("body")[0];
var b = document.createElement("script");
b.innerHTML = "$('p').css('border','3px solid red')"
a.appendChild(b);

Amr Elgarhy · Answer 1 · 2021-03-14T17:05:27.073

55

This is a bookmarklet code to inject jquery in any webpage:

javascript: (function (){
    function l(u, i) {
        var d = document;
        if (!d.getElementById(i)) {
            var s = d.createElement('script');
            s.src = u;
            s.id = i;
            d.body.appendChild(s);
        }
    } l('//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', 'jquery')
})();

Update: I removed the http: part from the URL per @Monkpit comment, which is very important and saves a lot of problems.

edited Mar 14 '21 at 17:05

answered Oct 26 '14 at 13:04

Amr Elgarhy

66,568
69
184
301

6

Just to make this a little more portable, you should remove the `http:` portion and make the link just `//ajax.googleapis.com...`. That way, the bookmarklet will work on http and https pages. – Kyle Pittman Mar 07 '16 at 19:34
4

Better to enforce https, since https is ok on every other protocol, especially on `file://` documents where `//` fails. – Pierre Oct 14 '17 at 10:46
I get a "refused to load the script" error in Chromium with this. – bparker Jan 26 '20 at 00:28

Salman A · Answer 2 · 2014-10-26T13:39:10.357

Since you are loading jQuery asynchronously, the jQuery variable is not available immediately. This means you cannot use jQuery on the next line; you need to wait until the browser loads jQuery and executes it.

The solution is to use one of the following techniques:

use delay (assume that the script loads after x seconds)
use polling (check typeof jQuery === "function" every x milliseconds)
use callback parameter (append query string such as ?callback=scriptloaded, requires server- side support)
use script element's onload event as described below

function injectScriptAndUse() {
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";
  script.onload = function() {
    $("p").css("border", "3px solid red");
  };
  head.appendChild(script);
}

<p>Paragraph</p>
<button onclick="injectScriptAndUse();">Click to load jQuery and change style of the paragraph</button>

score -1 · Answer 3 · answered Oct 26 '14 at 13:05

You forgot a semicolon in row 8. This is the code without errors:

javascript:var x = document.getElementsByTagName("head")[0];
var y = document.createElement("script");
y.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";
x.appendChild(y);
var a = document.getElementsByTagName("body")[0];
var b = document.createElement("script");
b.innerHTML = "$('p').css('border','3px solid red')";
a.appendChild(b);

You can inject jQuery in Chrome by putting it as a bookmark. Just copy the code above, create a new bookmark of a random website. Right click on the bookmark and choose 'Edit', paste the code in the URL box and choose 'Save'. When you click on the bookmark the jQuery script will be injected.

-Lucas

How to inject jquery to any webpage

3 Answers3

Linked