How to build chrome extensions

Chrome Extension’s

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.

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

developer.chrome.come/extensions

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Patel

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.