Hot Reloading for Chrome Extensions

Reload MV3 Chrome extensions and tabs when source files change.

4.4k|1.3k|Updated Jan 23, 2012

Search Tags:#development #SSE #hot-reload #watcher #MV3 #Chrome extensions

Ready to run

npx skills add https://github.com/paulirish/dotfiles --skill hot-reloading-for-chrome-extensions

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Hot Reloading for Chrome Extensions
Source: https://github.com/paulirish/dotfiles/tree/main/agents/paulirish-skills/skills/hot-reload
Command: npx skills add https://github.com/paulirish/dotfiles --skill hot-reloading-for-chrome-extensions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

Zero-dependency watcher server and client script that refreshes extension tabs and reloads the extension on file changes.
Works during MV3 extension development, refreshing background service workers, options pages, and content scripts as you code.
Simple setup: copy files from the skill's examples/ into your project, update the background script to import the client, and add necessary manifest permissions.

Quick Start

Copy examples/hot-reload-server.mjs and examples/hot-reload-client.js into your project root. Update your extension background service worker to importScripts('hot-reload-client.js') as the first line. Add permissions to manifest.json: "management" and "tabs". Run the watcher server with node hot-reload-server.mjs.

Frequently Asked Questions about Hot Reloading for Chrome Extensions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I automatically reload a Chrome extension when files change?▼

Hot reloading MV3 Chrome extensions uses a watcher server to monitor source files and a client script injected into the background service worker to trigger automatic extension and tab refreshes whenever changes are detected.

How does hot reloading work for MV3 background service workers?▼

Hot reloading for MV3 service workers works by injecting a client script via importScripts as the first line of the background worker, which receives reload signals from the watcher server and refreshes open extension tabs before reloading the extension itself.

Can I set up hot reloading for Chrome extensions without adding dependencies?▼

Yes, this hot reloading setup is zero-dependency and Node-based. You only need to copy the provided server and client scripts into your project root, update your background worker to import the client, and run the watcher server with Node.

Do I need specific manifest permissions to enable hot reloading in Chrome extensions?▼

Yes, hot reloading requires adding the management and tabs permissions to your manifest.json file. These permissions allow the client script to refresh open extension tabs and reload the extension automatically during development.

Does hot reloading refresh content scripts and options pages in MV3 extensions?▼

Yes, the hot reloading system targets the full MV3 extension development workflow, refreshing background service workers, options pages, and content scripts by reloading open extension tabs and then reloading the extension on source file changes.