Chrome extensions are web based apps meant for Chrome browser. A Chrome extension is a small software module for customizing the Chrome browser. There are a variety of extensions, which provide user interface modifications, cookie management, ad blocking, and styling of web pages.
Unless you are trying to develop an intricate chrome extension, you only need to know JavaScript, CSS and HTML to build a Chrome extension. Only with front end knowledge, you could develop some beautiful looking, feature rich extensions. Besides this, you need to explore Chrome browser APIs to add several functionalities to your extension. Documentation by Google – API Reference -Chrome, is very well written and ample. Also, you can always ask for help from online forums.
Prerequisites: HTML, CSS and JavaScript (JS)
Steps to create a simple ‘Hello world!’ Chrome extension:
1- Create manifest.json
Every Chrome extension has a JSON-formatted manifest file, named manifest.json, that provides important information for the Chrome extension. manifest.json is the file where you keep all the configurations for your extension. This file contains all the necessary information that defines the extension. It contains details of your extension such as app name, icons it use, the html it should load when launched, and many other details.
{
"manifest_version": 2,
"name": "My Chrome Extension",
"version": "1.0",
"description": "This is a demo",
"icons": {
"128":"icons/hello.png"
},
"browser_action": {
"default_popup": "popup.html",
"default_title": "Hello"
}
}
- name: Specifies the name of your extension
- default_title: This will appear when you’ll hover upon extension icon
- default_popup: This html will be displayed when you click the extension icon
- icons: This will be the icon of your chrome extension.
2- Create popup.html
popup.html is the html file that will be displayed as the extension pop-up on clicking the extension.
popup.html
<!doctype html>
<script src="js/popup.js"></script>
<body>
<div id ="main">
<button id="hello_btn">Click Me!</button>
</div>
</body>
</html>
3- Create popup.js and add it to folder named js
popup.js is the JavaScript (JS) file that will be executed after popup.html has been loaded, as we have defined in the popup.html
/**
* Created by himanshu on 08/04/22.
*/
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('hello_btn').addEventListener('click', main);
});
function main() {
alert("Hello! I am an alert box!!");
}
4- The directory (src) holding the manifest.json file can be added as an extension
- Open the Extension Management page by pasting
chrome://extensionsin the Chrome address bar - You can also open the Extension Management page by clicking on the Chrome menu, and by hovering over More Tools, then selecting Extensions.
- Enable Developer Mode by clicking the toggle switch next to Developer mode.
- Click the Load unpacked button and select the extension directory.
After you’ve developed your Chrome Extension, you could publish it on Chrome Web Store. You can follow this – tutorial for publishing your Chrome Extension.
You can also publish your Chrome extension on Microsoft Edge without changing your code, as it is also a Chromium-based web browser.
2 thoughts on “How to build Chrome Extensions?”