Ready to COMMAND your chrome to do what you wish: Build Chrome Extension.

4 min readJul 11, 2020

Chrome with a customized extension

Hey enthusiastic, imagine a situation where you and two of your close friends (say A and B) are chit-chatting in your favourite place that you ever admired after some time you gave them a task i.e. you gave them a cuboid wooden block that they cannot lift and ask them to cross about 10km with that wooden block, in that case, they can only pull/push it to 10km and one who crosses first will earn 500$.

Now listen carefully… A will start to pull/push the wooden block as soon as the whistle blows while B is an intelligent one, took a saw and starts carving the wooden block from cuboid to sphere after some time A had covered 3km B is starting from 0 with a spherical wooden block but I am sure A will be very tired but B will just kick off the wooden block and run behind it(he is doing his job in an effective manner) hence the B will reach endpoint soon and claim 500$ while A is in 5Km.

Now compare.. the wooden block(that you gave your friend) is Chrome (i.e GOOGLE has given chrome to everyone). the saw(B used) is extensions (people like B use) by using customized extension people works very fast, save lots of time and achieve more… THAT’S WHAT A EXTENSION LADIES AND GENTLEMAN...

Now let's build a chrome extension that says hi to you in just two steps:

Develop an extension.
Deploy it to chrome.

Let's create our project structure as shown below. Start by creating a root directory with the name First_Chrome_Extension we will put all our files in this directory since Chrome allows us to load up a plugin by pointing it at a folder that contains the extension files.

Ensure your project structure looks alike

extension.html: This file is used to place the contents that we need.

extension.css: This file is used to design how the contents should look.

extension.js: This file is used to decide which action to be performed when some event occurs.

manifest.json: I have mentioned the use of this in my previous blog take a look at it. click here

icon.png: It is an image which should be of size 19x19px which will be the icon of our extension

Create the manifest file

This is a JSON file used to describe our plugin to chrome. Populate the manifest.json with the below code

{"name": "Greetings extension","browser_action": {
 "manifest_version": 2, 
 "description": "This extension will greet you",
 "default_icon": "icon.png",
 "default_popup": "extension.html"
 },
 "permissions": [
 "activeTab"
 ]
} 
 "version": "1.0",

I hope most of the fields are self-explanatory look at the field browser_action it describes our default_icon and the default_popup which describes which file has to be loaded first when we access our extension. In the permissions field, we can restrict our extension to be active at which tabs/URL.

Refer here to learn deep about extension manifest files.

Create the user interface

First, we have to place the contents so populate the extension.html with the below code

Now we have to design how this content has to look, I have designed a sample page.

For this populate the extension.css file with the below code

Implement how it should work

Populate the extension.js with the following code

document.addEventListener('DOMContentLoaded', function() {
 var button = document.getElementById('sayHi');
 button.addEventListener('click', function() {
 var a = prompt("Tell me your name master!","master");
 alert("Hello "+a+"\nHave a good day!");
 }, false);
}, false);

This code gets your name and greets you in return with your name

hey, we developed an extension!!!!..