# Hot Reloading for Chrome Extensions

> Set up hot-reloading for chrome extensions. Provides a zero-dependency solution for automatic extension refreshing during development.

- Skill: `paulirish/hot-reloading-for-chrome-extensions` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds add paulirish/hot-reloading-for-chrome-extensions`
- Raw SKILL.md: https://api.skillmd.com/api/skills/paulirish/hot-reloading-for-chrome-extensions/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: paulirish (https://skillmd.com/u/paulirish)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/paulirish/hot-reloading-for-chrome-extensions

---


# Hot Reloading for Chrome Extension Development

Provide a zero-dependency hot-reloading system for Manifest V3 (MV3) extensions. This system enables automatic extension and tab refreshing whenever source files change, eliminating the need for manual reloads in `chrome://extensions`.

## How It Works

The system consists of a server-side watcher and a client-side listener:
1.  **The Watcher (Node.js)**: Runs on the developer's machine. It uses native `fs.watch` to monitor the project directory and exposes a Server-Sent Events (SSE) endpoint (`/events`). When a file change is detected, it broadcasts a "reload" signal.
2.  **The Client (JavaScript)**: Injected into the extension's background service worker. It connects to the watcher server using `EventSource`. Upon receiving a "reload" signal, it reloads any open extension tabs (options pages, popups) and then calls `chrome.runtime.reload()` to refresh the extension itself.

## Implementation Guide for the Agent

To implement hot reloading in the current project, follow these steps:

### 1. Copy the Source Files

Copy the following files from the skill's `examples/` directory into the project root or a designated `tools/` directory:

-   `examples/hot-reload-server.mjs` -> `hot-reload-server.mjs`
-   `examples/hot-reload-client.js` -> `hot-reload-client.js`

### 2. Configure the Background Script

Update the extension's background service worker (e.g., `service-worker.js`) to import the client script. This should be the first line in the file:

```javascript
importScripts('hot-reload-client.js');
```

### 3. Update Permissions

Ensure the `manifest.json` includes `management` (to detect development mode) and `tabs` (to refresh open extension pages):

```json
{
  "permissions": [
    "management",
    "tabs"
  ]
}
```

### 4. Provide Execution Instructions to the User

Inform the user to start the watcher server in their terminal:

```bash
node hot-reload-server.mjs
```

## Additional Resources

### Examples
Working configuration and implementation scripts in `examples/`:
- **`examples/hot-reload-server.mjs`** - The Node.js watcher server (to be copied to the project).
- **`examples/hot-reload-client.js`** - The extension-side client (to be copied to the project).