我想为我的chrome扩展重新加载每次我保存在扩展文件夹中的文件,而不必显式点击“重新加载”在chrome://extensions/。这可能吗?

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


当前回答

另一个解决方案是创建自定义liverload脚本(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连接到liverload服务器。然后,它会在重载消息时发出一个chromium .runtime.reload()调用。下一步是将该脚本添加到清单中作为后台脚本运行。Json,瞧!

注意:这不是我的解决方案。我只是把它发布出来。我在Chrome扩展生成器(伟大的工具!)的生成代码中发现它。我把这个贴在这里,因为它可能有帮助。

其他回答

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

如果你想主要在Chrome上开发,并且不想安装任何第三方扩展,那么另一个选择是在扩展的文件夹中创建一个test.html文件,并添加一堆SSCCE。然后,该文件使用一个正常的<script>标记来注入扩展脚本。

您可以使用它进行95%的测试,然后当您想在现场测试它时手动重新加载扩展。

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

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

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

另一个解决方案是创建自定义liverload脚本(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连接到liverload服务器。然后,它会在重载消息时发出一个chromium .runtime.reload()调用。下一步是将该脚本添加到清单中作为后台脚本运行。Json,瞧!

注意:这不是我的解决方案。我只是把它发布出来。我在Chrome扩展生成器(伟大的工具!)的生成代码中发现它。我把这个贴在这里,因为它可能有帮助。

博士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,它做了我上面计划的。

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