How to Inject jQuery Into Any Website via Chrome Developer Tools

How to Inject jQuery Into Any Website via Chrome Developer Tools December 17, 2017

Psst…hey, you. Yeah, you! If you already know what snippets are and how to use them in Chrome Developer Tools, then you can safely skip this post. I’m here for you, fellow impatient reader. <3

No matter how you feel about jQuery, put simply, it’s ubiquitous and it just lets you get shit done™. Accordingly, I’m going to show you how to leverage jQuery for dynamic development/hacking by quickly and easily injecting it into any site via Chrome DeveTools. That means if you try to follow along in any browser but Chrome, I and the entire internet will be looking at you like this. To note, you can also use what you learn in this post to inject just about anything into any website, so without further ado, let’s get started!

First and foremost, do you even need to inject jQuery into your target? Countless sites already utilize jQuery, so while on a page you’re interested in futzing with, hit F12 to bring up Chrome DevTools. Click the Console tab if you’re not there for some reason, then at the prompt, simply type “jQuery” (without quotes) and hit Enter. Does it have jQuery?

YES, if you see something like this: f (a,c){return new b.fn.init(a,c,f)}

NO, if you see something like this: Uncaught ReferenceError: jQuery is not defined at :1:1

So, does the page have jQuery?

if (jQueryInPage === “YES”) {
    //Do your thing, chicken wing!
} else {
    //Continue with post; learn all the stuff and things!

If jQuery isn’t present, then let’s change that by doing the following (I’ll be using Google.com as my target since, at the time of this writing, there’s no jQuery to be found there):

  1. Visit the jQuery CDN, which contains links to jQuery releases.
  2. Pick a version to open in a new tab. As of this post, the latest version is 3.2.1. Let’s open the minified version.
  3. Once opened, you’ll see a page chock-full of code. Hit CTRL + A to select all of it, then CTRL + C to copy your selection.
  4. Now hit F12 to open DevTools, then click the Sources tab. In the left-hand column, you’ll see a tab that says Network. Beside it, you should see 3 additional tabs: Filesystem, Content scripts, and Snippets. Click Snippets. If you don’t see that tab, then either expand your DevTools section to expose all the tabs in that column, or click the >> that you see, then click “Snippets” from that drop-down menu.
  5. Click + New snippet, then name it whatever you would like. I named mine “Inject jQuery” (without quotes).
  6. In the column to the right, you should see a tab with your new snippet name. If you don’t, then you’ll need to expand the DevTools section. In the blank section beneath your snippet tab name, paste the code you copied from the minified jQuery file.
  7. Beneath the line numbers in the middle column, you’ll see a curly braces button that looks like this: {}. If you hover over it, it’ll say “Format”. If you click that, it will prettify that minified file, making it more readable. This isn’t required since you probably won’t be reading through the minified version of a script much, but knowing that format button is there may serve you well in the future!
  8. Now you can hit CTRL + S to save your snippet, or right-click anywhere in the column you pasted your code, then click Save.
  9. Bust out your trusty kazoo, ’cause now IT’S PARTY TIME!

From here on out, for any additional snippets you want to create, just follow the steps above. Any snippets you create and save will persist for you to use whenever you want without having to recreate them!

Any time you want to inject this jQuery snippet, first visit the page you want to inject, then hit F12 to bring up DevTools -> click Sources -> click Snippets, then in your list of snippets, right-click on Inject jQuery (or whatever you chose to name your snippet) and click Run. BOOM! Now you can click the Console tab, then enter jQuery code to your heart’s content.

If you followed along with me and used Google.com as your target, try pasting the following code into the console, hit enter, then click on the Google logo that’s above the search box and see what happens:

jQuery('#hplogo').click(function(){jQuery(this).replaceWith('<img height="92" id="hplogo" src="https://i.ytimg.com/vi/LpfQkVk-dto/maxresdefault.jpg" style="padding-top: 109px;" />'); jQuery('#main').after('<div style="text-align: center;"><iframe id="bigShaq" width="720" height="405" src="https://www.youtube.com/embed/zwdX0JEQooo?autoplay=1&controls=0&showinfo=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe></div>'); jQuery('body').css('background-color', 'black'); jQuery('#bigShaq').css('align', 'center'); jQuery('input:text').val("Big Shaq Man's Not Hot");});

Note: You can use $() as shorthand for jQuery(), but if anything else within a web app utilizes the dollar sign, you can experience conflicts.

A snippet can be used for practically *anything* you want to run. Perhaps you have your own custom ad-blocking implementation in JS. Or maybe you’ve spent a lot of time integrating custom functionality into a website. Want to dynamically load a Material Design version of a page over its vanilla CSS, Bootstrap, or whatever else is being used? You can do that! Or what about using a custom library you’ve developed to fuzz pages looking for bugs?

Whatever the case may be, you now have the power of snippets at your disposal. Go forth and have fun with your shiny, new toy! =)

Stephen Chapman

Twitter // GitHub // Email // YouTube

Hi! I'm Stephen. I'm a developer, reverse engineer, and former investigative journalist. DSASMBLR is my outlet for each of those facets--everything from video game exclusives, to reverse engineering and programming tutorials, to security-related articles and much more. Feel free to reach out and say hello via any of the avenues above!

Leave a Reply