// This skill should be used when the user asks to "setup hot reload", "add hot reloading to chrome extension", "watch extension files", "auto reload extension", or mentions "manifest v3 hot reload". Provides a zero-dependency solution for automatic extension refreshing during development.
| name | Hot Reloading for Chrome Extensions |
| description | This skill should be used when the user asks to "setup hot reload", "add hot reloading to chrome extension", "watch extension files", "auto reload extension", or mentions "manifest v3 hot reload". 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).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.
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".
Expert guide for defining, creating, and invoking custom subagents in Gemini CLI. Trigger this skill when the user wants to create a new specialist agent, define a custom subagent, or learn how to delegate tasks to specialist agents within the Gemini CLI environment.
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.
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.