Skip to content

Chrome Extension Generator

The Chrome Extension Generator is an NPM package designed to simplify the process of creating Chrome Extensions. Whether you're a beginner or an experienced developer, this tool provides a structured way to generate a ready-to-use Chrome Extension with minimal setup. This tool was developed by the same author of this website and released as open-source.

The Chrome Extension Generator was designed to run on any operating system and develop extensions that will run on all operating systems that can run the desktop version of Google Chrome.

Features

  • Generates a fully functional Chrome Extension scaffold
  • Supports Manifest V3
  • Includes basic file structures such as manifest.json, background scripts, content scripts, and popup UI
  • Provides sample permissions and settings
  • Easily extendable for various Chrome Extension use cases

Prerequisites

Before installing the Chrome Extension Generator, you must have Node.js and NPM installed on your system. If you haven't installed Node.js yet, please follow this guide on setting up Node.js on ChromeOS.

Installation

To install the Chrome Extension Generator globally on your system, run:

sudo npm install -g chrome-extension-generator

Usage

Once installed, you can create a new Chrome Extension by running in the root of your project workspace:

chrome-extension-generator

This command will prompt you to enter details about your extension, such as:

  • Extension Name
  • Description
  • Version
  • Permissions Required
  • Background Script Options
  • Popup UI Support

After providing the necessary inputs, the tool will generate a structured extension project in your specified directory.

Generated Project Structure

A typical project created using the Chrome Extension Generator will have the following structure:

my-extension/
├── manifest.json
├── background.js
├── content.js
├── popup/
│   ├── popup.html
│   ├── popup.js
│   ├── popup.css
└── icons/
    ├── icon16.png
    ├── icon48.png
    ├── icon128.png
  • manifest.json: The core configuration file that defines the extension.
  • background.js: Runs in the background and listens for browser events.
  • content.js: Injected into web pages to interact with page content.
  • popup/: Contains the UI elements for the extension’s popup interface.
  • icons/: Stores the icons required for different Chrome UI sizes.

Running the Extension in Chrome

  1. Open Chrome and navigate to chrome://extensions/
  2. Enable Developer mode (top-right toggle)
  3. Click Load Unpacked
  4. Select the generated extension folder
  5. Your extension should now be available in the Chrome Extensions menu

Customization

After generating the extension, you can modify the files to customize its behavior. Here are some common changes:

  • Modify manifest.json to add more permissions, actions, or background events.
  • Edit content.js to interact with web pages.
  • Update popup.html for a custom user interface.

For more advanced functionality, consider adding:

  • Options pages
  • Service workers
  • Chrome storage API integration
  • Messaging between background and content scripts

Uninstalling

To remove the Chrome Extension Generator from your system:

sudo npm uninstall -g chrome-extension-generator

Source Code and Contributing

If you'd like to contribute to the Chrome Extension Generator, feel free to submit a pull request on the GitHub repository.