这里有一个函数，您可以使用它来监视文件的更改，并在检测到更改时重新加载。它通过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'));

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

如果你有一台Mac，最简单的方法就是使用Alfred App!

只需使用Powerpack获取Alfred App，然后添加下面链接中提供的工作流，并自定义你想要的热键(我喜欢使用⌘+ + R)。

现在，每次你使用热键，谷歌Chrome浏览器将重新加载，无论你在那个时刻的应用程序。

如果你想使用其他浏览器，打开AppleScript在阿尔弗雷德首选工作流程和替换“谷歌Chrome”与“Firefox”，“Safari”，…

我还将在这里显示在ReloadChrome中使用的/usr/bin/osascript脚本的内容。Alfredworkflow文件，这样你就可以看到它在做什么。

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。

如果你使用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

注意:一个(空的)后台脚本是必需的，即使你不需要它，因为它是注入重载代码的地方。

博士TL;

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

回答

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

文件改变了吗?设置服务器向扩展发送请求更新的消息(将ws消息广播到客户机)。扩展然后重新加载，回复“ok，重新加载”，并保持监听新的变化。

Plan

设置WebSocket服务器(用于分发更新请求) 找一个可以告诉你文件什么时候改变的服务(webpack/其他捆绑软件) 当发生更新时，向客户端发送请求更新的消息 设置WebSocket客户端(接收更新请求) 重新加载扩展

How

对于WebSocket服务器，使用ws。对于文件更改，使用一些监听器/钩子(如webpack的watchRun钩子)。对于客户端部分，使用本地WebSocket。然后扩展可以将WebSocket客户端附加到后台脚本上，以保持服务器(由webpack托管)和客户端(附加在扩展后台的脚本)之间的持久同步。

现在，为了让扩展重新加载自己，你可以在每次上传请求消息来自服务器时调用chrome.runtime.reload()，或者甚至创建一个“重新加载扩展”来为你做这件事，使用chrome.management.setEnabled()(需要“权限”:["management"]在清单中)。

在理想的情况下，像webpack-dev-server这样的工具或任何其他web服务器软件都可以提供对chrome扩展url的本地支持。在此之前，使用服务器代理扩展名的文件更改似乎是目前为止的最佳选择。

可用的开源替代方案

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

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

所以我的方法是轻量级的，你可以保留重载函数

manifest.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 /背景js。

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

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