Learn the basics of Chrome extension by building your first Hello World extension:

Browser Extension

  • Browser extensions are small software programs that extend the functionality of the web browser.
  • They allow developers to add new features, modify existing behaviors, and integrate custom user interfaces into the browser.
  • You can build extensions using HTML, CSS and Javascript. Also using frameworks like Plasmo

Components

Understanding extension components is crucial for developing Chrome extensions. Here are some key terms:

Manifest

  • The extension’s manifest is the only required file that must have a specific file name: manifest.json.
  • It also has to be located in the extension’s root directory.
  • The manifest records important metadata, defines resources, declares permissions, and identifies which files to run in the background and on the page.
  • Manifest V3 is the latest version of the chrome extensions platform.
  • A small HTML file that appears as a popup when the user clicks on the extension’s icon in the browser toolbar.
  • Popups are commonly used to provide quick access to extension functionality or display information.

Content scripts

  • Content scripts run JavaScript in the context of a web page.
  • They can read and modify the DOM, access web page data, and communicate with the background script.
  • Content scripts are specified in the manifest file and injected into matching web pages.

Service workers

  • A service workers runs in the background and handles browser events, like removing a bookmark, or closing a tab.
  • They don’t have access to the DOM, but you can combine it with an offscreen document for this use case.

Options page

  • An HTML page provided by the extension where users can configure settings and preferences.
  • Options pages allow users to customize the behavior of the extension according to their preferences.

Hello World Extension

Let’s create a simple “Hello World” Chrome extension to get you started:

Build

  1. Open your code editor or text editor of choice and create a new directory for your extension. e.g., hello-world-extension.

  2. Create the manifest file (manifest.json) in the project directory with the following contents:

{
  "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "A simple Hello World Chrome extension",
  "action": {
    "default_popup": "popup.html"
  }
}

This manifest file specifies the extension’s name, version, and description. It also defines a browser action (toolbar icon) that will open a popup when clicked.

  1. Create the popup file (popup.html) in the project directory with the following contents:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        min-width: 200px;
        text-align: center;
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Load

  1. Load the extension in Chrome:
    • Open Google Chrome and navigate to chrome://extensions.
    • Enable “Developer mode” by toggling the switch in the top-right corner.
    • Click “Load unpacked” and select the hello-world-extension directory.

Test

  1. Test the extension:
    • After loading the extension, you should see a new icon in the Chrome toolbar.
    • Click the icon, and the “Hello World!” popup should appear.

🎉 Congratulations! You’ve just created your first Chrome extension. 🎉

While this extension doesn’t do much, it demonstrates the basic structure and components required for a Chrome extension. You can further enhance the extension by adding background scripts, content scripts, or additional user interface elements to build more complex extensions.

The manifest.json file is where you’ll define and configure these components.

References