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:
- The Watcher (Node.js): Runs on the developer's machine. It uses native
fs.watchto monitor the project directory and exposes a Server-Sent Events (SSE) endpoint (/events). When a file change is detected, it broadcasts a "reload" signal. - 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 callschrome.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:
More from paulirish/dotfiles
modern-css
Specialized knowledge for writing modern high-quality CSS. Trigger this skill when starting a new CSS project/file, when the user asks about new CSS features (e.g. Masonry, View Transitions, Container Queries, Scroll-driven animations), or requests refactoring of legacy styles to modern standards.
286code-simplifier
Installs and runs the Code Simplifier subagents for Gemini CLI (Code Reuse Reviewer, Code Quality Reviewer, and Efficiency Reviewer) to review and clean up code changes. Trigger this skill when the user asks to "simplify code", "run code simplifier", "review changes for quality", or "setup review agents".
9build-free-types
This skill should be used when the user asks to "set up types without a build step", "use vanilla JS with types", "configure erasable syntax", or mentions "JSDoc type checking". It provides instructions for modern type safety using JSDoc in browsers and native TypeScript execution in Node.js.
9buildless-types
Use when the user asks to "set up types without a build step", "use vanilla JS with types", "configure erasable syntax", or mentions "JSDoc type checking". It provides instructions for modern type safety using JSDoc in browsers and native TypeScript execution in Node.js.
8pauls-project-setup
Use this skill ALWAYS when the user asks to start a new project, initialize a repository, bootstrap a new app, or set up a codebase from scratch. It provides Paul's exact required modern stack conventions (pnpm, native node test, esbuild/vite, and buildless-types). If the user mentions "new project" or "setup", you must consult this skill before creating any files to ensure the correct architecture is used.
8npm-trusted-publishing
Use this skill to set up or debug npm "Trusted Publishing" (OIDC) from GitHub Actions. It handles OIDC permissions, Node.js version requirements, package.json metadata validation (specifically repository.url), and robust publish commands with provenance. Trigger this when the user mentions "npm OIDC", "trusted publishing", "publish to npm from github", or encounters 404/422 errors during npm publish in CI.
8