Home » Internet » How to make a Chrome Extension (with Video)

How to make a Chrome Extension (with Video)

by Mrinal Saha
0 comment

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.

open multiple websites chrome extension screenshot

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 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.

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. 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 

{

	"manifest_version": 2,
	"name": "Open Multiple links",
	"description": "This extension enables you to open pre defined links in new tabs",
	"version": "1.0",
	"browser_action": {
		"default_icon": "icon.png",
		"default_popup": "popup.html"
	},
	"permissions": [
      "tabs",
      "storage"
	]
}

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

<!DOCTYPE html>
<html>
 <head><title>Open Multiple links</title></head>
 <body>
  <script type="text/javascript" src = "popup.js"></script>
  <p> <center> Paste the links below </center> </p>
  <hr>
  <textarea rows = "10" cols = "80" id= "urls"> </textarea>
  <br>
  <button type="submit" align="center" style="width:300px;"  id="button">Submit</button>
 </body>
</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. 32*32 or 64*64 pixel are recommended. I made this one.

icon for extension

2.4 popup.js
 
// open pages in new tabs
function loadUrls() {
 
// fetch urls from textarea and split it
 var urls = document.getElementById('urls').value.split('n');
 
// run a loop on the fetched urls
 for(var i=0; i<urls.length; i++){

// remove the white space from the url
 cleanUrl = urls[i].replace(/s/g, '');

// if user input valid urls then open pages
 if(cleanUrl != '') {
 chrome.tabs.create({"url": cleanUrl, "selected": false}); 
 }
 
// if user input no url
 else {
 document.getElementById('urls').innerHTML = "No value spec ified";
  }
 }
}

// Save url in chrome storage
function saveUrls() {
 
 // Fetch urls from textarea and split it
var urls = document.getElementById('urls').value.split('n');
 
 var urlsContainer = "";
 
 // run a loop on the fetched urls
 for (i=0; i<urls.length; i++) {


 // if the user input valid urls, save it in local chrome storage
 if(urls[i] != ' ') {
 
 urlsContainer += urls[i] + 'n';
 localStorage['urls'] = urlsContainer;

    }
   }
 }
 

document.addEventListener('DOMContentLoaded', function () {
 
// add an event listener to load url when button is clicked
 document.getElementById('button').addEventListener('click', loadUrls);
 
 // add an event listener to save url when button is clicked
 document.getElementById('button').addEventListener('click', saveUrls);
 
 // reload the urls in the browser
 var urls = localStorage['urls'];
 if (!urls) {
 return;
 }
 document.getElementById('urls').value = urls;
});

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.

upload chrome extension

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.

Watch this step by step video tutorial 

You may also like

Leave a Comment