Table of Contents
- What is extensions ?
- How to create an extension ?
- index.html
- manifest.json
- image icons
- scripts.js
What is Extensions ?
Extensions are small software programs which are customizing the browsing experience. They enable users to tailor Chrome functionality and behavior to individual preferences. They are build on web technologies such as HTML, JS, and CSS.
An extension must fulfil a single purpose that is narrowly defined and easy to understand. A single extension can include multiple components and a range of functionality, as long as everything contributes towards a common purpose.
Usually, Chrome users just download their commonly needed extensions from the Extension Store, but some extensions are outdated and none functional.
How to create an extension ?
We will start by an extension which give our screen height and width and others properties. First create a folder and make those files
index.html
You can make your extension view with HTML, or you can use JavaScript files.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Screen Properties</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="./assets/bootstrap.min.css"> </head> <body> <!--main content two button--> <section class="p-5"> <div class="d-flex"> <button id="btn" class="btn small">Screen Propertise</button> <button id="reset" class="ml-4 small btn">Reset</button> </div> <div id="calculation" class="mt-5"> </div> </section> <!--script need to load--> <script type="text/javascript" async defer src="./assets/scripts.js"></script> </body> </html>
manifest.json
The manifest.json file tells Chrome important information about your extension, like its name and which permissions it needs.
{
"name": "Get your viewport",
"description": "Get your viewport height and width",
"version": "1.0",
"manifest_version": 3,
"icons": {
"16": "./assets/icon16.png",
"32": "./assets/icon32.png",
"48": "./assets/icon48.png",
"128": "./assets/icon128.png"
},
"action": {
"default_icon": {
"16": "./assets/icon16.png",
"32": "./assets/icon32.png",
"48": "./assets/icon48.png",
"128": "./assets/icon128.png"
},
"default_popup": "index.html",
"default_title": "Image Ratio Calculator"
}
}
scripts.js
A scripts.js script is “a JavaScript file that runs in the context of web pages.” This means that a content script can interact with web pages that the browser visits.
// declare variable
let btn = document.querySelector("#btn");
let reset = document.querySelector('#reset');
// on click to showing screen size
btn.addEventListener("click", (event) => {
let text = "<ul class='list-unstyled'><li>Total Width x Height: <b>" + screen.width + "</b>x<b>" + screen.height + "</b></li><br>" +
"<li>Available Width x Height: <b>" + screen.availWidth + "</b>x<b>" + screen.availHeight + "</b> </li><br> " +
"<li>Color depth: " + screen.colorDepth + "</li><br>" +
"<li>Color resolution: " + screen.pixelDepth + "</li></ul>";
document.getElementById("calculation").innerHTML= text;
});
// reset button click to reset previous data
reset.addEventListener("click", (event) => {
document.getElementById("calculation").innerHTML = null;
});
image icon
Download an icon png file and place it within the created folder, you can download from online or make icon.
Now place all those four files within a folder. The folder must be named to whatever you want to call your extension. If done correctly your folder should look ← like this
To import extensions into your browser:
- Go to
chrome://extensionsin the target Chrome browser and enable “Developer mode” by the checkbox in the upper right. - Press “Load unpacked extension…” and choose the version-number folder inside the desired extension folder.
Download Extension file or Github
Read More: 10 JavaScript Tricks and Practices You Need To Know, Send Mail With PHP Mailer, Cookies in Browser – কুকি কি ? JavaScript দিয়ে কুকি তৈরি করা, Responsive Hamburger Menu with CSS and Jquery with 3 Step
