How to Build a Google Chrome Extension: Step-by-Step Guide

How to Build a Google Chrome Extension: Step-by-Step Guide

A comprehensive guide to create Google Chrome extensions

ByteScrum Technologies's photo
ByteScrum Technologies
·

4 min read

Table of contents

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.

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.

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:

{
  "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:

<!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>

Step 4: Add Styles

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;
}

Step 5: Add JavaScript Functionality

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();

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.

// 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!

BrowserExtensionschrome extensionWeb DevelopmentGoogleJavaScriptCSSsoftware development