mcpField
H
Hot Reloading for Chrome Extensions

Hot Reloading for Chrome Extensions

github.com/paulirish开发4.4k40 次安装4 周前更新
代码仓库

关于 Hot Reloading for Chrome Extensions

Hot Reloading for Chrome Extensions 是面向 Manifest V3 扩展开发者的零依赖热重载方案。Node.js 文件监视器通知扩展端监听器，在源码变更后刷新已打开的扩展标签页并重载扩展。

主要功能

  1. 01使用 Node.js 监视项目文件
  2. 02通过 SSE 发送重载信号
  3. 03刷新已打开的扩展标签页
  4. 04重载扩展运行时

适用场景

  1. 01开发扩展时自动执行重载
  2. 02编辑后刷新选项页和弹出页

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/hot-reloading-for-chrome-extensions确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

.claude/
settings.local.json
examples/
hot-reload-client.js
hot-reload-server.mjs

详细介绍

Chrome 扩展开发的热重载

为 Manifest V3（MV3）扩展提供一个零依赖的热重载系统。每当源文件发生变化时，该系统都会自动刷新扩展和标签页，无需在 chrome://extensions 中手动重新加载。

工作原理

该系统由服务端监视器和客户端监听器组成：

  1. 监视器（Node.js）：在开发者的计算机上运行。它使用原生 fs.watch 监视项目目录，并提供一个服务器发送事件（SSE）端点（/events）。检测到文件变化时，它会广播“reload”信号。
  2. 客户端（JavaScript）：注入扩展的后台服务工作线程。它使用 EventSource 连接到监视器服务。收到“reload”信号后，它会重新加载所有已打开的扩展标签页（选项页面、弹出窗口），然后调用 chrome.runtime.reload() 刷新扩展本身。

Agent 实现指南

要在当前项目中实现热重载，请按以下步骤操作：

1. 复制源文件

将技能 examples/ 目录中的以下文件复制到项目根目录或指定的 tools/ 目录：

  • examples/hot-reload-server.mjs -> hot-reload-server.mjs
  • examples/hot-reload-client.js -> hot-reload-client.js
2. 配置后台脚本

更新扩展的后台服务工作线程（例如 service-worker.js），以导入客户端脚本。此代码应位于文件首行：

importScripts('hot-reload-client.js');
3. 更新权限

确保 manifest.json 包含 management（用于检测开发模式）和 tabs（用于刷新已打开的扩展页面）：

{
  "permissions": [
    "management",
    "tabs"
  ]
}
4. 向用户提供执行说明

告知用户在终端中启动监视器服务：

node hot-reload-server.mjs

更多资源

示例

examples/ 中的可用配置和实现脚本：

  • examples/hot-reload-server.mjs - Node.js 监视器服务（需复制到项目中）。
  • examples/hot-reload-client.js - 扩展端客户端（需复制到项目中）。

评论

支持 Markdown