Making a Google Chrome Extension

I don't know about you, but web browsing can be stressful - there's so much stuff to contend with! So many toolbars, buttons, flashing things to click, flashing things you absolutely should not click... It's overwhelming! So how on earth do we make things a bit more chilled out?

For that, I look towards my favourite animal - the capybara. Cool, calm, collected, and never seeming to give a shit. Inspiring, really.

All of this to say, let's make a Google Chrome extension to show us some pictures of Capybaras. Or whatever your favourite animal/anime character is. Whatever chills you out, really.

You will need: #

1. A nice text editor suitable for some HTML and other bits. I'm using Brackets.
2. A few images of whatever you want to look at.
3. This handy guide!

Let's get started! #

First things first, new empty folder, don't put anything else in there except what I'm telling you - computers get unhappy easily and having to share a folder with something it's not friends with is a very easy way to make things start fighting with each other. We don't want that. Or maybe you do. But I don't, so empty folders, please!

Okay, new folder all done? Great.

Making our index.html file #

We're gonna start off with our index.html file.

All you need to be doing here is creating a new file in Brackets, calling it index.html, and putting the following code in there:

Right, what do we have here, then?

This is our HTML file - we're linking it to a stylesheet, which is gonna handle the look of the JavaScript when that gets popped in. In the body, we have our first image, image1, which is our main clickable image. The idea here is that we can click the image, and it'll zoom onto the next one. This is called a carousel, and it's our JavaScript script that deals with it, which we link in with this line:

<script src="script.js"></script>

One issue here - we don't have our script.js file!

So let's make that now...

Making our script.js file #

New file, you know how it goes. This one needs to be called 'script.js' and we need to whack the following code in there:

If you look a little closer, you'll see we have five images here called image1, image2, image3, etc, etc. These are our capybara pictures! Or whatever it was you picked...

Go find some images! #

At least five, please. Make sure they're named as they are in the script, and that they're all a sensible filetype. JPG or PNG please! None of this WEBP nonsense. We're not monsters, after all.

Got your images? Great!

Okay, now we need one more file - this is going to let it work as a Chrome Extension.

Making our manifest.json file #

Create a new file, and whack the following code in there:

You can edit everything except for "default_popup" - that needs to stay as index.html, and the "manifest_version" - that needs to stay as 3.

Once you've got that sorted, we can pop this thing on Chrome!

Putting our extension on Chrome #

Firstly, we need to make sure we're in developer mode. You can do that by following this guide: Chrome Developer Mode

Once you're in developer mode, go to your Chrome extensions, and select 'Manage extensions'. Made sure developer mode is turned on!

Then select 'Load unpacked', and select the folder with all your bits in.

Is it loaded?

Good!

(Should look something like this ^^)

You can now open up your chrome extensions and click your extension from the list, and...

Woohoo! You should now have a fully working chrome extension - click the image to move to the next one. Sure it's a bit rudimentary, but you can look at a carousel of your favourite images whenever you like, or be like me, and be zen looking at capybara.

Good work, give yourself a pat on the back - you deserve it.

• Previous: All I know now...