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: