Chrome Extensions

Previously, we looked at JavaScript inspecting and demonstrated its capabilities with a speed clicker, this worked and everything but it wasn't very convenient – we needed to enter our code again every time we reload the page. There is a solution to this though – chrome extensions, these can automatically detect you're if you're on a specific website and insert the code you specified to that site every time you visit it. This is exactly how Kahoot smasher automatically works with Kahoot (even though you can't see it happening).

The most basic Chrome Extension has two components the "Manifest" and the "Content scripts". The manifest is used to specify all the information about the extension: the name, the icon, the description, etc. As well as this, it can also tell Chrome which URLs the extension should insert JavaScript into. The content scripts however contains only the code that will be inserted into the website, this code will be automatically run whenever the website is loaded without the user needing to type it themselves.

So, now that we know the basics, let's try setting up an example using the Speed Clicker we made earlier:

You will need:

The first step is to setup the folder structure needed for the extension; unfortunately this is quite difficult to do on Chromebooks and easy to get wrong on Windows so I have provided an example download here. After you have downloaded this zip file extract it:

On windows this is done by locating the file "extension.zip" in the "Downloads" folder, right clicking on it and pressing the "Extract all" button (shown below) this should create a new folder with everything you need in it.

On ChromeOS you should double click on the downloaded file and copy and paste the folder inside it into your "Downloads" folder. With the current ChromeOS it cannot be stored in your Google drive

After you have done this, you should have a folder with two files in it "manifest.json" and "script.js"; remember the file extensions might be hidden so if yours don't have the ".json" and the ".js" it's probably fine.

Let's get started with the fun stuff! First edit the file "manifest.json", you might need to right click on it and select "Open with: " + your text editor. The file should be completely blank at the moment - let's add some stuff telling Chrome what we want our extension to do, change your manifest to look like this (you can copy/ paste if you want):

{ "name": "",
"short_name": "",
"manifest_version": 2,
"description":"",
"content_scripts": [
{
"matches": ["https://kahoot-smash.tk/examples/SpeedClicker.html"],
"js": ["script.js"],
}
],
"version":"0.1" }

Don't panic, I know it looks like a lot but it's not very hard really, let me explain:

The "name", "short_name" and "description" fields are fairly self-explanatory; you can set them to any values as long as you leave the quotation marks either side of them. These don't change any functionality of the extension, only how it appears in the extensions tab.

The "manifest_version" is just important to how Chrome reads the file – you shouldn't change it for the most part, it should always be 2 unless you have a very special requirement.

The "content_scripts" section is what's interesting to us though, this is the part of the manifest that tells Chrome what pages the JavaScript should be inserted into. As you can see, the "matches" element has been set to the URL of the Clicking Script page we looked at last session, of course you can change it to any URL you want, but for the rest of this tutorial I will be showing it on the clicking script page.

The "Version" field can be set to any number you want; this is how you indicate the version of your extension. For example, if you were to ever update it in the future you could increase this number to show that the updated version is newer than the existing one.


Contact me

Privacy Policy

Home