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?
First and foremost, we must create an empty folder into which we will place our HTML, CSS, and JavaScript files.
Inside the folder, let’s create an index.html file with this HTML boilerplate code:
<!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>
let's start coding. We begin with the structure first, which is html code. Inside the body of popup.html add the following code.
<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>
save it and then move to the popup.css to make it look something beautiful and similar to to the pic above.
Read Complete blog on ankushgandhi.com.
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;
}
Then the last step in writing the code is to move to the popup.js and make things work by writting this code.
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()
Now, let’s break down the above code:
- You can do what we have done or you can use an API to display random algorithm complexities.
- Here we are using the function called newcomplexity.
- We have created Arrays of Random Algorithms with their complexities in best, worst & average cases.
- Now this function just pickup a random algorithm with their respected complexities to display.
Save the files, and there you have it!!! Didn't we just make our first Chrome extension? Not at all. This will not work because the manifest.json file was not included.
Manifest.json
What exactly is the manifest.json file, and how does it relate to our lovely chrome extension? You may ask.
As previously said, creating a Chrome extension is comparable to creating any web application. The main difference is that the Chrome extension requires a manifest.json file in which all configurations are stored.
The manifest.json file contains all of the information needed to create the Chrome extension. It is the first file that the extension checks, and everything is loaded from it.
Now, in the root folder, create a manifest.json file and add the following code:
{
"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.
Now that we've included the manifest.json file, we can add this project as an extension to our Chrome browser.
For that, 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.
Oldest comments (0)