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

Question

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

编辑：我知道我可以更新Chrome 重新加载扩展的间隔，这是一个中途解决方案，但我宁愿让我的编辑器（emacs 或 textmate）触发保存重新加载或要求 Chrome 监控更改目录。

score 183 · Accepted Answer

您可以为 Chrome使用“ Extensions Reloader ” ：

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

如果您曾经开发过 Chrome 扩展程序，您可能希望自动重新加载解压缩扩展程序的过程，而无需浏览扩展程序页面。

“Extensions Reloader”允许您使用 2 种方式重新加载所有未打包的扩展：

1 - 扩展的工具栏按钮。

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

工具栏图标将使用单击重新加载解压缩的扩展。

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

更新：截至 2015 年 1 月 14 日，该扩展是开源的，可在 GitHub 上获得。

score 64 · Accepted Answer

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

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

下面的代码向 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 图标，例如：
谷歌浏览器

score 49 · Accepted Answer

在任何功能或事件中

chrome.runtime.reload();

将重新加载您的扩展程序（文档）。您还需要更改manifest.json文件，添加：

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

score 49 · Accepted Answer

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

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

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

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

score 12 · Accepted Answer

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

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

清单.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 重新加载

score 11 · Accepted Answer

另一种解决方案是创建自定义 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 扩展生成器的生成代码中找到了它（很棒的工具！）。我在这里发布这个是因为它可能会有所帮助。

score 8 · Accepted Answer

Chrome 扩展程序有一个不允许的权限系统（SO 中的某些人遇到了与您相同的问题），因此要求他们“添加此功能”是行不通的 IMO。有一封来自 Chromium Extensions Google Groups 的邮件，其中包含使用的建议解决方案（理论）chrome.extension.getViews()，但也不保证能正常工作。

如果可以添加到某些manifest.jsonChrome内部页面chrome://extensions/，Reload如)，您将实现您所需要的：

XRefresh 是一个浏览器插件，由于所选文件夹中的文件更改，它将刷新当前网页。这使得使用您最喜欢的 HTML/CSS 编辑器进行实时页面编辑成为可能。

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

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

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

score 7 · Accepted Answer

这是一个功能，您可以使用它来监视文件的更改，并在检测到更改时重新加载。它的工作原理是通过 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'));

score 6 · Accepted Answer

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

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

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

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

score 5 · Accepted Answer

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

注意：即使您不需要它，也需要（空）后台脚本，因为这是它注入重新加载代码的地方。

score 5 · Accepted Answer

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

score 5 · Accepted Answer

TL;博士

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

回答

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

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

计划

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

如何

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

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

在理想情况下，像webpack-dev-server或任何其他 Web 服务器软件这样的工具可以原生地提供对chrome-extensionURL 的支持。在此之前，拥有一个服务器来代理文件更改到您的扩展似乎是迄今为止最好的选择。

可用的开源替代方案

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

score 3 · Accepted Answer

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

score 3 · Accepted Answer

用于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 和节点。

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

Clerc - 用于 Chrome 实时扩展重新加载客户端

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

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

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

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

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

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

score 1 · Accepted Answer

感谢@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"

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

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

score 1 · Accepted Answer

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

从 Websecurify引导您的 Chrome 扩展程序

score 1 · Accepted Answer

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

问候，彼得

score 1 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

/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);
    }
);});

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

score 0 · Accepted Answer

这就是 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://extensions 站点中的位置一致。您还可以使用相对于窗口鼠标移动和其他此类宏。

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

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

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

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

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

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

对于 Windows：自动热键

对于 Linux：xdotool、xbindkeys

对于 Mac：Automator

score 0 · Accepted Answer

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

只需使用 Powerpack 获取Alfred App，然后添加下面链接中提供的工作流程并自定义您想要的热键（我喜欢使用 ⌘ + ⌥ + 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。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

仅限 MAC

使用扩展重新加载器：

使用打字稿

将您的观察者添加到您的项目中：yarn add tsc-watch
将命令添加scripts到package.json

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

运行脚本yarn dev

使用 JavaScript

将您的观察者添加到您的项目中：yarn add watch-cli
将命令添加scripts到package.json

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

运行脚本yarn dev

奖励：在 Extensions Reloader 选项中打开“重新加载当前选项卡”，以便在进行更改后重新加载：

score -1 · Accepted Answer

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

在 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);
})();

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

这种技术的另一个好处是你可以忽略孤立世界的限制。查看内容脚本执行环境

score -2 · Accepted Answer

浏览器同步

使用惊人的浏览器同步

当源代码更改（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在 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

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

重要提示：--proxy以防万一您使用 Rails，避免在开发中使用 Turbolinks，否则在使用该选项时您将无法单击链接。

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

信用： 使用一个命令启动本地实时重新加载 Web 服务器

score -5 · Accepted Answer

不能直接做。对不起。

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

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

29 回答 29

manifest.json

bg.js