Creating your first Google Chrome Extension
We don’t need an introduction to what Chrome Extensions are. If you use Chrome, you probably have at least 2–3 extensions installed to it. Be it the Grammarly extension to ensure your posts are grammatically correct or the Honey extension to apply coupons while checking-out from Amazon. There are thousands of extensions to assist you while you are browsing the Web on Chrome.
But have you ever thought how these Chrome extensions are created? And what MAGIC TRICKS you need to know before you can create one?
Well, let me tell you, creating a basic Chrome extension is very easy and will hardly take 15–20 minutes for your time. And the MAGIC TRICK you need to know is JavaScript. A beginner level of knowledge with the language is enough to get started. If you are completely new to it, I would suggest going through the basics of the language. W3Schools is a great resource to begin with.
Let’s begin
If you are reading this, I assume you know the basics of JS. So, let’s get started.
The extension we are going to create will be monitoring how much time we spend on a particular website (let’s say “Facebook”). It will be something similar to the Dryft extension that monitors any website you want it to monitor.

What next?
Now that we know what we want to do, we need to figure out how to do that.
Here’s roughly how we’ll be doing it:
1. Set a counter in Chrome’s local storage that will count the number seconds spent on Facebook. Initial value of this counter should be 0.
2. Whenever the user opens a tab, check if it is Facebook (using document.URL and RegEx)
3. If yes, then increment the counter every second until he is on Facebook.
Long ago, there was a file named “manifest.json”
And that file is still there. The entry point for an extension is it’s manifest file. It’s a JSON file that contains the extension’s name, description, icons, permissions and other relevant data. Let’s call our app Bingo (sorry, couldn’t think of a good name). This is how our manifest.json file should look like.
{
"name": "Bingo",
"description": "Usage monitor for Facebook",
"version": "1.0",
"manifest_version": 2,
"permissions": ["storage"],
"content_scripts": [{
"matches": ["*://*/*"],
"js": ["content.js"]
}],
}Let’s define those properties:
“name”: <name of the extension>
“description”: <description of the extension>
“version”: <version number of the extension>
“manifest_version”: <manifest version being used>
“permissions”: <an array of strings representing the permissions needed>
“content_scripts”: <specifies the scripts that you want to run on the websites you visit>
Apart from “permissions” and “content_scripts”, every other property is self-descriptive and easily understandable. The “storage” permission is to use Chrome’s storage for storing the extension’s data. The next section explains the content script.
Content Script — The real hero
Content scripts are JavaScript snippets that run on a particular tab/window on your extension’s behalf. You can have multiple content scripts if you want. In our case, we will have just one content script named content.js in the same folder as manifest.json .
var fb = "https://www.facebook.com";
var regex = new RegExp("\\b" + fb + "*"); //create a new RegEx//check if Facebook is opened in current tab
if(regex.test(document.URL)){
initContentScript();
}function initContentScript(){
//get "counter" value from local storage (not localStorage).
chrome.storage.local.get("counter", function(result){ //if "counter" is not already defined then set it to 0.
var counter = counter || 0;
//update counter after every 5 seconds
setInterval(function(){
counter = counter + 5;
chrome.storage.local.set({counter: counter});
}, 5000);
});
}
And that’s it. We have our manifest and content script ready. In the content script, we have used the Chrome’s local storage API to store extension data. The “get()” method fetches data from the storage and the “set()” method sets data. We need to specify the “storage” permission in the manifest file to use this storage.
Display how much you’ve spent
We will be displaying the data in a HTML file.
<html>
<head>
<title>Facebook usage</title>
</head>
<body>
<p>You have spent: <span></span> seconds on Facebook</p>
<script>
chrome.storage.local.get("count", function(result){
var count = result || 0;
document.querySelector("span").innerHTML = count;
});
</script>
</body>
</htmlSave it as index.html in the same folder as manifest.json.
Installing the extension
- Go to chrome://extensions
- Turn on “Developer Mode” on the top right corner.
- Now click “Load Unpacked”.
- Select the folder that contains the manifest file.
- If you followed this post correctly, you will have Bingo installed on your Chrome.
Now open Facebook for about 20 seconds so that the content script updates the counter.
To see how much you’ve spent, open chrome://extensions again and you’ll see an ID just below your extension’s name and description. It may look something like oakkikpbkcfeemkepnftmbnorfpdblfnf.
Copy it and then open:
chrome-extension://<your extension ID>/index.html
Voila. You’ve made a Facebook monitor for yourself.
If you want to monitor other websites as well, you may try the Dryft extension made by me :) . It’s light-weight, and shows daily, weekly, monthly and yearly stats. Also, it’s completely free.

Conclusion
Now that you know how easy it is to create a simple Chrome extension, I would suggest you to go create one. It doesn’t have to be a ground-breaking idea. Make something that is fun. Once you’re done with it, don’t forget to share it in the comments. For queries, feel free to use the comments section.
Also, don’t forget to hit the clap button and share this article if it was useful to you.
