Post
Ask Question

How To Create Chrome Extensions - My First Extension

Introduction

 
This article demonstrates how to create and install a Chrome extension. In this article, I am going to show a step by step process for creating a very basic Chrome extension app.
 

Creating a folder for the project

 
Here I am going to create a folder where I will put the project source code.
 
How To Create Chrome Extensions
 

Opening Folder in Visual Studio Code

 
I am using the Visual Studio Code. You can use any editor. Here I will open the folder in Visual Studio Code.
 
How To Create Chrome Extensions
 
How To Create Chrome Extensions
 
After opening the folder create the following folder and files:
  1. Create Folder with name ‘Images’
  2. Create ‘manifest.json’ file
  3. Create ‘popup.html’ file
  4. Create ‘popup.js’ file
How To Create Chrome Extensions
 

Add an Image file for Extension Icon inside Images Folder

 
Navigate to project-> Images and paste any image. I am using zi.png
 
How To Create Chrome Extensions
 
Put the below code to manifest.json file,
  1. {  
  2.     "manifest_version": 2,  
  3.     "name": "Zulqadar Idrishi",  
  4.     "description": "This extension is designed for Demo Perpose",  
  5.     "version": "1.0",  
  6.     "browser_action": {  
  7.         "default_icon": "images/zi.png",  
  8.         "default_popup": "popup.html"  
  9.     },  
  10.     "permissions": ["activeTab"]  
  11. }  
The manifest file contains all extension-related information like web.config file in asp.net projects.
 
Put the below code for popup.html,
  1. <!doctype html>  
  2.    <html>  
  3.    <head>  
  4.       <title>Zulqadar Idrishi</title>  
  5.       <script src="popup.js"></script>  
  6.    <style>  
  7.       body{  
  8.          min-width: 200px;  
  9.          text-align: center;  
  10.          font-family: century Gothic;  
  11.          }  
  12.    .button {  
  13.          background-color: #4CAF50;  
  14.          border: none;  
  15.          color: white;  
  16.          padding: 5px 14px;  
  17.          text-align: center;  
  18.          text-decoration: none;  
  19.          display: inline-block;  
  20.          font-size: 16px;  
  21.          margin: 4px 2px;  
  22.          transition-duration: 0.4s;  
  23.          cursor: pointer;  
  24.          }  
  25.       .button2 {  
  26.          background-color: white;  
  27.          color: black;  
  28.          border: 2px solid #008CBA;  
  29.          }  
  30.       .button2:hover {  
  31.          background-color: #008CBA;  
  32.          color: white;  
  33.          }  
  34.       </style>  
  35.    </head>  
  36.    <body>  
  37.       <h2>Hi, I'm <strong>Zulqadar Idrishi</strong></h2>  
  38.       <a href="https://www.google.com/search?q=Zulqadar Idrishi" id="checkPage" class="button button2">Find me on Google</a>  
  39.    </body>  
  40. </html>  
This HTML code is responsible to show popups and the design of our extension.
 
Put the below code for popup.js,
  1. document.addEventListener('DOMContentLoaded', function() {  
  2.     var checkPageButton = document.getElementById('checkPage');  
  3.     checkPageButton.addEventListener('click', function() {  
  4.         chrome.tabs.getSelected(null, function(tab) {  
  5.             d = document;  
  6.             window.open('https://www.google.com/search?q=Zulqadar Idrishi', 'blank');  
  7.         });  
  8.     }, false);  
  9. }, false);  
This file popup.js is responsible to handle events on the extension.
 
Now open Chrome Browser and go to Extensions,
 
How To Create Chrome Extensions
 
Here Enable Developer Mode and click on Load Unpacked,
 
How To Create Chrome Extensions
 
Choose the Project Folder,
 
How To Create Chrome Extensions
 
Now, the extension is added to Chrome successfully,
 
How To Create Chrome Extensions
 
Now, we can see Extension is also installed in our browser,
 
How To Create Chrome Extensions
 
Click on the Extension icon and see the popup,
 
How To Create Chrome Extensions
 

Summary

 
In this article, I discussed how we can create and install a Chrome extension. I hope you like the article. This is my first article so let me know how the article is.


Similar Articles