Skip to content

Getting Started with Chrome Extension Development

Setting Up Your Development Environment

Before diving into Chrome Extension development, you’ll need to set up a proper development environment. If you’re using ChromeOS, Crostini (the Linux container) is the best way to develop extensions.

To streamline your workflow, install the following tools:

These tools are not required but will make the process much easier. Once you have them installed, you can begin setting up your project.

Creating Your First Extension

A Chrome Extension requires a structured directory containing key files. Start by creating a new project directory:

mkdir my-first-extension
cd my-first-extension

Creating the Manifest File

Every Chrome Extension needs a manifest.json file, which defines metadata, permissions, and functionality. Inside your project directory, create a manifest.json file:

{
  "manifest_version": 3,
  "name": "My First Extension",
  "version": "1.0",
  "description": "An introductory Chrome Extension.",
  "permissions": [],
  "action": {
    "default_popup": "popup.html"
  }
}

This is a basic manifest file using Manifest V3, the latest standard for Chrome Extensions.

Adding a Popup UI

Create a popup.html file inside your project directory:

<!DOCTYPE html>
<html>
<head>
    <title>My First Extension</title>
</head>
<body>
    <h1>Hello, Chrome Extensions!</h1>
</body>
</html>

Loading the Extension in Chrome

Once your project structure is set up, you can load it into Chrome for testing:

  1. Open Chrome and navigate to chrome://extensions/.
  2. Enable Developer Mode (toggle in the upper right corner).
  3. Click Load unpacked and select your project directory.

Your extension should now appear in the extensions list, and you can interact with it by clicking its icon in the Chrome toolbar.

Next Steps

Now that you have a basic extension running, you can start exploring more advanced topics such as working with background scripts, content scripts, and integrating Chrome APIs. Continue to the next section where we will build on this foundation!