A beginners guide to building a Chrome Extension

It is quite simple to build a chrome extension even for a beginner, but it is best if you know at least a little of JavaScript for this tutorial, but once you get the main idea of how it works, you can change to whatever you need.

In this tutorial, we will create a plugin that will replace the word Coronavirus from your page to… Flowers…

Hey, don’t judge me, you can use whatever words you want, I just needed an example, the final product will look like this:

Find complete code in here.

Manifest.json

Start by creating a folder, I named mine chrome_ext_replace_word(or whatever you prefer) and create a JSON file called manifest.json, this will be the most important file in this project, this where you give the instructions to the browser to what to do.

You will give it a name, a version, a small description and currently when this post was written, you need to use “manifest_version”: 2, this is the bare bones of your extension, and it can be added as an extension to your browser just like it is now.

Open chrome://extensions and allow access to developer mode on the right side of the screen, and on the left click on load unpacked, and choose the folder where you have saved the manifest file.

The extension has been successfully installed! If the toggle doesn’t stay on or if there is a button that says Errors next to Remove, try checking if you didn’t misspell anything, or didn’t forget to put any commas.

Sometimes even after fixing the error it still won’t load, in these situations, I’ve found easier to Remove the extension and Load it again.

Icon

Now, let’s add an icon so we change the one that comes by default, I’d advise you to use a vector and save it as png, but if you want to use a photo of your face, be my guest (and tag me on twitter I want to see it).

To be able to deploy to Google Marketplace the extension has to have a128 x 128px and a 16 x 16px icon, on your manifest file you will have to specify the images as an object of “icons”, as in the image bellow.

I’ve created a directory(folder) called images where I stored all the icons, it is a small project but let’s keep it clean.

With every change, you need to reload the extension, the button is next to the on/off toggle.

JavaScript Logic

Now that we have set our foundations, let’s start with the functionalities, first, create a JS file, I called my findWord.js, to check if it will work, let’s add only one line with aconsole.log in it.

And on our manifest file, we will add a “content_scripts”, this is where you add the js code to whatever you want to be done after the page finishes downloading.

It receives an array of objects inside.

With “matches”, I’m telling the browser to apply this JS logic to all URLs, but if for example, but you can limit it to just certain websites.

Don’t forget to reload your extension after every change, and if you open the console in any page you should be able to see your message.

Now, our goal was, it will scan my page and change the words that match the words from my array.

The easiest way to try if a solution works is to open the console on your browser and begin testing on it, first try to find one element in the page, then try to find all the text, and so go on, feel free to try a different approach, once it is working on the browser, add to your extension.

This was my solution:

If you have any problems or errors, they will be show ad something like this:

In some case (usually when editing the manifest file) I would fix the error and it wouldn’t disappear, try refreshing the extension or sometimes I’d simply remove it and add again.

So, everything should be working now, and if you try to load a page that has Coronavirus written on it, it should change in less than one second.

To wrap it up

If you liked the post don’t forget to give a thumbs-up, and if you have any questions, feel free to reach me out on twitter.

This is just one thing you can do with google extensions, from using API’s to building functionalities, the options are endless!

A really good project to try is this by The Coding Train, he created an extension that changes the photos in your page to kittens, take a look: