How to Inject jQuery with Chrome in Developer Console?

THE ISSUE

I used to be able to (locally) use either of the following two Chrome extensions to easily inject jQuery into pages that didn’t already have jQuery, and that I didn’t own (client-side) to experiment with design changes, development modifications, and real-time troubleshooting:

Unfortunately, now because of what appears to be the newest craze in preventing “XSS” (cross-site scripting), those plugins no longer work. There may be a noble purpose behind these changes, and I’m just trying to understand WHAT changed. I think it has something to do with “content security policy“, which I’ve only recently heard of and have very little knowledge of.

I first learned about XSS as a browser issue in 2011, however, XSS prevention measures had never prevented me from doing local development before. I’ve been searching for a modern (late 2017) solution, to no avail.

I’m not sure where to go from here.

WHAT I’VE TRIED THAT HASN’T WORKED

Here are plugins I tried (which used to work until about 6 months ago) that no longer work for me:

  1. jQuery in Console (Plugin)
  2. jQuery Inject (Plugin)
  3. jQuery Injector (Plugin)
  4. GitHub – bluerabbit/jquery-inject: jQuery-inject(Chrome extension)

Here are some of the many links I encountered that offer solutions which no longer work:

This last one also looks promising, but I haven’t tried it yet:

MY QUESTIONS

  1. How can I inject jQuery (using Chrome Developer Console) into a webpage that doesn’t use jQuery?

  2. Did something change in the browser/JavaScript/programming world significantly enough in 2017 that if a person knew about this particular change or phenomena it would easily explain why the above plugins no longer work?

  3. Why don’t the above plugins work? Did ALL the browser companies universally roll out some major change this year?

Answer

Here is a direct method that has always worked for me:

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.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();

Just paste each line into the console, one at a time. (Actually, it works fine if you select the lines and paste them into DevTools Console all-at-once).

You might immediately see an error: Uncaught ReferenceError: jQuery is not defined. Ignore it – DevTools is pulling your leg. (Google’s weak attempt at humor, maybe…)

Then, in DevTools console, test it:

$('div').length; //press Enter

If you get an error, try it this way:

jQuery('div').length

Hopefully, the first will work – but sometimes you’ll need to use the second method.

This code is thanks to jondavidjohn, from this original post.

Leave a Reply

Your email address will not be published. Required fields are marked *