How to inject jquery to any webpage [duplicate]

Question

This question already has an answer here:

• How do I include a JavaScript file in another JavaScript file? 53 answers

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

Answer 1

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('//code.jquery.com/jquery-3.2.1.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.

Answer 2

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:

1. use delay (assume that the script loads after x seconds)
2. use polling (check typeof jQuery === "function" every x milliseconds)
3. use callback parameter (append query string such as ?callback=scriptloaded, requires server- side support)
4. 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>

Answer 3

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