35

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

3 Answers 3

57

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.

Sign up to request clarification or add additional context in comments.

3 Comments

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.
Better to enforce https, since https is ok on every other protocol, especially on file:// documents where // fails.
I get a "refused to load the script" error in Chromium with this.
14

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>

Comments

-1

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.