如何自动重新加载我正在开发的Chrome扩展程序？-Java 学习之路

210

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

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

23 回答

3

如果没有安装扩展程序，你的内容文件如html和manifest文件是不可更改的，但我相信JavaScript文件是动态加载的，直到扩展程序被打包为止 .

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

回复于 2024-04-29T08:43:14+08:00
51

您可以将 "Extensions Reloader" 用于Chrome：

使用扩展程序的工具栏按钮或浏览到“http：//reload.extensions”重新加载所有未打包的扩展程序如果您曾经开发过Chrome扩展程序，则可能需要自动执行重新加载解压扩展程序的过程，而无需浏览扩展页面 . “Extensions Reloader”允许您使用两种方式重新加载所有解压缩的扩展：1 - 扩展的工具栏按钮 . 2 - 浏览“http：//reload.extensions” . 工具栏图标将通过单击重新加载解压缩的扩展名 . “通过浏览重新加载”旨在使用“后期构建”脚本自动执行重新加载过程 - 只需使用Chrome向您的脚本添加浏览“http：//reload.extensions”，您就会有一个刷新的Chrome窗口 .

Update: 截至2015年1月14日，该扩展程序是开源的available on GitHub .

回复于 2024-04-29T08:43:14+08:00
32

也许有点迟到但我认为crxreload可能适合你 . 这是我在开发过程中尝试重新加载保存工作流程的结果 .

回复于 2024-04-29T08:43:14+08:00
9
Update ：我添加了一个选项页面，因此您不再需要't have to manually find and edit the extension'的ID . CRX和源代码位于：https://github.com/Rob--W/Chrome-Extension-Reloader
更新2：添加了快捷方式（请参阅我在Github上的存储库） .
原始代码包括基本功能，如下所示 .

创建扩展，并将Browser Action方法与chrome.extension.management API结合使用，以重新加载解压缩的扩展 .

下面的代码会向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图标，例如：
Google Chrome http://icons.iconarchive.com/icons/google/chrome/48/Google-Chrome-icon.png
回复于 2024-04-29T08:43:14+08:00
0
在任何功能或事件中
```
chrome.runtime.reload();
```
将重新加载您的扩展程序（docs） . 您还需要更改 manifest.json 文件，添加：
```
...
"permissions": [ "management" , ...]
...
```
回复于 2024-04-29T08:43:14+08:00
130
我做了一个简单的可嵌入脚本进行热重载：

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

它会在扩展程序的目录中监视文件更改 . 检测到更改后，它会重新加载扩展并刷新活动选项卡（以重新触发更新的内容脚本） .
- 通过检查文件的时间戳来工作
- 支持嵌套目录
- 在生产环境配置中自动禁用自身
回复于 2024-04-29T08:43:14+08:00

-3

另一种解决方案是创建自定义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代码中找到了它（很棒的工具！） . 我在这里张贴这个，因为它可能有所帮助 .

回复于 2024-04-29T08:43:14+08:00

26

Chrome扩展程序有permission system它不允许它（某些人在SO had the same problem as you中），所以请求它们"add this feature"不能用于IMO . 有来自Chromium Extensions Google网上论坛的邮件proposed solution (theory)使用 chrome.extension.getViews() ，但不保证也可以使用 .

如果可以添加 manifest.json 等一些Chrome内部页面，则可以创建一个与 Reload 锚点交互的插件，并使用像XRefresh这样的外部程序（一个Firefox插件 - 使用Ruby的Chrome version）和WebSocket），你将实现你所需要的：

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

这是不可能的，但我认为你可以用不同的方式使用同样的概念 .

您可以尝试查找第三方解决方案，而不是在看到文件中的修改后（我在开发中使用您的扩展程序中的 Reload 锚点）（您只需为此重新加载打开Chrome窗口） .

（疯狂的地狱，但它可能工作）

回复于 2024-04-29T08:43:14+08:00

-1

这是一个可用于监视文件以进行更改的函数，并在检测到更改时重新加载 . 它通过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'));

回复于 2024-04-29T08:43:14+08:00

1

也许我'm a little late to the party, but I'已经通过创建https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln解决了它

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

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

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

回复于 2024-04-29T08:43:14+08:00

使用 npm init 在目录root中创建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和节点 .

回复于 2024-04-29T08:43:14+08:00

0

刚刚找到了一个基于grunt的新项目，它提供了自举，脚手架，一些自动预处理功能，以及自动重新加载（无需交互） .

来自Websecurify的Bootstrap Your Chrome Extension

回复于 2024-04-29T08:43:14+08:00
0
If you have a Mac, ¡the easiest way is with Alfred App!

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

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

如果您想使用其他浏览器，请在Alfred首选项工作流程中打开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 .
回复于 2024-04-29T08:43:14+08:00

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

问候，彼得

回复于 2024-04-29T08:43:14+08:00

0

免责声明：我自己开发了此扩展程序 .

Clerc - 适用于Chrome Live Extension重定向客户端

连接到兼容LiveReload的服务器，每次保存时自动重新加载扩展程序 . 额外奖励：您还可以自动重新加载扩展程序更改的网页 .

大多数网页开发人员使用构建系统与某种观察者自动构建他们的文件并重新启动他们的服务器并重新加载网站 .

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

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

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

回复于 2024-04-29T08:43:14+08:00
1
感谢@GmonC和@Arik以及一些业余时间，我设法让这个工作 . 我不得不更改两个文件才能使其工作 .

（1）为该应用程序安装LiveReload和Chrome Extension . 这会在文件更改时调用一些脚本 .

（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重新加载，图像重新加载等）

唯一不好的是，您必须在每次扩展更新时重复更改脚本的过程 . 为了避免更新，添加扩展名为unpacked .

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

直到那时，我正在研究我的扩展Projext Axeman
回复于 2024-04-29T08:43:14+08:00
0

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

回复于 2024-04-29T08:43:14+08:00

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

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

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

回复于 2024-04-29T08:43:14+08:00

3
这就是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 /热键脚本中的部分 .

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

可以找到AutoIt的替代品here .

对于Windows：AutoHotkey

对于Linux：xdotool，xbindkeys

对于Mac：Automator
回复于 2024-04-29T08:43:14+08:00
1

我主要在Firefox中开发，其中 web-ext run 在文件更改后自动重新加载扩展 . 一旦它出现在Firefox中没有出现的任何问题 .

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

您可以将其用于95％的测试，然后在要在实际站点上测试时手动重新加载扩展 .

这并没有完全重现扩展所运行的环境，但它对于许多简单的事情来说已经足够了 .

回复于 2024-04-29T08:43:14+08:00
7
BROWSER-SYNC

使用惊人的Browser-Sync
- 在源代码更改时更新浏览器（任何）（HTML，CSS，图像等）
- 支持Windows，MacOS和Linux
- 您甚至可以使用移动设备观看代码更新（直播）
Instalation on 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
```
How to use browser-sync for static sites

我们来看两个例子：
```
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 .

How to use browser-sync for dynamic sites

如果您使用的是PHP，Rails等，则您已经有一个正在运行的服务器，但是当您对代码进行更改时它不会自动刷新 . 所以你需要使用 --proxy 开关让浏览器同步知道该服务器的主机在哪里 .
```
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 停止浏览器同步行为，在服务器启动时立即加载浏览器选项卡 .

IMPORTANT: 为了防止您使用Rails，请避免在开发时使用Turbolinks，否则在使用 --proxy 选项时您将无法单击链接 .

希望它对某人有用 . 我尝试了很多技巧来刷新浏览器（即使是我之前使用AlfredApp在StackOverflow问题上提交的旧帖子），但这真的是要走的路 . 没有更多的黑客，它只是流动 .

CREDIT: Start a local live reload web server with one command
回复于 2024-04-29T08:43:14+08:00

是的，你可以间接地做到！这是我的解 .

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

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

这项技术的另一个好处是你可以忽略 isolated world 的限制 . 见content script execution environment

回复于 2024-04-29T08:43:14+08:00

5

它不能直接完成 . 抱歉 .

如果您希望将其视为一项功能，可以在http://crbug.com/new申请 .

回复于 2024-04-29T08:43:14+08:00

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

23 回答

manifest.json

bg.js

Clerc - 适用于Chrome Live Extension重定向客户端

相关问题