How to build chrome extensions
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.
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.
