hot-reload_skill

Overview

This skill provides a zero-dependency hot-reloading solution for Chrome Manifest V3 extensions to speed up development. It combines a lightweight Node.js file watcher that emits Server-Sent Events with a small client injected into the extension service worker. When source files change, open extension pages are refreshed and the extension is reloaded automatically.

How this skill works

A small Node.js watcher uses native fs.watch to monitor your extension directory and exposes an /events SSE endpoint that broadcasts a "reload" message on file changes. A client script imported into the background service worker creates an EventSource connection to that endpoint. On receiving a reload signal the client refreshes any open extension tabs (options, popups) and calls chrome.runtime.reload() to reload the extension.

When to use it

• During active extension development to eliminate manual reloads in chrome://extensions
• When working with Manifest V3 service workers and frequent UI or script changes
• If you want a zero-dependency, local solution without native build tools or browser extensions
• When you need fast edit-refresh cycles for options pages, popups, or background logic

Best practices

• Copy the provided hot-reload-server.mjs and hot-reload-client.js into a tools or project root folder
• Import the client as the first line of your service worker via importScripts('hot-reload-client.js')
• Add minimal permissions: include management and tabs in manifest.json only during development
• Run the watcher locally (node hot-reload-server.mjs) and avoid shipping the server or client in production builds
• Keep the watcher outside source bundles and exclude it from packaging or CI deploys

Example use cases

• Local MV3 extension where options page changes should appear instantly without manual reloads
• Iterating on popup UI and background logic with immediate reload on save
• Teams who want a simple, toolchain-free hot reload during development on any machine with Node installed
• Debugging race conditions in service worker startup by rapidly reloading after edits