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:
- 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.
- HTML file defines 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 can also add some CSS to make it look better.
- 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.
- Javascript file does 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.1 Manifest.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.2 popup.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.3 icon.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 can upload your extension to chrome store so that everyone can see it. To do this head over to chrome developers dashboard and 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.
