Build a simple chrome extension

Thinking of creating a chrome extension but don’t know how to start? Well, it’s actually a lot simpler than you think and today we’re going to build one using HTML, CSS (and tiny JS) ONLY!

Files and Images Needed

In this article, we’re going to build and publish a chrome extension that will help you access your favorite website with just a click. So let’s start with the folder structure. Actually, there is only going to be one folder that contains all the files. Starting with the logo and images, we’ll need the logo in three sizes: 16 x 16, 48 x 48, and 128 x 128. The smallest one will be for the favicon that appears on the extension’s pages. 48 x 48 one will be for the extension management page and the biggest (128 x 128) one will be for the display in the chrome webstore. You can use an image resizer tool for resizing(eg- resizeimage.net). Store all the image files in the root folder. You can also make another folder inside the root folder to store these files.

Manifest.json

The next and the most important file is “manifest.json”. Every chrome extension folder has to have a manifest.json file that contains all the necessary information about the extension like name, version, index file, script files, etc. Create a file with the name “manifest.json”. Inside curly braces, give the first property as “manifest_version”. This can have any value from 0 and 65535. I’ll give it a value of 2. Then comes the “name”, “description” and “version” properties which will have the name, description, and version of the extension. Then under the “icons” property, we will give the address and size of our largest icon. And under browser_action we will provide the address of our 16 X 16 icon and our index HTML page. After these the manifest.json would look like this:

{
“manifest_version”:2,
“name”: “My favorite websites”,
“description”:”Quick launch my websites”,
“version”:”1.0.0",
“icons”:{“128”:”icon2.png”},
“browser_action”:{
“default_icon”:”icon.png”,
“default_popup”: “index.html”
},
“permissions”:[“activeTab”]
}

HTML Code

After this, we’ll create our “index.html” file. For icons, I have used font-awesome cdn link and for fonts, I have used Open Sans and Menlo. The body tag contains the following code which is just heading and a couple of links :

<body>
<div>
<h1>
<img src=”./logo.png” alt=”Logo”> My favorite websites
</h1>
</div>
<div>
<div>
<div class>
<a href=”https://github.com/" target=”_blank”>
<i class=”fab fa-github”></i>
</a>
</div>
<div clas>
<a href=”https://www.linkedin.com/feed/" target=”_blank”>
<i class=”fab fa-linkedin”></i>
</a>
</div>
<div class>
<a href=”https://www.instagram.com/" target=”_blank”>
<i class=”fab fa-instagram”></i>
</a>
</div>
<div>
<a href=”https://twitter.com/home" target=”_blank”>
<i class=”fab fa-twitter”></i>
</a>
</div>
</div>
</div>
</body>

Publishing

You can style the elements as per your choice. And voila! Your extension is created. Now to publish it, go to settings of your chrome then to more tools > extensions. Make sure the developer mode is on the top right corner and then click on the “Load unpacked” button on the top left corner of your opened window and select the folder which contains all your extension files(your root folder). And done!

Byeee!

Thanks for sticking with me till the end. I hope you enjoyed building your first chrome extension. Follow for more such articles!

Aarushi Shanker