What is a Chrome Extension?
A Chrome Extension is a small program that runs inside Google Chrome and adds new features to your browser. You have probably used extensions before — ad blockers, password managers, or dark mode toggles. Every single one of them was built with HTML, CSS, and JavaScript.
The best part? You already know the tools. If you can build a webpage, you can build a Chrome Extension.
What We Will Build
In this guide, you will build a Crypto Price Ticker extension that:
- ✓Shows live BNB and ETH prices in your browser toolbar
- ✓Fetches data from the free CoinGecko API
- ✓Has a clean popup UI with color-coded price changes
The manifest.json File
Every Chrome Extension starts with one file: manifest.json. This is the identity card of your extension — Chrome reads this file to know what your extension is and what permissions it needs.
Here is what the manifest looks like:
{
"manifest_version": 3,
"name": "Crypto Price Ticker",
"version": "1.0",
"description": "Live crypto prices in your toolbar",
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"permissions": ["storage"]
}
The Three Core Files
A basic Chrome Extension needs three files:
- ✓manifest.json — tells Chrome what the extension is
- ✓popup.html — the UI that appears when you click the extension icon
- ✓popup.js — the JavaScript that fetches data and updates the UI
How the Popup Works
When you click your extension icon, Chrome opens popup.html as a small window. Your JavaScript runs inside this popup, fetches the price data, and updates the HTML.
async function fetchPrices() {
const response = await fetch(
'https://api.coingecko.com/api/v3/simple/price?ids=binancecoin,ethereum&vs_currencies=usd&include_24hr_change=true'
);
const data = await response.json();
// Update the UI with the price data
document.getElementById('bnb-price').textContent = '$' + data.binancecoin.usd;
}
How to Install Your Extension
You do not need to publish to the Chrome Web Store to use your own extension. Just:
- ✓Open Chrome and go to
chrome://extensions - ✓Enable Developer Mode (toggle in top right)
- ✓Click Load Unpacked
- ✓Select your extension folder
Your extension appears in the toolbar immediately.
This is just a preview. The full ebook covers the complete popup HTML and CSS, error handling, auto-refresh, loading states, and how to submit to the Chrome Web Store.
Why Learn Chrome Extensions?
Chrome Extensions are one of the most practical things you can build as a beginner:
- ✓No server needed — runs entirely in the browser
- ✓Solves real problems you face every day
- ✓Pure HTML, CSS, and JavaScript — no framework required
- ✓Easy to share with friends and colleagues
- ✓Great portfolio project for developers