The idea of using Chrome’s Javascript console to inject code has intrigued me for a while. Recently, there was a site that required me to keep clicking in order to earn points towards winning something, and I thought…wait…I’m sure I can just do this with code. So I started my investigation and I’ll show you how you can do the same.

The example I’m going to use is a game a coworker recently sent me called Cookie Clicker. This game relies heavily on user clicks. So this would be a perfect place for me to test out my code injecting skills. (If you haven’t already checked out the game, I suggest you do so right now! But then come right back. )

The first thing we need to do is to simply have Chrome installed and use it as our web broweser.  Once we have the website up,  we want to identify the object we want to  manipulate. In this case it’s obviously the big cookie on the left side of the screen.

It sure is big

So let’s right click on the image and select “Inspect Element” from the drop down. This will reveal some of Chromes super powers. This is much easier way of browsing a websites source code. It will take you directly to the object you are looking for.

And Clark Kent pulls off his glasses…

We can see that the big cookie is actually referred to as “bigCookie.” Though it’s not 100% certain that this is the object we are looking for. So we will use the pane on the right hand side that displays this objects properties, scroll down and find a field called “Event Listener”

IT’S SUPERMAN!

Here we find exactly what we are looking for. On a “click” event we see this function being called, now if you really want to get into it you can follow that code link and read the source yourself, or if you are more a TL;DR; kind of person you can just trust me..this is what we are looking for.

‘Cuz A Clicking Party Don’t Stop

Let’s try to see if we can actually inject code through the Javascript console that will actually pseudo-clicking the button for us. Using regular Javascript we know how to grab the object, it’s as such.

var element = document.getElementById("bigCookie");

Simple. So now let’s make sure it exists and then send a click event like so.

if (element){
		element.click();
	}

Let’s give it a try…

Successes!

At this point, we have our object and we have what we want to do it with it. We want to click that cookie as many times as we can without destroying our computer and the game will actually let us. But how to go about this is the real trick. Coming from a Java world I’m used to being able to spawn off threads when I want to do something like a wait or have a blocking function  (yes I’m as spoiled as an only child on Christmas), but Javascript only has the UI thread. So doing something like a “Sleep” or any blocking code just isn’t going to work. The code will be stuck there and not executing anywhere else until it completes.

My next idea was to use a function I found called “setTimeout” and load in a clicking function that would timeout after so long and keep going in a loop…WRONG. That function is an asynchronous call so it just moseys on past that request and keep on moving. The code ends up executing once.

Then I found it, the holy grail of timed operations “setInterval”. It executes on a timed interval the function that you send in, perfect. So if we put our clicking code inside the setInterval method it would look something like this:

window.setInterval(function(){
    var element = document.getElementById("bigCookie");
    if(element) {
        element.click();
    }
}, 25);

This will cause the window to click the button every 25ms. And as we can see…it works.

+1!

*** EXTRA CREDIT ***

Alright, so that code works just fine and will get you cooking clicking with very little effort. But if you’ve played the game you know theres a little more to it. Once and a while a “Golden Cookie” will appear and will give you an insane bonus! Naturally you don’t want to miss these.  So let’s take a look at what we can do.

Since they aren’t always on screen we can’t just inspect the element, but let’s take a look in the source to see if there is anything labeled that would make us think it’s the gold cookie.

Well..would you look at that

Since we can be pretty sure that’s the object we want to make sure it gets clicked as well. So we need to edit our code. First, let’s clean up the actual element gathering and clicking into a function.

function sendClick(id) {
    var element = document.getElementById(id);
    if(element) {
        element.click();
    }
}

That looks much better!
Let’s add our golden cookie auto click to the window interval now.

window.setInterval(function(){
   sendClick("bigCookie");
   sendClick("goldenCookie");
}, 25);

NOTE: Instead of creating two separate interval actions, one for each type of cookie, I combined them into one set of instructions to be executed during one interval. This is a good design practice you should follow.

THE END

Finally, the quick reference. With the website open in Chrome hit CTRL + SHIFT + J to open up the Console view and paste in:

function sendClick(id) {
    var element = document.getElementById(id);
    if(element) {
        element.click();
    }
}
window.setInterval(function(){
    sendClick("bigCookie");
    sendClick("goldenCookie");
}, 25);