How to create your first Basic Chrome Extension

4 min readAug 17, 2024

Creating a Chrome extension can be fun and rewarding to enhance your browser’s functionality or share your ideas with others. Whether you want to build a productivity tool, enhance web experiences, or automate tasks, Chrome extensions can help you achieve your goals. In this guide, I’ll walk you through the process of creating a simple Chrome extension from scratch and provide some ideas to inspire your next project.

What is a Chrome Extension?

A Chrome extension is a small software program that customizes the browsing experience. It can modify the Chrome browser’s behavior or interface to improve functionality, provide new features, or integrate with other web services.

Step 1: Set Up Your Development Environment

Before you start, you’ll need a few tools:

Text Editor: You can use any text editor, but popular choices include Visual Studio Code, Sublime Text, or Atom.
Chrome Browser: Make sure you have the latest version of Chrome installed.
Basic Knowledge of HTML, CSS, and JavaScript: Chrome extensions are primarily built using these web technologies.

Step 2: Create the Manifest File

Every Chrome extension requires a manifest.json file. This file tells Chrome about your extension, such as its name, version, and the permissions it needs.

Create a new folder on your computer to store the extension files. Name it something like MyFirstExtension.
Inside the folder, create a file named manifest.json.
Add the following code to the manifest.json file:

{
  "manifest_version": 3,
  "name": "My First Chrome Extension",
  "version": "1.0",
  "author": "Rehmat Ali Sayany",
  "description": "A simple Chrome extension example.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "permissions": ["activeTab"]
}

Step 3: Create the User Interface

In this step, you’ll create the basic user interface for your extension. This includes the popup that appears when the extension’s icon is clicked.

Create an HTML file named popup.html in the same folder as manifest.json.
Add the following code to popup.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Extension</title>
  <style>
    body {
      width: 200px;
      font-family: Arial, sans-serif;
      padding: 10px;
    }
    button {
      width: 100%;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Welcome!</h1>
  <button id="clickMe">Click Me</button>
  <script src="popup.js"></script>
</body>
</html>

3. Add an icon for your extension. Create a folder named images inside your extension folder, and add three icons (icon16.png, icon48.png, icon128.png). You can create these using any image editor.

Step 4: Add Functionality with JavaScript

Now, let’s add some interactivity to your extension with JavaScript.

Create a JavaScript file named popup.js in the same folder.
Add the following code to popup.js:

document.getElementById('clickMe').addEventListener('click', function() {
  alert('Hello from your Chrome Extension!');
});

3. This script shows an alert when the button is clicked.

Step 5: Load Your Extension in Chrome

Now that you’ve created the files for your extension, it’s time to load it into Chrome.

Open Chrome and go to chrome://extensions/.
Enable Developer mode by toggling the switch in the upper right corner.
Click “Load unpacked” and select your extension’s folder.
Your extension should now appear in the list of installed extensions, and its icon will be visible in the Chrome toolbar.

Step 6: Test Your Extension

Click on your extension’s icon in the Chrome toolbar. You should see the popup you created, and when you click the button, the alert will appear.

Step 7: Improve and Expand Your Extension

This is just the beginning! Chrome extensions can do much more than display popups. You can:

Interact with Web Pages: Use content scripts to modify web pages.
Store Data: Use Chrome’s storage API to store user preferences.
Communicate with Servers: Use background scripts to handle long-running tasks or network requests.
Add More UI Components: Create options pages, context menus, and more.

Step 8: Publish Your Extension

Once you’re satisfied with your extension, you can publish it on the Chrome Web Store:

Create a Developer Account on the Chrome Web Store.
Package your extension by zipping your extension folder.
Upload your package to the Chrome Web Store and follow the prompts to publish.

Ideas for Chrome Extensions

If you’re looking for inspiration, here are some ideas for Chrome extensions you could create:

Web to API Navigator: Automatically generate and display a button that, when clicked, redirects you from a webpage to its corresponding API URL based on predefined patterns. This is perfect for developers and API testers who need to switch between front-end and back-end environments quickly.
Tab Manager for Productivity: An extension that organizes your tabs into groups based on context or user-defined categories, helping you stay focused and reducing tab clutter.
Page Annotator and Note-Taker: A tool that allows you to highlight text, add sticky notes, and save annotations directly on any webpage, making it perfect for researchers and students.
Auto Dark Mode: Force websites to display in dark mode, even if they don’t have a native dark mode, with customizable themes and scheduled activation.
Language Translator for Specific Text: Translate specific text selections on a webpage without affecting the rest of the content, ideal for language learners or anyone encountering multilingual content.
Screenshot with URL and Annotations: Capture screenshots with embedded URLs and timestamps, and annotate them directly within the extension, making documentation easier and more accurate.
Content Blocker for Distractions: Block specific types of content (e.g., social media feeds, comments sections) to help you stay focused during work or study sessions.

Conclusion

Building a Chrome extension is a great way to learn about web development and improve your browsing experience. By following these steps, you’ve created a basic Chrome extension that you can expand and customize as you wish. With the additional ideas provided, you can brainstorm and develop more advanced or niche extensions that cater to your needs or the needs of others. The possibilities are endless, so don’t hesitate to experiment and explore more advanced features. Happy coding!