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:
- jQuery in Console (Plugin)
- jQuery Inject (Plugin)
- jQuery Injector (Plugin)
- 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?
- How to inject jquery to any webpage
- 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 can I inject jQuery (using Chrome Developer Console) into a webpage that doesn’t use jQuery?
Why don’t the above plugins work? Did ALL the browser companies universally roll out some major change this year?
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').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:
Hopefully, the first will work – but sometimes you’ll need to use the second method.