If you are a Google Chrome user, you've probably used some extensions in the browser.
Have you ever considered building one yourself? In this tutorial, I'll show you how to build a Chrome extension from the ground up.
What is a Chrome Extension?
A chrome extension is an application that is installed in the Chrome browser to improve the browser's capabilities. You can easily create one by utilising web technologies like as HTML, CSS, and JavaScript.
Developing a chrome extension is similar to creating a web application, but it requires a manifest.json file, which we will go over in the last of this post.
What Will our Chrome Extension Look Like?
The complete source code of this project can be found on GitHub.
How to Create a Chrome Extension?
Let's dive into the step-by-step process:
1. Create Project Folder and HTML File
Start by creating an empty folder for your project. Inside it, create an index.html file with the following HTML boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="popup.css">
<title>Algoritm Complexity Extension</title>
</head>
<body>
</body>
<script src="popup.js"></script>
</html>
2. Design Your Extension Popup
In the popup.html file, structure your extension's popup:
<body>
<h1 class="ml title">Algoritm Complexity Extension</h1>
<div class="container">
<h3 class="algo" id="algorithm"></h3>
<p><b>Best time complexity: </b><div id="best"></div></p>
<p><b>Average time complexity: </b><div id="avg"></div></h4>
<p><b>Worst time complexity: </b><p id="worst"></p></h4>
<div class="al-auto">
<button id="algo" class="button">Next</button>
</div>
</div>
<p class="ml">
© <a href="https://github.com/ankushsinghgandhi" style="text-decoration: none; color:blue;">Ankush Singh Gandhi</a> 2021
</p>
</body>
3. Style Your Popup
In popup.css, style your popup to make it visually appealing:
body {
width: 300px;
background-color:cornsilk;
}
.ml {
margin: auto;
text-align: center;
}
.title {
text-align: center;
}
.container {
height: 280px;
position: relative;
border: 3px solid green;
}
.al-auto {
margin: 0;
position: absolute;
bottom: 10%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-weight: bold;
}
4. Implement JavaScript Logic
In popup.js, add JavaScript code to handle button clicks and display algorithm complexities:
var algorithms = ['Linear Search','Binary Search', 'Bubble Sort', 'Selection Sort', 'Insertion Sort', 'Merge Sort', 'Quick Sort', 'Heap Sort', 'Bucket Sort', 'Radix Sort', 'Tim Sort', 'Shell Sort']
var besttime = ['O(1)', 'O(1)', 'O(n)', 'O(n^2)', 'O(n)', 'O(nlogn)', 'O(nlogn)', 'O(nlogn)', 'O(n+k)', 'O(nk)', 'O(n)', 'O(n)']
var avgtime = ['O(n)', 'O(logn)', 'O(n^2)', 'O(n^2)', 'O(n^2)', 'O(nlogn)', 'O(nlogn)', 'O(nlogn)', 'O(n+k)', 'O(nk)', 'O((nlogn)^2)']
var worsttime = ['O(n)', 'O(logn)', 'O(n^2)', 'O(n^2)', 'O(n^2)', 'O(nlogn)', 'O(n^2)', 'O(nlogn)', 'O(n^2)', 'O(nk)', 'O((nlogn)^2)']
document.getElementById("algo").addEventListener("click", newComplexity);
function newComplexity() {
var random = Math.floor(Math.random() * (algorithms.length));
document.getElementById('algorithm').innerText = algorithms[random];
document.getElementById('best').innerHTML = besttime[random];
document.getElementById('avg').innerHTML = avgtime[random];
document.getElementById('worst').innerHTML = worsttime[random];
}
newComplexity()
5. Create manifest.json
In the root folder, create a manifest.json file:
{
"manifest_version": 3,
"name": "Algoritm Complexity Extension",
"version": "1.0.0",
"description": "Shows complexities of random algorithms",
"action": {
"default_popup": "popup.html",
"default_icon": "algo-icon.png"
},
"icons": {
"16": "algo-icon.png",
"32": "algo-icon.png",
"48": "algo-icon.png",
"128": "algo-icon.png"
}
}
And add the following code inside the file and save.
Name, version, description, manifest version (3 in this example, which is the most recent manifest version), author, and action columns are all included in our manifest.json file. The value for default popup in the action field contains the location to the HTML file, which in this example is index.html.
You can examine all of the manifest.json file configurations here.
6. Load the Extension in Chrome
We need to go to Select More Tools and then choose Extensions from the browser menu as shown in the picture below:
After choosing Extensions, it redirects to the extensions page in Chrome. Make sure to enable the Developer mode here.
Once that's done, you need to click the Load unpacked button which will allow us to load our project in the Chrome extension store.
Now, the extension is available in our Chrome extension store. You can also pin the extension in the browser.
This extension works only in your browser. If you want to publish it on the Chrome Web Store, you can follow this link.
CONGRATULATIONS, we just created our very first chrome extension.
The entire code for this project is available on Github.
I hope this post help you get your first chrome extension up and running. if you need help in creating a chrome extension, or need help with any other project you can DM me on twitter
There more similar projects available on my GitHub.
Top comments (0)