How to Inject jQuery with Chrome in Developer Console?

Question

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:

• jQuery Injector - Chrome Web Store
• jQuery Everywhere - Chrome Web Store

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:

• How to inject script into a page using bookmarklet if the Content Security Policy is enabled on the server?
• Include jQuery in the JavaScript Console
• How to inject jquery to any webpage
• How do I include a JavaScript file in another JavaScript file?
• Google Chrome Extensions: How to include jQuery in programmatically injected content script?
• Inject jQuery Onto Any Site | brandon martinez
• Content Scripts - Google Chrome

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

• How to Inject jQuery Into Any Website via Chrome Developer Tools | DSASMBLR

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 1

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.

Answer 2

Use Snippets.

1. Copy the jQuery code, and paste it into a Snippet.
2. Run the Snippet.