Let’s practice your Frontend Skills by building a Google Chrome Extension.
Introducing the Google Chrome Extension.
Google Chrome Extension are add-on provided by Google on the Chrome web store to provide users with a varied range of functionalities and tools to improve their browsing experience.
Why you should code a Google Chrome Extension as a Frontend Project.
Whenever I see any video about projects in JS or ReactJs I automatically feel like I have to code it. Though ChatGPT, Bard, Blackbox, and Github Pilot have made coding easier I still like to go old-style but AI tools are like a compliment to our coding journey if we use them properly.
As a beginner, one can use it wisely to understand the syntax and logic. Sometimes while developing coding projects if you feel you are out of ideas for a project to build(which you will not….), you can code some simple Google Chrome extension that you can use in your local environment, or if you want you can publish it on Google chrome store.
The experience of a newbie front-end developer in the constantly changing field of web development is both fascinating and challenging. As you follow this road, making Google Chrome Extensions is one of the most entertaining methods to develop your abilities and at the same time feel uplifted and excited by the end results. These valuable add-ons allow you to improve your ability to not only build something but also to use these extensions for your day-to-day internet use.
I will explain and show you how to build a Google Chrome Extension with the simplest example I have built for beginners, how to load it into the Google Chrome extension window, and how to use it in your daily work.
Without wasting any more minutes let’s get directly into it.
What we are building here?
Today we are building a super simple Chrome extension which I named “Countmywords”. As the name suggests this extension will give me the total number of words of the paragraph pasted in its textarea input box excluding the whitespace, if any.
Below is a glimpse of the end product we are building.
Steps to build Countmywords Chrome extension
- Open your favorite code editor mine is VScode 😋. Create a folder and name it the name you want to or you can keep the name “Countmywords”.
- Create 4 files, index.html, script.js style.css, and, manifest.json which is necessary for Google Chrome Extension.
index.html
Once we are in this file we will have to write the structure we want for our extension:-
You can copy and paste from the below image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Countmywords</title>
</head>
<body>
<div class="main">
<title>Countmywords</title>
<p class="wordpara"><bold>Word count: </bold><span id="wordCount">0</span></p>
<textarea rows="2" cols="25" placeholder="Copy & Paste the text" id="entertext"></textarea>
<button id="countnow" type="button">Count</button>
</div>
<script src="script.js"></script>
</body>
</html>
<p class="wordpara"><bold>Word count: </bold><span id="wordCount">0</span></p>
This <p></p> will display the total number of words after counting.
<textarea rows="2" cols="25" placeholder="Copy & Paste the text" id="entertext"></textarea>
<textarea> tag will give a wide space where one can paste the content they wish to count.
<button id="countnow" type="button">Count</button>
<button> Here is where all the action happens.
script.js
The next file is the script.js where we are adding all the functionality of this extension. Code is explained below:-
document.addEventListener('DOMContentLoaded', function () {
const getText = document.getElementById('entertext');
const countButton = document.getElementById('countnow');
const wordCountDisplay = document.getElementById('wordCount');
countButton.addEventListener('click', countNow);
function countNow (){
const inputText = getText.value.trim();
const whitespaceRemoved = inputText.split(/\s+/);
const nonEmptyWords = whitespaceRemoved.filter(rem => rem !== '');
const totalWords = nonEmptyWords.length;
wordCountDisplay.textContent = totalWords;
}
});
Here we are collecting all the HTML attributes from the HTML page by using the “document.getElementById()” method.
In this line of code, we are trying to select an HTML element with the ‘id’ attribute ‘entertext’ and store it in a variable named ‘getText’.
const getText = document.getElementById('entertext');
Here also we are doing the same thing but for the button element. Until it is not done we can’t add EventListener to it.
const countButton = document.getElementById('countnow');
In this line of code, we are targeting the span where we want to display the counted value.
const wordCountDisplay = document.getElementById('wordCount');
Now we will add an event listener to a variable named ‘countButton’, which we have already defined above. It listens for a ‘click’ event in this element and specifies a function named ‘countNow’ to be executed when the ‘click’ event occurs.
countButton.addEventListener('click', countNow);
Here’s a step-by-step explanation of what each part of the code does:
function countNow (){
const inputText = getText.value.trim();
This line retrieves the value of an HTML input element referred to by the variable getText. The trim() method is used to remove leading and trailing whitespace from the entered text. This ensures that whitespace before and after the text doesn’t affect the word count.
const whitespaceRemoved = inputText.split(/\s+/);
This line splits the inputText into an array of words using a regular expression (regex) that matches one or more whitespace characters (\s+). This effectively splits the text into individual words.
const nonEmptyWords = whitespaceRemoved.filter(rem => rem !== '');
This line creates a new array of nonEmptyWords by filtering out any empty strings from the whitespaceRemoved array. This step ensures that empty strings (resulting from consecutive spaces) are not counted as words.
const totalWords = nonEmptyWords.length;
This line calculates the total number of non-empty words in the nonEmptyWords array, effectively giving you the word count.
wordCountDisplay.textContent = totalWords;
this line sets the text content of that element to the totalWords, displaying the word count on the webpage.
}
So, when the countNow function is called, it takes the text entered in the input field, processes it to count the words, and displays the word count in a designated HTML element. This code is often used in word count applications or text analysis tools on websites.
style.css
These are some basic CSS that I have added for the page, you can go ahead and copy-paste it or add your own style.
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;700;800;900&family=Merriweather&family=Rubik:wght@300;400;500;600;700;800&display=swap');
body {
display: flex;
font-family: 'Inconsolata', monospace;
font-family: 'Merriweather', serif;
font-family: 'Rubik', sans-serif;
background-color: rgb(15, 21, 75);
color:white;
}
.main {
width:100vw;
height: 100vh;
background-color: rgb(15, 21, 75);
color:white;
padding: 20px;
border-radius: 5px;
text-align: center;
}
#entertext {
width: 100%;
height: 100%;
font-family: 'Inconsolata', monospace;
font-family: 'Merriweather', serif;
font-family: 'Rubik', sans-serif;
font-size: 16px;
border: 1px solid #6ea1d8;
border-radius: 3px;
margin-bottom: 10px;
word-wrap: break-word;
text-align: initial;
background-color: #d5e5f7;
color:#0f0f0f;
}
button {
background-color: #cad6e2;
color: #0f0f0f;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 3px;
cursor: pointer;
margin-bottom: 4px;
}
button:hover {
background-color: #0056b3;
color: whitesmoke;
}
.wordpara {
font-size: 18px;
}
#wordCount {
font-weight: bold;
}
manifest.json
{
"name": "Countmyowords",
"version": "1.0.0",
"description": "This extension will count the total number of words without whitespace",
"manifest_version":3,
"author": "Prachi P",
"action":{
"default_popup":"index.html",
"default_title": "Countmyowords"
}
}Every extension requires a manifest.json file which will contain all the important information about your extension. Here not every is required some are optional.
For a more detailed explanation of manifest.json please visit this link .
How to load Google Chrome Extension?
After finishing the coding and checking if it works, now is the time to load it into the browser so that you can use it.
1) Go to the top-right of the browser screen. Click the 3 vertical dots, a box will be opened click on the Extensions option. Refer to the below image :
2) After clicking on the manage extension, another window will open which will show you the collection of Chrome extensions. You have to see the left top corner there is a button called Load unpacked
3) After clicking on the Load Unpacked, you have to select the Folder that you want to load. Select the folder of the extension that you want to load. Once loaded you will see your extension in the list.
4) Now you can use this Chrome Extension like any other extension that you use in your daily work by pinning it. Click on the Puzzle icon at the top right of the taskbar select your extension and pin it.
Now you are done! If you have any queries please let me know in the comment section or reach me on below mentioned social handles.
Happy Extending. 🙂
Photo by Mitchell Luo on Unsplash
Edited in Canva 🍉
Please like, follow, comment, and share 🙂
Let’s get connected on Socials or just come and say HI 🙂
You must be logged in to post a comment.