How to make a Chrome Extension (with Video)
Recently, I published-Open Multiple Websites, a simple chrome extension that opens all your favourite websites with a single click. And surprising making a chrome extension is easier than I thought. All you need is basic understanding of HTML and JavaScript.
Google has a detail documentation on how to build a chrome extension from scratch. But if you are looking for a quick overview, then this guide will help.
What is chrome extension?
It is a small program that add an extra functionality to your chrome browser. Usually, chrome extensions appear in the right side of your omnibox and shows a popup when clicked.
What should you know before we start?
If you can write a web page, you can make a chrome extension under 5 minutes. However, to make something useful, you should know the basic of HTML, CSS, JavaScript and how to use chrome’s API. Though i.e. easy.
How much time does it take?
It can take anything from few hours to few days, depending on the complexity of your extension. The chrome extension I made (Open Multiple Websites) took me few hours, starting from the scratch.
What is a chrome extension made up of?
A simple chrome extension comprises of a manifest file, few HTML/CSS files, few javascript files, and some png images for screenshots and icons. You put all these files in a zip folder and upload it to chrome store.
A simple chrome extension consist of four files:
1.Manifest.json: Consider it as an index of a book. This manifest file tells chrome the details of your extension, like its name, description, version number etc. It is written in JSON notation – a simple language that can be pick up under 5 minutes.
2.HTML filedefines the layout of your page. Usually, when you press the extension button, you see a popup. Right? This popup is written in HTML and you may also add some CSS to make it look better.
3.Icon(preferably a png) gives identity to your extension. It’s like how your extension look. If you do not add an icon then chrome will use a default icon.
4.Javascriptfiledoes all the magic. It contains the main logic that tell the browser what to do when the user clicks on the extension.
How to make a Chrome Extension
#1 Identify the problem
Find out what problem you want to solve with your chrome extension.
For instance, I want to open my frequently visited websites with a single click. But I couldn’t find any relevant extension which does that. So I decided to write one. Similarly, it’s better if you have your own problem. This will keep you motivated.
#2 Write code
Once you figure out the problem, its time to write some code. Here, we will analyze the code used in chrome extension. Obviously it will different for your extension, this will give you a good idea.
So open your favorite text editor, create a new folder. Let’s called it ‘chrome extension’. In this folder, we will add 4 files i.e. manifest.json, HTML file, icon.png and the javascript file.
So let’s see the code of each one of them.
2.1Manifest.json
Apparently, chrome uses version ‘2’. This is fixed. Next is the name, description and version of your extension. To understand browser action and permission, you will have to go through the documentation. However, you can copy paste the above code and change values accordingly.
2.2popup.html
Here is the simple HTML for popup. It has a text area where the user will enter all the URLs and a submit button. Notice that we have also used id tag here so that we can access these elements from anywhere.
2.3icon.png
Use photoshop or this online tool to create a custom png icon for your extension. 3232 or 6464 pixel are recommended. I made this one.
The above code is self-explanatory with the help of comments. Basically what we are doing here is, we are using two function one ‘saveUrl’ this will store all the user input in the chrome storage and ‘loadUrl’ will launch them in new tab when the button is clicked.
#3 Publish the extension
To test your extension in chrome locally, turn on developer mode on chrome extensions page, then drag and drop this ‘chrome extension’ there.
Once you are done troubleshooting, you’re able to upload your extension to chrome store so that everyone can see it.
To do this head over tochrome developers dashboardand create an account. You will have to give one-time $5 fees to chrome. Then upload your chrome extension and enter details and few screenshots. And that’s it. Hit the publish button and your extension will be live.
Watch this step by step video tutorial
Mrinal Saha
Mrinal is a tech geek who spends half of his day reading and writing about tech. While the nights are spent on shooting or editing YouTube videos. Feel free to geek out with him on-
