In this article, we will build a simple Google Chrome extension. After this, you can develop your own extensions very quickly.
Prerequisite: So before we start we need some basic things on our computer.
- Download or update your Google Chrome to the latest version.
- Now we need an IDE where we can write our code, here I am using VS Code.
Creating Application:
Step 1: Create a Project Folder and move into that folder:
mkdir Project_name cd Project_name
Step 2: Create manifest.json file (Very important and the file name cannot be changed)
touch manifest.json
Step 3: Create popup.html file (Very important and the file name cannot be changed)
touch popup.html
Step 4: Create script.js and style.css files:
touch script.js style.css
Step 5: Add an image for the logo and name it logo.png (128 x 128)
Project Structure: The project should look like below:
File Structure for project
Let me describe the files, so we can understand them in a better way:
- manifest.json: This files mainly the structure and backbone of the project, without this file we can not use the extension on our chrome browser.
- poppup.html: As we can see this file is an HTML file where we write the skeleton of the project, and this file helps to pop up when we click on the chrome extension. So these are the most important file.
- script.js: This file is the brain of the extension which will allow us to API calls and the other functional things going to work on the chrome extension.
- style.css & logo.png: These files we can add or just skip these files, it totally depends on you. But I recommend you to use a logo.png because by clicking on it you gonna use the extension and also this gives a professional look.
Example: This example will illustrate how to Build a Crypto Price Tracker- Google Chrome Extension
- manifest.json: As we can see below in browser_action there is an icon option that will show the icon and the HTML file will pop up. And we must grant the activeTab permission otherwise our chrome extension will not show up.
{ "name": "Coin Prices",
"version": "1.0.0",
"manifest_version" : 2,
"browser_action": {
"default_popup": "popup.html",
"default_icon": "logo.png"
},
"icons": {
"128": "logo.png"
},
"permissions": ["activeTab"]
} |
- popup.html: Here we only tracked four cryptocurrency prices, you can track as many as you want.
<!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">
<title>Coin Prices</title>
<link rel="stylesheet" href="style.css">
<script src=
</head>
<body>
<h2>Live Prices</h2>
<div class="container">
<div class="coin-price">
<div>
<h3>$ <span id="bitcoin"></span></h3>
<h3>Bitcoin</h3>
</div>
</div>
</div>
<div class="container">
<div class="coin-price">
<div>
<h3>$ <span id="litecoin"></span></h3>
<h3>LiteCoin</h3>
</div>
</div>
</div>
<div class="container">
<div class="coin-price">
<div>
<h3>$ <span id="ethereum"></span></h3>
<h3>Ethereum</h3>
</div>
</div>
</div>
<div class="container">
<div class="coin-price">
<div>
<h3>$ <span id="doge"></span></h3>
<h3>Doge</h3>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
|
- Script.js: Here comes the most important part of the project. Here we used the fetch() function for fetching the data from the CryptoCurrency API. Here we use the CoinGecko CryptoCurrency price API. It is absolutely free for developers.
var btc = document.getElementById("bitcoin");
var lite = document.getElementById("litecoin");
var eth = document.getElementById("ethereum");
var doge = document.getElementById("doge");
const API_URL = fetch(API_URL) .then(response => response.json())
.then(response => {
// For debugging
console.log(response)
btc.innerHTML = response.bitcoin.usd;
lite.innerHTML = response.litecoin.usd;
eth.innerHTML = response.ethereum.usd;
doge.innerHTML = response.dogecoin.usd;
});
|
Just visit CoinGecko and go all the down and find Crypto API. Now select the free plan and continue by logging in to get an API key. Now after that, the next steps are really easy to search the coin section and from there you can get the data of the currency that you want.
Hereafter fetching the data we are changing the innerHTML of the currency price div.
So our Chrome extension is ready to use and now one last step, we have to list it to the Chrome extension store or we can just use this in our own Chrome browser.
Steps to run the application: Follow the below steps to implement the extension into your browser and use it:
Step 1: Chrome Extension Settings
Step 2: Turn on Developer Mode
Developer Mode
Step 3: Load unpacked
Load the Chrome Extension
Step 4: Select the folder where you wrote the codes
Step 5: It will appear in your Chrome extension section.
Crypto Price Extension.
Now just pin the Chrome Extension and click on the icon to use it.
Output:
Crypto Price Tracker Extension