メニュー
Set up hot-reloading for chrome extensions. Provides a zero-dependency solution for automatic extension refreshing during development.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Extract distilled page content as Markdown using Chromium's on-device ML page content annotation.
Fetch a URL using Playwright and convert its content to Markdown.
Run a Google Search and capture the AI response/Overview.
Gerrit helpers for fetching unresolved comments and CL diffs.
Set up or debug npm Trusted Publishing (OIDC) from GitHub Actions. Handles permissions, metadata validation, and provenance.
Paul's modern stack conventions for new projects (pnpm, native node test, esbuild, buildless-types). Consult when starting a new project or repository.
| name | Hot Reloading for Chrome Extensions |
| description | Set up hot-reloading for chrome extensions. Provides a zero-dependency solution for automatic extension refreshing during development. |
| version | 0.1.0 |
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.
The system consists of a server-side watcher and a client-side listener:
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.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.To implement hot reloading in the current project, follow these steps:
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.mjsexamples/hot-reload-client.js -> hot-reload-client.jsUpdate 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:
importScripts('hot-reload-client.js');
Ensure the manifest.json includes management (to detect development mode) and tabs (to refresh open extension pages):
{
"permissions": [
"management",
"tabs"
]
}
Inform the user to start the watcher server in their terminal:
node hot-reload-server.mjs
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).