How to build chrome extensions

Abhishek Patel
2 min readOct 23, 2020

Have you ever wondered how Chrome Extensions are built? Or how can you build your own? Well, guess what! it’s a lot easier than you think. Chrome Extensions are created with HTML, CSS, and JS.

Chrome Extension’s

To start, create a new directory to hold the extension’s files. Then, we need a menifest.json file, an icon, an HTML file, style.css, and javascript.

File Structure

- manifest.json

- icon.png

- popup.html

- style.css

- funnyname.js

MENIFEST.json

The manifest file tells Chrome everything it needs to know to properly load up the extension. browser_action s where we specify what the default icon is and what HTML page should be displayed.


{
"name" : "Our Extension",
"version" : "1.0.0",
"description" : "This is the first extension",
"manifest_version" : 2,
"browser_action" : {
"default_icon" : "icon.png",
"defautl_popup" : "popup.html",
}
}

POPUP.html

For this example in the HTML file, we’ll just be greeting the message only.

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Chrome Extension</title>
</head>
<body>
<div class="d-flex justify-content-center">
<h2 class="greet"> Hello, Chrome</h2>
</div>
<!-- Optional JavaScript -->
<script src="FUNNYNAME.js"/>
</body>
</html>

STYLE.css

Now, we can add some CSS to make things look nice and clean. Use min-width and min-height to make sure the popup will have the minimum dimensions and set the font-size also set the background-color for looks prettier

body {
background: #111;
min-widht: 250px;
min-height: 100px;
}
.greet {
font-size: 50px;
margin: 0 10px;
color: #fff;
}

FUNNYNAME.js

You can add a JavaScript file to make our extension more responsive or doing some extra work through script.

console.log("This is the example of JS")

Finally, let’s see what we’ve built.

Go to chrome://extensions and make the Developer mode is ON and click on Load unpacked and select your project directory. Your extension will be added to the browser click on its icon to open it.

Here, we saw the most basic thing you can go with Chrome Extensions. Extensions can also include permissions, background scripts, and content scripts.

To learn more about Chrome Extension development, you can visit:

developer.chrome.come/extensions

--

--

Abhishek Patel

Hey, folk's I'm a student and passionate about learning and learning. And apply that knowledge in different fields helps others and open-source contribute.