Let’s Create Chrome Extension

3 min readNov 4, 2020

What are Extensions

Tiny software programs that configure the browsing experience are extensions.

They allow users to adjust the features and behavior of Chrome to individual needs or preferences.
They are built on web technologies such as HTML, JavaScript, and CSS.

Let’s build our first chrome Extension.

Step 1: Create a “manifest.json” file.

The manifest.json file contains important information that defines the extension.
Basic Structure of manifest file contains name, version, description, manifest_version like this

name

version : Version describes the version number of your extension.
description : Description is the description for your extension.
manifest_version : Developers should specify which version of the manifest specification their package targets by setting a manifest_version key in their manifests. Manifest version 1 was deprecated in Chrome 18. So, we will be using manifest version 2

So let’s make our first manifest.json file.

we have given the name “First Demo”
version : 0.0.1
description: This is my First Demo Extension
manifest_version: 2
browser_action: It will display the extension to the top right corner of the Chrome browser

Let’s define the firstdemo.html page.

<!DOCTYPE html>
<html>
<head>
 <title>First Demo</title>
</head>
<body>
 <h1 style="color:blue"><u>First Demo</u></h1>
</body>
</html>

And our First Extension is ready. Our folder will have 3 files

1)manifest.json (2) firstdemo.html (3) firstdemo.png file.

So now go to “chrome://extensions/” in chrome browser.

Step 1: Enable developer mode

Step 2: Click on Load unpacked

Navigate to your folder in my case it’s the “firstdemo” folder like this.

Now click on the Select Folder button and you will see your extension is visible on the screen like this.

And also you can see it on the top right corner.

So let’s click on the “First Demo” Extension.

Yeah, we created our first Extension.

Find code on the following link

github.com

Thank you and get ready to see

how we can create a “Full page screenshot” taker chrome extension.