What is Browser Extension?
A browser extension is a small piece of software that helps enhance your browser's functionality.Examples:
- AdBlocker: Blocks advertisements.
- Grammarly: Fixes typing mistakes.
- Dark Reader: Displays websites in dark mode.
The script or tool we need can be created and customized through an extension.
What you'll need to create a browser extension?
To create a browser extension, you'll need a few files and some coding skills. But don't worry, I'll explain everything in a simple way. Files you'll need:
- Manifest.json: The main file of the extension.
- HTML file: For the user interface.
- CSS file: For styling.
- JavaScript file: For the core functionality.
Step 1: Create a Project Folder
First, create a folder on your PC and name it MyExtension. This folder will hold all your files.Step 2: Create Manifest.json
This file is the heart of the extension. Without it, the extension won’t work.Code:
Create a file named
manifest.json inside the MyExtension folder. Then copy and paste the code below into it.{
"manifest_version": 3,
"name": "My First Extension",
"version": "1.0",
"description": "This is my first extension",
"icons": {
"48": "icon.png"
},
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"permissions": ["storage", "activeTab"]
}- Manifest_version: Defines the version of the extension for the browser.
- Name: The name of your extension.
- Description: Describes what your extension does.
- Action: Specifies which file/interface will open.
- Permissions: Lists the permissions your extension will need.
Step 3: Create Popup.html
Now, create a popup.html file for your extension. This file will serve as the user interface. Code:
<!DOCTYPE html>
<html>
<head>
<title>My Extension</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
button {
padding: 10px 20px;
margin-top: 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>My First Extension</h1>
<button id="clickMe">Click Me!</button>
<script src="popup.js"></script>
</body>
</html>- I added a title heading.
- I placed a button.
- I linked the popup.js file.
Step 4: Create Popup.js
Now create a file named popup.js. This file is linked in popup.html. Code:document.getElementById("clickMe").addEventListener("click", function() {
alert("Click the button!");
});Step 5: Add an Icon
Download an icon.png file and place it in the MyExtension folder. This will be the icon for your extension.Step 6: Load the Extension in the Browser
- Go to chrome://extensions/.
- Enable Developer Mode from the top-right corner.
- Click on the Load Unpacked button.
- Select your MyExtension folder.
How to Customize the Extension Further?
- Adding Storage Feature
You can use Chrome's Storage API to save data in your extension.
Example:
chrome.storage.sync.set({key: "value"}, function() {
console.log("Save dataে!");
});
chrome.storage.sync.get("key", function(data) {
console.log("Save data:", data.key);
});- Background Script
Example:
Add this in manifest.json:
"background": {
"service_worker": "background.js"
}- Background .JS
chrome.runtime.onInstalled.addListener(function() {
console.log("Extension installed!");
});Conclusion
Creating a browser extension with JavaScript is not an easy task. However, once you get started, it won’t seem that difficult. I hope this tutorial will be helpful to you. If you face any difficulties in understanding any part, feel free to let me know in the comments. I’ll be back with new ideas soon.
Post a Comment
0Comments