免责声明:我自己开发了这个扩展。

职员- Chrome Live扩展重新加载客户端

连接到与liverload兼容的服务器，每次保存时自动重新加载扩展。 额外的好处:在你的部分有一点额外的工作，你也可以自动重新加载你的扩展改变的网页。

大多数网页开发人员使用带有某种监控器的构建系统，该系统自动构建文件并重新启动服务器并重新加载网站。

开发扩展不应该有那么大的不同。Clerc为Chrome开发者带来了同样的自动化。使用liverload服务器设置一个构建系统，Clerc将侦听重新加载事件以刷新扩展。

唯一的大问题是对manifest.json的更改。清单中的任何微小的拼写错误都可能导致进一步的重新加载尝试失败，并且您将被卡住卸载/重新安装扩展以再次加载更改。

在重新加载之后，Clerc将完整的重新加载消息转发给您的扩展，因此您可以选择使用提供的消息来触发进一步的刷新步骤。

BROWSER-SYNC

使用惊人的浏览器同步

更新浏览器(任何)当源代码改变(HTML, CSS，图像等) 支持Windows、MacOS和Linux操作系统 您甚至可以使用移动设备观看您的代码更新(实时)

MacOS上的安装(查看其他OS上的安装帮助)

安装NVM，这样您就可以尝试任何Node版本

brew install nvm             # install a Node version manager
nvm ls-remote                # list available Node versions
nvm install v10.13.0         # install one of them
npm install -g browser-sync  # install Browser-Sync

如何使用浏览器同步静态网站

让我们来看两个例子:

browser-sync start --server --files . --host YOUR_IP_HERE --port 9000

browser-sync start --server --files $(ack --type-add=web:ext:htm,html,xhtml,js,css --web -f | tr \\n \ ) --host $(ipconfig getifaddr en0) --port 9000

——server选项允许您在终端的任何地方运行本地服务器，而——files选项允许您指定将跟踪哪些文件的更改。我更喜欢对跟踪的文件更具体，因此在第二个示例中，我使用ack来列出特定的文件扩展名(重要的是这些文件没有带空格的文件名)，并使用useipconfig来查找我在MacOS上的当前IP。

如何使用浏览器同步动态网站

如果您正在使用PHP、Rails等，您已经有一个正在运行的服务器，但是当您更改代码时它不会自动刷新。所以你需要使用——proxy开关让browser-sync知道该服务器的主机在哪里。

browser-sync start --files $(ack --type-add=rails:ext:rb,erb,js,css,sass,scss,coffee --rails -f | tr \\n \ ) --proxy 192.168.33.12:3000 --host $(ipconfig getifaddr en0) --port 9000 --no-notify --no-open

在上面的例子中，我已经在浏览器的192.168.33.12:3000上运行了一个Rails应用程序。它实际上运行在使用Vagrant盒子的虚拟机上，但我可以使用该主机上的端口3000访问虚拟机。我喜欢——no-notify来停止浏览器同步，每次我修改代码时，都会在浏览器上发送通知警报，——no-open来停止浏览器同步行为，当服务器启动时立即加载浏览器选项卡。

重要提示:如果您正在使用Rails，请避免在开发中使用Turbolinks，否则在使用——proxy选项时将无法单击链接。

希望对别人有用。我尝试了许多技巧来刷新浏览器(甚至是我之前使用AlfredApp提交的关于这个StackOverflow问题的旧帖子)，但这是真正的方法;没有更多的黑客，它只是流动。

CREDIT:用一个命令启动本地实时重载web服务器

这正是AutoIt等软件或替代软件大放异彩的地方。关键是编写一个模拟当前测试阶段的脚本。至少要习惯使用其中的一种，因为许多技术都没有明确的工作流程/测试路径。

Run("c:\Program Files (x86)\Google\Chrome\Application\chrome.exe")
WinWaitActive("New Tab - Google Chrome")
Send("^l")
Send("chrome://extensions{ENTER}")
WinWaitActive("Extensions - Google Chrome")
Send("{TAB}{TAB}{TAB}{TAB}{TAB}{TAB}")
Send("{ENTER}")
WinWaitActive("Extensions - Google Chrome")
Send("{TAB}{TAB}")
Send("{ENTER}")
WinWaitActive("Developer Tools")
Send("^`")

显然，您更改了代码以适应您的测试/迭代需求。确保标签点击是真的锚标签是在chrome://扩展站点。您还可以使用相对于窗口的鼠标移动和其他类似的宏。

我将以类似于下面的方式将脚本添加到Vim:

map <leader>A :w<CR>:!{input autoit loader exe here} "{input script location here}"<CR>

这意味着当我在Vim中，我按下ENTER上面的按钮(通常负责:|和\)，即领导按钮，并跟随一个大写的“a”，它保存并开始我的测试阶段脚本。

请确保填写{input…}节在上面的Vim/热键脚本适当。

许多编辑器允许你用热键做类似的事情。

可以在这里找到AutoIt的替代品。

Windows: AutoHotkey

Linux: xdotool, xbindkeys

Mac: Automator

我想一夜之间重新加载(更新)我的扩展，这是我在background.js中使用的:

var d = new Date();
var n = d.getHours();
var untilnight = (n == 0) ? 24*3600000 : (24-n)*3600000; 
// refresh after 24 hours if hour = 0 else
// refresh after 24-n hours (that will always be somewhere between 0 and 1 AM)
setTimeout(function() {
    location.reload();
}, untilnight);

问候, 彼得

苹果只

使用扩展Reloader:

使用打印稿

将你的观察者添加到你的项目中:yarn Add tsc-watch 向package.json添加脚本命令

...
  "scripts": {
    "dev": "tsc-watch --onSuccess \"open -a '/Applications/Google Chrome.app' 'http://reload.extensions'\""
  },
...

运行脚本yarn dev

使用JavaScript

将你的watcher添加到你的项目中:yarn Add watch-cli 向package.json添加脚本命令

...
  "scripts": {
    "dev": "watch -p \"**/*.js\" -c \"open -a '/Applications/Google Chrome.app' 'http://reload.extensions'\""
  },
...

运行脚本yarn dev

额外的好处:在Extensions Reloader选项中打开“reload current tab”，这样它就会在做出更改后重新加载:

感谢@GmonC和@Arik和一些空闲时间，我设法让它工作。我必须更改两个文件才能使其工作。

(1)为该应用程序安装LiveReload和Chrome扩展。 这将在文件更改时调用一些脚本。

打开<LiveReloadInstallDir>\ wrapped \backend\res\livereload.js

(3)将509行改为

This.window.location.href = "http://reload.extensions";

(4)现在安装另一个扩展Extensions Reloader，它有有用的链接处理程序，重新加载所有的开发扩展导航到“http://reload.extensions”

现在以这种方式更改扩展的background.min.js

if ((d.installType = = "发展")(&& d.enabled = = true) && (d.name != Reloader扩展”))

替换为

if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader")&&(d.name!="LiveReload"))

打开LiveReload应用程序，隐藏扩展重新加载按钮，并通过单击工具栏中的按钮激活LiveReload扩展，您现在将重新加载页面和每个文件更改扩展，同时使用所有其他好东西从LiveReload (css重新加载，图像重新加载等)

唯一不好的是，你将不得不重复在每次扩展更新上更改脚本的过程。为避免更新，请将扩展添加为未打包的扩展。

当我有更多的时间来处理这个时，我可能会创建一个扩展，消除对这两个扩展的需求。

在那之前，我正在做我的扩展Projext Axeman