如何自动重新加载我正在开发的 Chrome 扩展程序？

Posted 2023-02-19

【中文标题】如何自动重新加载我正在开发的 Chrome 扩展程序？

【英文标题】：How do I auto-reload a Chrome extension I'm developing?

【发布时间】：2011-02-27 03:23:54

【问题描述】：

我希望每次在扩展文件夹中保存文件时都重新加载我的 chrome 扩展，而不必在 chrome://extensions/ 中明确单击“重新加载”。这可能吗？

编辑：我知道我可以 update the interval Chrome 重新加载扩展程序，这是一个中途解决方案，但我宁愿让我的编辑器（emacs 或 textmate）触发保存重新加载或询问Chrome 来监控目录的变化。

【问题讨论】：

从 chrome://flags/#enable-apps-devtool-app 启用的 ui 触发重新加载似乎更快

我已经 fork LiveJS 允许实时重新加载打包的应用程序。只需将文件包含在您的应用中，每次保存文件时，应用都会自动重新加载。

你的 LiveJS 分支在哪里，@Oz Ramos？

啊，我明白了：您的“LiveJS”链接实际上是链接到您的 fork，而不是 LiveJS。

这没有回答所问的问题，但我想提一下，在我意识到我可以通过点击轻松重新加载扩展之后，我不再想要这个（或任何其他扩展加载辅助扩展）扩展程序的后台窗口中的 ctrl-R 或 cmd-R（取决于操作系统）。我发现这比我尝试过的任何其他方法都更适合我的工作流程，并且它还避免了当文件处于不一致状态时自动重新加载的问题。

【参考方案1】：

您可以在 Chrome 中使用 "Extensions Reloader"：

使用扩展程序的工具栏按钮或浏览到“http://reload.extensions”重新加载所有解压缩的扩展程序

如果您曾经开发过 Chrome 扩展程序，您可能想要 在没有 需要通过扩展页面。

“Extensions Reloader”允许你重新加载所有解压的扩展 使用两种方式：

1 - 扩展的工具栏按钮。

2 - 浏览到“http://reload.extensions”。

工具栏图标将通过单击重新加载解压后的扩展。

“通过浏览重新加载”旨在使重新加载过程自动化 使用“构建后”脚本 - 只需添加浏览到 "http://reload.extensions" 使用 Chrome 到你的脚本，你会 有一个刷新的 Chrome 窗口。

更新：自 2015 年 1 月 14 日起，该扩展程序已开源，available on GitHub。

【讨论】：

这是迄今为止最好的解决方案，但它仍然不能让我每次修改它正在使用的文件时都轻松更新扩展名，这是我最理想的样子。

谢谢。想提一下我使用 phpStorm 并且我添加了一个工具栏按钮，该按钮使用“reload.extensions”url 调用 chrome.exe。每当我想测试代码时，我都会按下该按钮，Chrome 会弹出更新的插件。

哇，我刚刚设法让gruntjs 使用此插件，方法是在文件被修改时使用grunt-open 打开http://reload.extensions。它现在的行为与 livereload 完全一样，但是每次我修改一个指定的插件文件时都会打开一个烦人的 chrome 窗口：P。谢谢！

@GabLeRoux 我来这里只是为了看看是否有人已经这样做了。它就像一个魅力。

@AlexanderMills 很遗憾，如果不每次都打开一个新标签，我就无法做到这一点。如果你找到更好的解决方案。至少，可以使用github.com/arikw/chrome-extensions-reloader

重新加载插件

【参考方案2】：

更新：我添加了一个选项页面，这样您就不必再手动查找和编辑扩展程序的 ID。 CRX 和源代码在：https://github.com/Rob--W/Chrome-Extension-Reloader 更新 2：添加了快捷方式（请参阅我在 Github 上的存储库）。_{包含基本功能的原始代码如下所示。}

---

创建一个扩展，并结合chrome.extension.management API 使用Browser Action 方法来重新加载解压后的扩展。

下面的代码向 Chrome 添加了一个按钮，点击后会重新加载一个扩展。

manifest.json

    "name": "Chrome Extension Reloader",
    "version": "1.0",
    "manifest_version": 2,
    "background": "scripts": ["bg.js"] ,
    "browser_action": 
        "default_icon": "icon48.png",
        "default_title": "Reload extension"
    ,
    "permissions": ["management"]

bg.js

var id = "<extension_id here>";
function reloadExtension(id) 
    chrome.management.setEnabled(id, false, function() 
        chrome.management.setEnabled(id, true);
    );

chrome.browserAction.onClicked.addListener(function(tab) 
    reloadExtension(id);
);

icon48.png：选择任何漂亮的 48x48 图标，例如：

【讨论】：

@trusktr Scott 的回答只会重新加载背景页面。但是，这两个答案可以组合在一起（Scotts answer + helper extension），以便在扩展的文件更改时自动重新加载扩展。但是我建议不要这样做，因为 devtools 在扩展重新加载时关闭。我经常摆弄一个测试扩展，并经常保存我的更改，即使语法不完整。如果启用了真正的自动重新加载，那会使我的扩展程序崩溃。

@RobW 好点。我经常在编写代码的过程中保存，所以代码肯定会破坏有问题的插件。

@Sudarshan You suggested 使用chrome.i18n.getMessage("@@extension_id")。但是，这会返回 current 扩展的 extensionID，这没有用，因为扩展无法使用 management API 重新加载自身（禁用后，它没有机会再次启用扩展)。

【参考方案3】：

在任何功能或事件中

chrome.runtime.reload();

将重新加载您的扩展程序 (docs)。您还需要更改 ma​​nifest.json 文件，添加：

...
"permissions": [ "management" , ...]
...

【讨论】：

对我来说，只有当我在 index.html 中的脚本中编写 chrome.runtime.reload() 时，此解决方案才有效，其中在清单文件中按以下方式指定：**“背景”： “页面”：“index.html”，**。在我的 content_script js 文件中，我无法访问此功能。我相信，这是为了安全考虑。

您的内容脚本无法与 chrome API 对话。为此，您需要use messages

当您致电chrome.runtime.reload() 时，实际发生了什么？是否刷新多个页面/标签？

我猜我们应该从后台脚本调用chrome.runtime.reload()

为我工作。谢谢

【参考方案4】：

我制作了一个简单的可嵌入脚本来进行热重载：

https://github.com/xpl/crx-hotreload

它监视扩展目录中的文件更改。当检测到更改时，它会重新加载扩展并刷新活动选项卡（以重新触发更新的内容脚本）。

通过检查文件的时间戳来工作 支持嵌套目录 在生产配置中自动禁用自身

【讨论】：

如果您正在寻找“gulp 风味”的解决方案，就是这样。

效果很好。您是否考虑过制作 npm 包？

@pixelearth 是的，为什么不呢。嗯，但那会是什么用例呢？你npm install crx-hotreload 进入扩展的目录，然后像"scripts": ["./node_modules/crx-hotreload/hot-reload.js"] 一样引用脚本？如果我错了，请纠正我。

@MilfordCubicle 我建议导出一个对象，该对象具有可以在 background.js 文件中调用的方法。所以import reloader from 'hot-reload' 然后在脚本 reloader.check()

答案需要更多的支持。与 Webpack --watch 结合使用也能很好地工作，因为你可以把它放在你的构建文件夹中，这样它只会在构建过程完成后更新。没有复杂的 Webpack 构建后命令插件。

【参考方案5】：

我正在使用快捷方式重新加载。我不想在保存文件时一直重新加载

所以我的做法是轻量级的，你可以把reload函数留在

ma​​nifest.json

    ...
    "background": 
        "scripts": [
            "src/bg/background.js"
        ],
        "persistent": true
    ,
    "commands": 
        "Ctrl+M": 
            "suggested_key": 
                "default": "Ctrl+M",
                "mac": "Command+M"
            ,
            "description": "Ctrl+M."
        
    ,
    ...

src/bg/background.js

chrome.commands.onCommand.addListener((shortcut) => 
    console.log('lets reload');
    console.log(shortcut);
    if(shortcut.includes("+M")) 
        chrome.runtime.reload();
    
)

现在在 chrome 浏览器中按 Ctrl + M 重新加载

【讨论】：

您也可以在 browserAction 中使用 reload 功能，以便在单击按钮时重新加载。 ***.com/questions/30427908/…

是的，您可以在任何地方加载 chrome.runtime.reload()。我使用：编辑器 > ctrl + s > alt + tab > ctrl + m。打开 background..js 控制台。速度很快，不用鼠标

这是完美的。只需在编辑器中修改代码（我的是 VS Code），Alt Tab 到任何 chrome 窗口（不需要后台控制台）和 Ctrl M。在开发带有 DOM 修改的 contentscript 时，它是 Alt Tab, Ctrl M, Ctrl R（重新加载 main world 页面） .

我认为这是所有解决方案中最简单和最棒的解决方案

【参考方案6】：

另一种解决方案是创建自定义 livereload 脚本（extension-reload.js）：

// Reload client for Chrome Apps & Extensions.
// The reload client has a compatibility with livereload.
// WARNING: only supports reload command.

var LIVERELOAD_HOST = 'localhost:';
var LIVERELOAD_PORT = 35729;
var connection = new WebSocket('ws://' + LIVERELOAD_HOST + LIVERELOAD_PORT + '/livereload');

connection.onerror = function (error) 
  console.log('reload connection got error:', error);
;

connection.onmessage = function (e) 
  if (e.data) 
    var data = JSON.parse(e.data);
    if (data && data.command === 'reload') 
      chrome.runtime.reload();
    
  
;

此脚本使用 websockets 连接到 livereload 服务器。然后，它将在来自 livereload 的重新加载消息时发出 chrome.runtime.reload() 调用。下一步是添加此脚本以在 manifest.json 中作为后台脚本运行，瞧！

注意：这不是我的解决方案。我只是发布它。我在Chrome Extension generator 的生成代码中找到了它（很棒的工具！）。我在这里发布这个是因为它可能会有所帮助。

【参考方案7】：

Chrome 扩展程序有一个 permission system 不允许它（SO had the same problem as you 中的某些人），因此要求他们“添加此功能”在 IMO 中不起作用。有一封来自 Chromium Extensions Google Groups 的邮件，其中 proposed solution (theory) 使用 chrome.extension.getViews()，但也不能保证能正常工作。

如果可以向manifest.json 添加一些Chrome 内部页面，例如chrome://extensions/，则可以创建一个与Reload 锚点交互的插件，并且可以使用@987654324 之类的外部程序@（一个 Firefox 插件 - 有一个使用 Ruby 和 WebSocket 的 Chrome version），您将实现您所需要的：

XRefresh 是一个浏览器插件 将刷新当前网页由于 选定文件夹中的文件更改。这 可以做实时页面 使用您喜欢的 HTML/CSS 进行编辑 编辑。

这是不可能的，但我认为您可以以不同的方式使用相同的概念。

您可以尝试找到第三方解决方案，而不是在看到文件中的修改后（我不知道 emacs 也不知道 Textmate，但在 Emacs 中，可以在“保存文件”操作中绑定应用程序调用)，只需单击特定应用程序的特定坐标：在这种情况下，它是您正在开发的扩展程序中的 Reload 锚点（您打开 Chrome 窗口只是为了重新加载）。

（很疯狂，但它可能会起作用）

【参考方案8】：

这是一个函数，您可以使用它来监视文件的更改，并在检测到更改时重新加载。它的工作原理是通过 AJAX 轮询它们，并通过 window.location.reload() 重新加载。我想你不应该在分发包中使用它。

function reloadOnChange(url, checkIntervalMS) 
    if (!window.__watchedFiles) 
        window.__watchedFiles = ;
    

    (function() 
        var self = arguments.callee;
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() 
            if (xhr.readyState == 4) 
                if (__watchedFiles[url] &&
                    __watchedFiles[url] != xhr.responseText) 
                    window.location.reload();
                 else 
                    __watchedFiles[url] = xhr.responseText
                    window.setTimeout(self, checkIntervalMS || 1000);
                
            
        ;

        xhr.open("GET", url, true);
        xhr.send();
    )();


reloadOnChange(chrome.extension.getURL('/myscript.js'));

【讨论】：

可以，加：reloadOnChange(chrome.extension.getURL('/manifest.json'));

我试过pastebin.com/mXbSPkeu，但扩展程序没有更新（清单条目、内容脚本、浏览器操作）（Ubuntu 11.10、Chrome 18）。 唯一更新的文件是背景页面（更改的console.log 消息确实会显示）。

"观察文件的变化，如果检测到变化则重新加载。"对于我的生活，我看不到这怎么知道文件已经改变？请帮助我理解，因为这听起来很棒！

oo 我现在看到了，它正在存储文件内容的副本并将缓存版本与 ajax live 版本进行比较......聪明！

【参考方案9】：

也许我参加聚会有点晚了，但我已经通过创建https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln 为我解决了这个问题

每当file.change 事件通过 websockets 传入时，它通过重新加载 chrome://extensions 页面来工作。

关于如何在扩展文件夹中的文件更改时发出 file.change 事件的基于 Gulp 的示例可在此处找到：https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

为什么要重新加载整个选项卡，而不是仅使用扩展管理 API 重新加载/重新启用扩展？当前再次禁用和启用扩展会导致任何打开的检查窗口（控制台日志等）关闭，我发现这在积极开发期间太烦人了。

【讨论】：

不错！我看到你有一个新的升级 reload() 函数的 PR。

【参考方案10】：

如果你使用 webpack 开发，有一个自动重新加载插件： https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');

plugins: [
    new ChromeExtensionReloader()
]

如果你不想修改 webpack.config.js，还附带一个 CLI 工具：

npx wcer

注意：（空）后台脚本是必需的，即使您不需要它，因为它会在那里注入重新加载代码。

【讨论】：

已存档:(指向github.com/rubenspgcavalcante/webpack-extension-reloader，它是跨浏览器，但仍在积极开发中:)

【参考方案11】：

Mozilla 的大佬们刚刚发布了一个新的https://github.com/mozilla/web-ext，您可以使用它来启动web-ext run --target chromium

【讨论】：

这对我来说是最好的解决方案。我也用它来签署我的扩展程序

【参考方案12】：

也许回答有点晚，但我认为crxreload 可能对你有用。这是我在开发时尝试在保存时重新加载工作流的结果。

【参考方案13】：

使用npm init在根目录下创建一个package.json，然后

npm install --save-dev gulp-open && npm install -g gulp

然后创建一个gulpfile.js

看起来像：

/* File: gulpfile.js */

// grab our gulp packages
var gulp  = require('gulp'),
    open = require('gulp-open');

// create a default task and just log a message
gulp.task('default', ['watch']);

// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() 
  gulp.watch('extensionData/userCode/**/*.js', ['uri']);
);

gulp.task('uri', function()
  gulp.src(__filename)
  .pipe(open(uri: "http://reload.extensions"));
);

这适用于我使用 CrossRider 进行开发，您可能会注意更改观看文件的路径，同时假设您已安装 npm 和节点。

【参考方案14】：

如果没有安装扩展，您的内容文件（如 html 和清单文件）是不可更改的，但我相信 javascript 文件是动态加载的，直到扩展被打包。

我知道这一点是因为我正在通过 Chrome 扩展 API 处理当前项目，并且似乎每次刷新页面时都会加载。

【讨论】：

我不知道你使用的是什么版本，但是作为 16.0.912.63 m，Chrome 会自动重新加载所有文件。清单除外。

@Zequez：文件没有为我重新加载。 :(

你是对的。我正在开发“选项”页面，该页面从文档中调用脚本，因此重新加载它们。 content_script 脚本不会重新加载 =/

【参考方案15】：

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

Clerc - for Chrome Live Extension Reloading Client

连接到与 LiveReload 兼容的服务器，以在每次保存时自动重新加载您的扩展程序。

奖励：您只需做一些额外的工作，您还可以自动重新加载您的扩展程序更改的网页。

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

开发扩展不需要那么不同。 Clerc 为 Chrome 开发人员带来了同样的自动化。使用 LiveReload 服务器设置构建系统，Clerc 将侦听重新加载事件以刷新您的扩展。

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

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

【参考方案16】：

TL;DR

创建一个 WebSocket 服务器，将消息分派到可以处理更新的后台脚本。如果你正在使用 webpack 并且不打算自己做，webpack-run-chrome-extension 可以提供帮助。

回答

您可以创建一个 WebSocket 服务器以作为 WebSocket 客户端与扩展通信（通过window 对象）。然后，扩展将通过将 WebSocket 服务器附加到某些侦听器机制（如 webpack devServer）来侦听文件更改。

文件有变化吗？将服务器设置为向扩展发送消息以请求更新（将 ws 消息广播给客户端）。然后扩展重新加载，回复“ok, reloaded”并继续监听新的变化。

计划

设置 WebSocket 服务器（发送更新请求） 找到可以告诉您文件何时更改的服务（webpack/其他捆绑软件） 发生更新时，向客户端发送消息请求更新 设置 WebSocket 客户端（接收更新请求） 重新加载扩展

如何

对于 WebSocket 服务器，使用ws。对于文件更改，请使用一些侦听器/挂钩（例如 webpack 的 watchRun 挂钩）。对于客户端部分，native WebSocket。然后扩展程序可以将 WebSocket 客户端附加到后台脚本上，以保持服务器（由 webpack 托管）和客户端（附加在扩展程序后台的脚本）之间的持续同步。

现在，要使扩展程序自行重新加载，您可以在每次上传请求消息来自服务器时在其中调用 chrome.runtime.reload()，甚至可以使用 @987654333 创建一个“重新加载程序扩展程序”来为您完成此操作@（在清单中需要 "permissions": [ "management" ]）。

在理想情况下，webpack-dev-server 之类的工具或任何其他 Web 服务器软件都可以原生支持 chrome-extension URL。在此之前，让服务器代理文件更改到您的扩展似乎是迄今为止的最佳选择。

可用的开源替代方案

如果你正在使用 webpack 并且不想自己创建它，我创建了 webpack-run-chrome-extension，这符合我上面的计划。

【参考方案17】：

感谢@GmonC 和@Arik 以及一些空闲时间，我设法完成了这项工作。我必须更改两个文件才能完成这项工作。

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

(2) 打开<LiveReloadInstallDir>\Bundled\backend\res\livereload.js

(3) 将#509 行改为

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

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

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

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

替换为

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

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

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

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

在那之前，我正在开发我的扩展程序Projext Axeman

【参考方案18】：

刚刚发现了一个基于grunt 的新项目，该项目提供引导、脚手架、一些自动预处理功能以及自动重新加载（无需交互）。

Bootstrap Your Chrome Extension 来自 Websecurify

【参考方案19】：

如果您有 Mac，¡最简单的方法是使用 Alfred App！

只需获取 Alfred App with Powerpack，然后添加下面链接中提供的工作流程并自定义您想要的热键（我喜欢使用 ⌘ + ⌥ + R）。就是这样。

现在，每次您使用热键时，Google Chrome 都会重新加载，无论您当时使用的是哪个应用程序。

如果您想使用其他浏览器，请在 Alfred Preferences Workflows 中打开 AppleScript 并将“Google Chrome”替换为“Firefox”、“Safari”……

我还将在此处显示 ReloadChrome.alfredworkflow 文件中使用的 /usr/bin/osascript 脚本的内容，以便您了解它在做什么。

tell application "Google Chrome"
  activate
  delay 0.5
  tell application "System Events" to keystroke "r" using command down
  delay 0.5
  tell application "System Events" to keystroke tab using command down
end tell

工作流文件是ReloadChrome.alfredworkflow。

【参考方案20】：

我想在一夜之间重新加载（更新）我的扩展，这是我在 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);

问候， 彼得

【参考方案21】：

我主要在 Firefox 中开发，web-ext run 在文件更改后自动重新加载扩展。然后，一旦准备就绪，我会在 Chrome 中进行最后一轮测试，以确保没有任何问题没有出现在 Firefox 中。

如果您想主要在 Chrome 中进行开发，并且不想安装任何第 3 方扩展程序，那么另一种选择是在扩展程序的文件夹中创建一个 test.html 文件，并添加一堆 SSCCE's给它。然后该文件使用普通的<script> 标签来注入扩展脚本。

您可以将其用于 95% 的测试，然后在您想在实时站点上对其进行测试时手动重新加载扩展程序。

这并不能完全重现扩展程序运行的环境，但对于许多简单的事情来说已经足够了。

【讨论】：

您现在也可以在 chromium 中运行：“web-ext run -t chromium”

【参考方案22】：

我已经分叉了LiveJS 以允许实时重新加载打包的应用程序。只需将文件包含在您的应用中，每次保存文件时，应用都会自动重新加载。

【参考方案23】：

如文档中所述：以下命令行将重新加载应用程序

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --load-and-launch-app=[path to the app ]

所以我刚刚创建了一个 shell 脚本并从 gulp 中调用了该文件。超级简单：

var exec = require('child_process').exec;



gulp.task('reload-chrome-build',function(cb)

console.log("reload");

var cmd="./reloadchrome.sh"

exec(cmd,function (err, stdout, stderr) 
    console.log("done: "+stdout);

    cb(err);
    
););

在脚本上运行必要的监视命令，并在需要时调用重新加载任务。干净，简单。

【参考方案24】：

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

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

显然，您更改代码以适应您的测试/迭代需求。确保选项卡点击与 chrome://extensions 站点中锚标记的位置一致。您还可以使用相对于窗口的鼠标移动和其他此类宏。

我会以类似的方式将脚本添加到 Vim：

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

这意味着当我在 Vim 中时，我按下 ENTER 上方的按钮（通常负责：| 和 \）被称为领导按钮，并在其后跟一个大写的“A”，它会保存并开始我的测试阶段脚本.

请确保正确填写上述 Vim/热键脚本中的 input... 部分。

许多编辑器允许您使用热键执行类似的操作。

AutoIt 的替代品可以在here 找到。

对于 Windows：自动热键

对于 Linux：xdotool、xbindkeys

对于 Mac：Automator

【参考方案25】：

作者推荐了该 webpack 插件的下一个版本：https://github.com/rubenspgcavalcante/webpack-extension-reloader。对我来说效果很好。

【参考方案26】：

是的，你可以间接做到这一点！这是我的解决方案。

在 manifest.json 中

    "name": "",
    "version": "1.0.0",
    "description": "",
    "content_scripts":[
        "run_at":"document_end",
        "matches":["http://*/*"],
        "js":["/scripts/inject.js"]
    ]

inject.js

(function() 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.async = true;
    script.src = 'Your_Scripts';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
)();

您注入的脚本可以从任何位置注入其他脚本。

这项技术的另一个好处是您可以忽略孤立世界的限制。见content script execution environment

【讨论】：

不适合我？如果我尝试 script.src = 'foo.js'，它会查找相对于当前网站的 url。如果我尝试完整路径，我会得到：不允许加载本地资源：'file:///../foo.js'

【参考方案27】：

浏览器同步

使用神奇的Browser-Sync

在源代码更改（HTML、CSS、图像等）时更新浏览器（任何） 支持 Windows、MacOS 和 Linux 您甚至可以使用移动设备观看代码更新（实时）

在 MacOS 上安装（查看他们在其他操作系统上安装的帮助）

安装 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 列出特定的文件扩展名（重要的是这些文件没有带空格的文件名），还使用ipconfig 查找我当前的 IP在 MacOS 上。

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

如果您使用 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 盒的 VM 上运行，但我可以使用该主机上的端口 3000 访问虚拟机。我喜欢--no-notify 停止浏览器同步，每次我更改代码时都会在浏览器上向我发送通知警报，--no-open 停止浏览器同步行为，该行为会在服务器启动时立即加载浏览器选项卡。

重要提示：如果您使用的是 Rails，请避免在开发中使用 Turbolinks，否则在使用 --proxy 选项时您将无法点击链接。

希望它对某人有用。我尝试了很多技巧来刷新浏览器（甚至是我之前使用 AlfredApp 提交的关于 *** 问题的旧帖子），但这确实是要走的路；没有更多的黑客，它只是流动。

信用： Start a local live reload web server with one command

【参考方案28】：

它不能直接完成。对不起。

如果您想将其视为一项功能，您可以通过 http://crbug.com/new 提出请求

【讨论】：

可以，这不是一个正确的答案。只要看看其他答案，他们就会告诉你。