# How to Build a Google Chrome Extension: Step-by-Step Guide
Creating a Chrome extension can be an [enjoyable](https://bytescrum.com/) 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.
## Prerequisites
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.
## Step 1: Set Up Your Extension Directory
First, create a new directory on your computer to store your extension files. For this example, let's call it `favorites-extension`.
```plaintext
favorites-extension/
├── manifest.json
├── popup.html
├── popup.js
├── background.js
├── styles.css
└── icons/
├── icon16.png
├── icon48.png
└── icon128.png
```
## Step 2: Create the Manifest File
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:
```json
{
"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"
]
}
```
## Step 3: Create the Popup HTML
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:
```xml
Favorites Manager
Favorites Manager
```
## Step 4: Add Styles
Create a `styles.css` file to style your popup:
```css
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;
}
```
## Step 5: Add JavaScript Functionality
Create a `popup.js` file to add functionality to your popup:
```javascript
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();
```
## Step 6: Create a Background Script
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.
```javascript
// background.js
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ favorites: [] }, () => {
console.log('Favorites initialized.');
});
});
```
## Step 7: Add Icons
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.
## Step 8: Load Your Extension into Chrome
1. Open Chrome and go to `chrome://extensions/`.
2. Enable "Developer mode" by toggling the switch in the top right corner.
3. 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.
## Step 9: Test Your Extension
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.
Conclusion
Congratulations! You've successfully created a Chrome extension that allows users to save and manage their favorite websites. This is just the beginning. From here, you can expand the functionality by adding features such as deleting favorites, categorizing them, or syncing them with a server.
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!