Back to blog

Monday, March 10, 2025

Building a Simple Chrome Extension for Beginners

Posted by

JB

JB Web Developer

@jbwebdeveloper

cover

Building a Product Capture Chrome Extension for Beginners

This beginner-friendly guide will walk you through creating a simple Chrome extension that allows users to save product details from e-commerce websites. The extension will display a popup form where users can manually enter product information and submit it to an API.

Table of Contents

  1. Chrome Extension Basics
  2. File Structure
  3. Creating the Extension Files
  4. Testing the Extension
  5. Publishing to Chrome Web Store
  6. Summary

Chrome Extension Basics

Chrome extensions are packages of files that customize the Chrome browsing experience. They're built using web technologies like HTML, CSS, and JavaScript.

For beginners, the most important components are:

  • Manifest File: Provides essential information about the extension
  • Popup: The UI that appears when clicking the extension icon
  • Icons: Various sized icons for the extension

File Structure

For our simple Product Capture extension, we'll need the following files:

product-capture-extension/
├── manifest.json      # Extension configuration
├── popup.html         # Popup structure
├── popup.js           # Popup functionality
├── styles.css         # Popup styling
└── icons/             # Extension icons
    ├── icon16.png     # 16×16 icon
    ├── icon48.png     # 48×48 icon
    └── icon128.png    # 128×128 icon

Creating the Extension Files

manifest.json

The manifest.json file provides Chrome with essential information about your extension.

{
  "manifest_version": 3,
  "name": "Product Capture",
  "version": "1.0",
  "description": "Capture product details from e-commerce websites",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "permissions": ["activeTab"]
}

This simplified manifest includes:

  • Basic extension information (name, version, description)
  • Icon paths for different sizes
  • Action configuration for the popup
  • Minimal permissions (just activeTab)

popup.html

This file defines the structure of the popup that appears when users click the extension icon.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Product Capture</title>
  </head>
  <body>
    <div class="container">
      <div id="capture-form" class="card">
        <div class="card-header">
          <h2>Capture Product</h2>
          <p>Save details from this product page</p>
        </div>

        <form id="product-form">
          <div class="form-group">
            <label for="product-url">URL</label>
            <input type="text" id="product-url" />
          </div>

          <div class="form-group">
            <label for="product-title">Title</label>
            <input type="text" id="product-title" />
          </div>

          <div class="form-group">
            <label for="product-price">Price</label>
            <input type="text" id="product-price" />
          </div>

          <div class="form-group">
            <label for="product-image">Image URL</label>
            <input type="text" id="product-image" />
          </div>

          <button type="submit" class="submit-btn">Save Product</button>
        </form>
      </div>

      <div id="success-screen" class="card hidden">
        <div class="success-content">
          <div class="success-icon">✓</div>
          <h2>Product Saved!</h2>
          <p>The product details have been successfully captured and sent.</p>
          <button id="capture-another" class="submit-btn">
            Capture Another
          </button>
        </div>
      </div>
    </div>

    <script src="popup.js"></script>
  </body>
</html>

styles.css

This file styles the popup to make it visually appealing.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: #f5f5f5;
}

.container {
  width: 350px;
  padding: 0;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  background: linear-gradient(135deg, #4a90e2, #63b3ed);
  color: white;
  padding: 15px 20px;
}

.card-header h2 {
  margin-bottom: 5px;
  font-size: 20px;
}

.card-header p {
  opacity: 0.9;
  font-size: 14px;
}

form {
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #555;
  font-size: 14px;
  font-weight: 500;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s;
}

.submit-btn:hover {
  background: #3a7bc8;
}

.hidden {
  display: none;
}

.success-content {
  padding: 30px 20px;
  text-align: center;
}

.success-icon {
  width: 60px;
  height: 60px;
  background: #4bb543;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: white;
  font-size: 30px;
  font-weight: bold;
}

.success-content h2 {
  margin-bottom: 10px;
  color: #333;
}

.success-content p {
  color: #666;
  margin-bottom: 20px;
}

popup.js

This JavaScript file controls the behavior of the popup, including form handling and API submission.

document.addEventListener("DOMContentLoaded", function () {
  const productForm = document.getElementById("product-form");
  const captureForm = document.getElementById("capture-form");
  const successScreen = document.getElementById("success-screen");
  const captureAnotherBtn = document.getElementById("capture-another");

  // Get current tab URL to pre-fill the URL field
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    const activeTab = tabs[0];
    document.getElementById("product-url").value = activeTab.url;
  });

  // Handle form submission
  productForm.addEventListener("submit", async function (e) {
    e.preventDefault();

    const productData = {
      url: document.getElementById("product-url").value,
      title: document.getElementById("product-title").value,
      price: document.getElementById("product-price").value,
      imageUrl: document.getElementById("product-image").value,
    };

    try {
      // Send data to API using async/await
      await sendToAPI(productData);

      // Show success screen
      captureForm.classList.add("hidden");
      successScreen.classList.remove("hidden");
    } catch (error) {
      console.error("Error saving product:", error);
      alert("Error saving product. Please try again.");
    }
  });

  // Handle "Capture Another" button
  captureAnotherBtn.addEventListener("click", function () {
    successScreen.classList.add("hidden");
    captureForm.classList.remove("hidden");

    // Clear form fields except URL
    document.getElementById("product-title").value = "";
    document.getElementById("product-price").value = "";
    document.getElementById("product-image").value = "";
  });

  // Function to send data to API using async/await
  async function sendToAPI(data) {
    // Replace with your actual API endpoint
    const apiUrl = "https://your-api-endpoint.com/products";

    const response = await fetch(apiUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    return response.json();
  }
});

Icons

You'll need three icon sizes for your extension:

  • icon16.png (16×16 pixels)
  • icon48.png (48×48 pixels)
  • icon128.png (128×128 pixels)

You can create these using:

  • Free online tools like Canva or Figma
  • Image editing software like GIMP or Photoshop
  • Or download and customize free icons from sites like Flaticon or IconFinder

Testing the Extension

To test your extension:

  1. Create all the files described above

  2. Open Chrome and navigate to Extensions

    • Type chrome://extensions/ in your address bar
    • Enable "Developer mode" using the toggle in the top-right corner

  3. Load your extension

    • Click the "Load unpacked" button
    • Select your extension folder
    • Your extension should appear in the list

  4. Test the functionality

    • Go to any e-commerce product page
    • Click your extension icon
    • Fill in the product details form
    • Submit the form and verify the success screen appears

  5. Debug if needed

    • If something doesn't work, right-click on your extension popup and select "Inspect"
    • Check the Console tab for any error messages

Publishing to Chrome Web Store

When you're ready to share your extension with others:

  1. Prepare your extension

    • Make sure all files are working correctly
    • Create a ZIP file of your entire extension folder

  2. Create a Developer Account

  3. Upload your extension

    • Click "New Item" in the dashboard
    • Upload your ZIP file
    • Fill in the required information:
      • Detailed description
      • At least one screenshot (1280×800 or 640×400 pixels)
      • Store icon (128×128 pixels)
      • Select category
      • Language
      • Privacy practices

  4. Submit for review

    • The Chrome team will review your extension
    • This typically takes a few business days
    • If approved, your extension will be published to the Chrome Web Store

Tips for Beginners

  • Start Small: This simple extension is a great starting point
  • Customize: Try changing colors or adding new fields
  • Learn More: Once comfortable, explore background scripts and content scripts
  • Stay Updated: Chrome extensions evolve; check the Chrome Developer Documentation regularly

Congratulations! You've created your first Chrome extension. As you become more comfortable, you can add advanced features like automatic data extraction from web pages.

Summary

What You'll Learn

In this tutorial, you'll create a Chrome extension that:

  • Shows a popup with a form when clicked
  • Pre-fills the current page URL
  • Allows users to enter product details (title, price, image URL)
  • Sends the data to an API endpoint
  • Shows a success message after submission

Files You'll Need to Create

  • manifest.json - Configuration file for the extension
  • popup.html - The popup UI that appears when clicking the extension icon
  • styles.css - CSS styles for the popup
  • popup.js - JavaScript to handle form submission and API calls
  • Icons (16px, 48px, and 128px)

Step 1: Setting Up Your Project

  • Create a new folder called product-capture-extension
  • Inside this folder, create the files mentioned above
  • Create an icons folder for your extension icons

Step 2: Create the Files

  • Copy the code from the provided artifact into your files
  • Each file has been simplified to be beginner-friendly.

Key Points to Note:

  • The manifest.json only requests the minimal permissions needed (activeTab)
  • The popup.html contains a simple form with fields for URL, title, price, and image URL
  • The popup.js automatically fills in the current tab's URL and handles form submission
  • We're using async/await for the API call to keep the code clean and modern

Step 3: Create Icons

You'll need three icon sizes:

  • 16×16 pixels (small icon)
  • 48×48 pixels (medium icon)
  • 128×128 pixels (large icon)

You can use design tools like Canva, Figma, or even simple paint programs to create these icons.

Step 4: Testing Your Extension

  • Open Chrome and navigate to chrome://extensions/
  • Enable Developer mode using the toggle in the top-right corner
  • Click Load unpacked and select your extension folder
  • Your extension should now appear in your browser toolbar
  • Go to any website and click your extension icon to test it
  • Fill in the form and test the submission

Step 5: Debugging Tips

If something doesn't work:

  • Right-click on your extension popup and select "Inspect"
  • Check the Console tab for any error messages
  • Make sure all your files are in the correct location
  • Verify that your API endpoint URL is correct

Step 6: Publishing to Chrome Web Store

When you're ready to share your extension:

  • Create a ZIP file of your extension folder
  • Sign up for a Chrome Web Store Developer account ($5 one-time fee)
  • Upload your extension and provide screenshots, descriptions, etc.
  • Submit for review

Customization Ideas

Once you've got the basic extension working, you can:

  • Change the color scheme by modifying the CSS
  • Add more form fields for additional product details
  • Improve form validation
  • Add a preview of the product image when a URL is entered

This extension is a great starting point for learning Chrome extension development. As you become more comfortable, you can explore more advanced features like content scripts for automatically extracting data from web pages.