Extensions in Google chrome and Add-ons in Firefox allows us to customize user experience for the all websites in Browser. Suppose you install Image Downloader extension in the browser, then you can download images from all the websites. There are hundreds of extensions available in the Store.
Most interesting thing is if you have front end programming skills, e.g., HTML, CSS, Javscript then you can also create simple extension. You don't need special skills to develop basic extension.
In this article, I will show you how you can create basic extension for Chrome browser and test it on your Chrome. Extension is simple web page with HTML, CSS and Javascript with Chrome APIs as they provide. You can choose what type of extension you want to create.
I here create simple box with HTML view. It is good idea first to start with basic details.
manifest.json
In the first step we will create one project folder with all required files. In the folder create manifest.json file. This is the json file with details of your extension. This file also includes which permission required to work.
Below is the manifest.json file I have created for the test.
{
"manifest_version": 3,
"name": "Image Plugin",
"version": "1.3.11",
"description": "Testing Plugin"
}
Now from the browser go to chrome://extensions or from the Menu More Tools > Extensions.
Enable Developer mode on the right side switch.
Click the Load UnPacked and select the extension folder.
The extension is installed in your Chrome browser. The current installed extension does nothing as there are no any details what to do. So let's deep into and add some functionality.
background script.
Now we will add some background script and add it in manifest.json file. Create background.js file in the extension folder and update manifest.json.
{
"manifest_version": 3,
"name": "Image Plugin",
"version": "1.3.11",
"description": "Testing Plugin",
"background": {
"service_worker": "background.js"
}
}
In the background.js file add some Javascript code.
Extensions monitor events using scripts in their background service worker, which runs with specific coded instructions. A service worker is loaded when it is needed, and unloaded when it goes idle. In the background.js file add the code.
let color = '#3aa757';
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ color });
console.log('Default background color set to %cgreen', `color: ${color}`);
});
Permissions
Obviously the extension needs permission to run or make changes. So we define which permissions our extension required.
{
"manifest_version": 3,
"name": "Image Plugin",
"version": "1.3.11",
"description": "Testing Plugin",
"background": {
"service_worker": "background.js"
},
"permissions": [
"storage",
"activeTab"
]
}
Storage is permission to change in the files or folders. activeTab permission is to access the active tabs.
User interface.
Extensions required views to make setting changes or action in the page. The default action is default_popup which will popup. You also need to add them to manifest.json file.
{
"manifest_version": 3,
"name": "Image Plugin",
"version": "1.3.11",
"description": "Testing Plugin",
"background": {
"service_worker": "background.js"
},
"permissions": [
"storage",
"activeTab"
],
"action": {
"default_popup": "popup.html"
}
}
Add popup.html with below HTML code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="button.css">
</head>
<body>
<button id="changeColor"></button>
</body>
</html>
HTML code loads CSS file which we need to create. Create button.css file in the project folder and add the codes.
button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
border: none;
border-radius: 2px;
}
button.current {
box-shadow: 0 0 0 2px white,
0 0 0 4px black;
}
Now you may want to add the extension icon. Under the "action" option add "default_icon" with the list of res of icons.
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/logo-image-16.png",
"32": "/images/logo-image-32.png",
"48": "/images/logo-image-48.png",
"128": "/images/logo-image-128.png"
}
},
"icons": {
"16": "/images/logo-image-16.png",
"32": "/images/logo-image-32.png",
"48": "/images/logo-image-48.png",
"128": "/images/logo-image-128.png"
}
Put the icon in the /images/folder.
For the Extension management page, you can add images in "icons" option.
Here is complete manifest.json file.
{
"manifest_version": 3,
"name": "Image Plugin",
"version": "1.3.11",
"description": "Testing Plugin",
"background": {
"service_worker": "background.js"
},
"permissions": [
"storage",
"activeTab"
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/logo-image-16.png",
"32": "/images/logo-image-32.png",
"48": "/images/logo-image-48.png",
"128": "/images/logo-image-128.png"
}
},
"icons": {
"16": "/images/logo-image-16.png",
"32": "/images/logo-image-32.png",
"48": "/images/logo-image-48.png",
"128": "/images/logo-image-128.png"
}
}
Now reupload the plugin and see the button on Menu bar, It should be changed with the current you have added. You will also see icon in extensions page.
Here is the list of API Reference to interect with Chrome browser that you can use in the extension. If your Extension is enough good to publish on Chrome Store, you can also go for it.
