DEV Community

Prajwol Shrestha
Prajwol Shrestha

Posted on

Building a Chrome Extension: From Idea to Automated Release

#webdev #extensions #automation #githubactions

Chrome extensions are one of the fastest ways to ship useful software.
They’re lightweight, powerful, and force you to think in clear boundaries.

This article walks through how to build a Chrome extension using modern tooling, and how to automate versioning and releases using GitHub Actions.

What We’re Building

We’ll build a simple Chrome extension with:

  • A content script that interacts with web pages
  • A background script that handles logic and coordination
  • A popup UI for user interaction
  • Automated build, versioning, and GitHub releases

Key Components

Manifest

  • Defines metadata, permissions, and entry points.

Content Script

  • Runs in the context of a web page.
  • Can read and manipulate the DOM.

Background Script

  • Runs independently of pages.
  • Handles state, messaging, and lifecycle events.

Popup UI

  • A short-lived interface shown when the extension icon is clicked.

Messaging Model

Chrome extensions are event-driven.
Components never directly access each other.

  • Popup -> sends user intent
  • Background -> coordinates logic
  • Content Script -> affects the page

Chrome extension components

Distribution Strategies

Chrome extensions are commonly distributed using one of the following approaches, depending on the stage of the project.

Chrome Web Store (Public & Auto-Updating)

For public distribution, Chrome extensions can be published to the Chrome Web Store.

  • Requires a one-time $5 USD developer registration fee
  • Enables automatic updates
  • Makes the extension discoverable to non-technical users

GitHub Releases (Free & Flexible)

Users install the extension by downloading the release archive and loading it manually in Chrome.
Using GitHub Actions, releases can be fully automated:

  • Versioned ZIP artifacts
  • Consistent builds
  • No review or approval process
  • No cost

Auto Scroll Extension

As a practical example, I built a Chrome auto-scroller extension and set it up with a fully automated release pipeline using GitHub Actions.
The project includes:

  • A content script that controls page scrolling
  • A popup UI for user interaction
  • A background script for coordination
  • Automated versioned releases on every Git tag

Source code

https://github.com/Prajwol-Shrestha/auto-scroll-browser-extenstion

Release Automation Overview

In this project, releases are automated as follows:

  • A Git tag (e.g. v1.0.1) is pushed
  • GitHub Actions builds the extension
  • The build output is packaged into a ZIP
  • A GitHub Release is created automatically
  • The ZIP is attached as a release asset

Top comments (0)