How to build chrome extensions

Chrome Extension’s

File Structure

- manifest.json

- icon.png

- popup.html

- style.css

- funnyname.js

MENIFEST.json


{
"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

<!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

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

FUNNYNAME.js

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

--

--

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