Search for a command to run...
A comprehensive guide to create Google Chrome extensions
Our company comprises seasoned professionals, each an expert in their field. Customer satisfaction is our top priority, exceeding clients' needs. We ensure competitive pricing and quality in web and mobile development without compromise.
informative
A modern community for developers to learn, share, and grow together.
Discover the most practical AI tools that save time, boost productivity, and actually work.
Unlock Productivity, Creativity, and Growth Using These Free AI Tools in 2025
"A Developer’s Guide to the Best Payment Processors for Modern Web Apps"
Protect your privacy, secure your data, and browse with peace of mind.
Creating a Chrome extension can be an enjoyable and educational experience. Whether you're aiming to solve a problem, improve your browsing experience, or simply learn something new, this guide will walk you through the process of building a Chrome extension from scratch. We'll create an extension that allows users to save their favorite websites.
Before starting, ensure you have:
Basic knowledge of HTML, CSS, and JavaScript.
A text editor (such as VS Code).
Google Chrome installed on your computer.
First, create a new directory on your computer to store your extension files. For this example, let's call it favorites-extension.
favorites-extension/
├── manifest.json
├── popup.html
├── popup.js
├── background.js
├── styles.css
└── icons/
├── icon16.png
├── icon48.png
└── icon128.png
The manifest.json file is the blueprint of your extension. It tells Chrome what your extension does and how to run it. Create a file named manifest.json in your extension directory with the following content:
{
"manifest_version": 3,
"name": "Favorites Manager",
"version": "1.0",
"description": "A simple Chrome extension to save and manage your favorite websites.",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"background": {
"service_worker": "background.js"
},
"permissions": [
"storage",
"activeTab"
]
}
The popup.html file is the content of the popup that appears when you click on the extension icon. Create popup.html in your extension directory with the following content:
<!DOCTYPE html>
<html>
<head>
<title>Favorites Manager</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Favorites Manager</h1>
<button id="saveFavorite">Save Current Page</button>
<ul id="favoritesList"></ul>
<script src="popup.js"></script>
</body>
</html>
Create a styles.css file to style your popup:
body {
width: 250px;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
button {
margin-top: 10px;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-top: 5px;
}
Create a popup.js file to add functionality to your popup:
document.getElementById('saveFavorite').addEventListener('click', () => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
let url = tabs[0].url;
chrome.storage.sync.get({favorites: []}, (data) => {
let favorites = data.favorites;
if (!favorites.includes(url)) {
favorites.push(url);
chrome.storage.sync.set({favorites: favorites}, () => {
displayFavorites();
});
}
});
});
});
function displayFavorites() {
chrome.storage.sync.get({favorites: []}, (data) => {
let favoritesList = document.getElementById('favoritesList');
favoritesList.innerHTML = '';
data.favorites.forEach((favorite) => {
let li = document.createElement('li');
li.textContent = favorite;
favoritesList.appendChild(li);
});
});
}
displayFavorites();
Create a background.js file to manage background tasks. For this simple example, we won't need any specific background functionality, but it's good practice to include this file for future enhancements.
// background.js
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ favorites: [] }, () => {
console.log('Favorites initialized.');
});
});
Create an icons directory inside your extension directory and add icon images of sizes 16x16, 48x48, and 128x128 pixels. You can create your own icons or use an icon generator.
Open Chrome and go to chrome://extensions/.
Enable "Developer mode" by toggling the switch in the top right corner.
Click "Load unpacked" and select your extension directory (favorites-extension).
Your extension should now appear in the list of installed extensions. Click on the extension icon in the toolbar to see your popup.
Click the "Save Current Page" button in your popup while browsing different websites. The URLs of your favorite websites should be listed in the popup.
Chrome extensions are a powerful way to enhance your browsing experience, and with the knowledge you've gained from this guide, you're well on your way to creating more complex and useful extensions. Keep experimenting and have fun!
Happy coding!