How to Build Chrome Extensions? | Deploy Chrome Extension to Chrome Web Store | A Complete Guide to Beginner

Chrome Extensions are small programs that add functionality and more interactivity to the Chrome Browser. It's like an app for the Chrome Web browser, that allows you to alter the behavior of browser. You can also modify a web page using the Chrome Extensions. These extensions are developed and designed with HTML, CSS and JavaScript. 

In this article we will be learning how to develop, debug and deploy Chrome Extensions. Just tighten up your belts and start learning.

Prerequisites for building a Chrome Extension:

• Basic knowledge of HTML, CSS and JavaScript.

• You can also use JavaScript libraries like jQuery to add more functionality.

The work of extension is to bundle up all their files into a single file, that the user can download and install on the browser. Bundling means that unlike web apps, extensions do not need to depend on content from the web.

How Chrome Extensions work?

Chrome extensions consist of Manifest, HTML, CSS and JavaScript files, packed in a .crx zipped file and this zip file is deployed into the Chrome Web store, where the users can install the extensions. 

We will learn in detail about each of the file and create our own Chrome Extension.

Different Types of Extensions:

1). Browser Action (BA) Extensions

• Stays in the tool bar.
• Accessible all times and easily manageable.

2). Page Action (PA) Extensions

• Works only on certain pages, as decided and designed by the developer.

3). Neither BA nor PA Extensions

• These extensions run in the background.

Let's learn about the different files in Chrome Extension and then we will be developing and deploying our own extension.

Manifest File

Manifest file is a special file that tells Chrome everything it needs to know to properly load and set up the extension. Manifest is a JSON (JavaScript Object Notation) format file. 

A Manifest file must contain the following:

• Information about the extension

• Manifest version - this version is provided by the Google

• Name of the extension

• Version of extension

• Type of Extension

• You also need to specify the default icon for your extension and and a pop-up file (HTML file), when the extension is clicked/opened.  

HTML File

Our extension can have more than one HTML pages, which represent the UI (User Interface) of the extension. The basic structure, what needs to be displayed when a user clicks on your extension (a pop-up). 

CSS File

CSS make things look nice and clean and in a styled way. 

JavaScript File

This file helps us to add logic and increase interactivity in our extension. You need to externally link the JavaScript file in the HTML file. Internal Linking of JavaScript will not work.

Creating our own Chrome Extension:

=> Let's learn how to create an extension that provides easy access to TechyChefs website and Facebook Page on the internet:

Step-1: Create a folder and name it as "Extension" (you can choose your own name) and open this folder in VS Code (you can choose your own editor).

• Also, select an image and bring it to the folder in which you are creating the extension. This image will be the icon of your Chrome Extension.

Step-2: Within the 'Extension' folder, create a file and name it as 'manifest.json'. This is the Manifest file of your extension.

Click on the image to view

You need to write the following code in your Manifest file, containing all the properties as specified above.

Manifest file:

 {  
   "manifest_version": 2,  
    
   "name": "TechyChefs Launcher",     
   "description": "Easy access to TechyChefs",  
   "version": "1.0",  
    
   "browser_action": {  
    "default_icon": "icon.png",  
    "default_popup": "popup.html"  
   }  
   
 }  

Step-3: Create a HTML file and name it as 'popup.html'. Enter the following code in your HTML file. Here, we have used icons of Facebook and Web from Bootstrap. 

In the link section, I have entered TechyChefs website and Facebook page link, you can enter your own links.

HTML Code:

 <!DOCTYPE html>  
 <html lang="en">  
   
 <head>  
   <title>TechyChefs Launcher</title>  
   <link rel="stylesheet" href="style.css">                                                    
 </head>  
   
 <body>  
   <span class="text">TechyChefs Easy Access</span>
   <br>
   <div class="container">  
     <a href="https://www.facebook.com/TechyChefs-104326221376431/" target="_blank">  
       <link rel="stylesheet"  
         href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
       <i class="fa fa-facebook-official"></i>  
     </a>  
   
     <a href="https://www.techychefs.com/" target="_blank">  
       <link rel="stylesheet"  
         href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
       <i class="fa fa-globe"></i>  
     </a>  
   </div>  
 </body>  
   
 </html>  

Step-4: Now, create a CSS file and name it as 'style.css'. We will link this CSS file to our HTML file using the 'link' tag in the head section. You can also add inline or internal CSS.

To know more about CSS, read this - What is CSS ? | Some Basic Properties in CSS to get started  

CSS Code:

 body{  
   background: #111;  
   margin: 0;  
   min-width: 250px;  
   min-height: 100px;  
 }  
  
 .text{
   margin-left:20px;
   font-size:20px;
}
 
 .container{  
   height:1000vh;  
   display:flex;  
   justify-content:center;  
   align-items: center;  
 }  
   
 a{  
   color:blue;  
   font-size: 30px;  
   margin: 0 10px;  
 }  
   
 .fa-facebook {  
   background: #3B5998;  
   color: white;  
   
 }  

Step-5: Now, we have made our own extension. If you want to add JavaScript file to your extension, you can create a JavaScript file and add our logic and link it to your HTML file. 

-----------------------

Some Amazing Google Chrome Extensions - You must know!

-----------------------

How to View and Debug your Chrome Extension on your Chrome browser?

To view the extension in your Chrome browser, follow the steps below:

• In the search bar of your chrome browser, search for "chrome://extensions".

• Make sure your Developer Mode (top right corner) is ON. 

• Click on "Load Unpacked" button and upload your folder in which you have developed your extension and follow the pop-ups.

Click on the image to view

• After following the above steps, your extension will be visible to you on the Chrome Web browser in the Extensions tab.

Click on the image to view

• To debug your extension, you can use the developer tools, by right clicking on your extension and select 'Inspect' or press Ctrl+Shift+I.

How to Deploy Chrome Extension to the Chrome Web Store?

After developing and designing your own Chrome Extension, you would be very excited to Deploy your extension to the Chrome Web Store, so that everyone can download and use your extension.

For deploying your extensions to the Chrome Web Store, it requires a developer account.

To Deploy your extension to the Chrome Web Store, follow the steps below:

• Search for "chrome dashboard" on your Chrome browser.

• Click on the first link. It will ask you to login using your Google (Gmail) account.

• If you are deploying a Chrome Extension for the first time, it will ask you to create a Chrome Web Store Developer account.

Attention: You need to pay $5 for creating a Developer's account. So, I will leave this to you, whether you want to make a developer account or not.

• After creating the developer's account, Developer Dashboard will be accessible by you and now you can deploy your chrome extensions to the chrome web store.

• On your Developer's dashboard, click on "Add new item".

• Here, you will be asked to upload the zip file of your extension.

• After uploading is done, it will take you to the other page, where you have to provide some description, icon, screenshots of your extension.

• You can also specify the category of your extension and also select the countries in which the extension will be available.

• After filling up all the necessary details, click on "Publish". 

Hence, your extension is deployed to the Chrome Web Store and is available for use and download by everyone.

Have some doubts? Let us know in the comments section.