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

时间：2010-06-03 04:06:35

标签： javascript google-chrome google-chrome-extension

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

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

28 个答案:

答案 0 :(得分：143)

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

  

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

     

如果您曾经开发过Chrome扩展程序，那么您可能想要这样做   自动化重新加载解压扩展的过程，而不需要   需要浏览扩展页面。

     

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

     

1 - 扩展程序的工具栏按钮。

     

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

     

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

     

“通过浏览重新加载”旨在自动执行重新加载过程   使用“post build”脚本 - 只需添加一个浏览即可   “http://reload.extensions”将Chrome用于您的脚本，您就可以了   有一个刷新的Chrome窗口。

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

答案 1 :(得分：52)

更新：我添加了一个选项页面，因此您无需再手动查找和编辑扩展程序的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 Google Chrome

答案 2 :(得分：36)

在任何功能或事件中

chrome.runtime.reload();

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

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

答案 3 :(得分：34)

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

<强> https://github.com/xpl/crx-hotreload

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

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

答案 4 :(得分：10)

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

答案 5 :(得分：9)

Chrome扩展程序有一个permission system它不允许它（某些人在SO had the same problem as you中），所以要求他们“添加此功能”并不适用于IMO。有来自Chromium Extensions Google网上论坛的邮件proposed solution (theory)使用chrome.extension.getViews()，但不保证可以使用。

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

  

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

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

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

（疯狂，但它可能会奏效）

答案 6 :(得分：7)

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

答案 7 :(得分：6)

也许我参加聚会有点晚了，但是我通过创建https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln

为我解决了这个问题。

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

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

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

答案 8 :(得分：3)

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

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

答案 9 :(得分：3)

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

答案 10 :(得分：2)

mozilla的伟人刚刚发布了一个新的put it forward as an idea，可用于启动web-ext run --target chromium

答案 11 :(得分：2)

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

Clerc - for Chrome Live Extension Reloading Client

  

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

     

额外奖励：您还可以自动重新加载扩展程序所取代的网页。

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

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

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

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

答案 12 :(得分：2)

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

答案 13 :(得分：1)

TL;DR

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

答案

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

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

enter image description here

计划

  1. 设置一个 WebSocket 服务器（发送更新请求）
  2. 找到可以告诉您文件何时更改的服务（webpack/其他打包软件）
  3. 发生更新时，向客户端发送请求更新的消息
  4. 设置 WebSocket 客户端（以接收更新请求）
  5. 重新加载扩展程序

如何

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

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

在理想情况下，webpack-dev-server 或任何其他网络服务器软件等工具可以原生支持 chrome-extension 网址。在此之前，让服务器将文件更改代理到您的扩展程序似乎是目前最好的选择。

可用的开源替代方案

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

答案 14 :(得分：1)

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

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

答案 15 :(得分：1)

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

此致 彼得

答案 16 :(得分：1)

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

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

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

如果您想使用其他浏览器，请在Alfred首选项工作流程中打开AppleScript，并将“Google Chrome”替换为“Firefox”，“Safari”，...

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

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。

答案 17 :(得分：1)

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

来自Websecurify的

Bootstrap Your Chrome Extension

答案 18 :(得分：0)

这是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（通常负责：|和\）上方的按钮，称为领导按钮，然后按下大写字母＆＃39; A＆＃39;它保存并开始我的测试阶段脚本。

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

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

可以找到AutoIt的替代here。

对于Windows：AutoHotkey

对于Linux：xdotool，xbindkeys

对于Mac：Automator

答案 19 :(得分：0)

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

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

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

答案 20 :(得分：0)

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

答案 21 :(得分：0)

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

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

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

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

答案 22 :(得分：0)

感谢@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 reload，image reload etc。）< / p>

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

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

直到那时，我正在处理我的分机Projext Axeman

答案 23 :(得分：0)

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

答案 24 :(得分：0)

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

所以我的方法是轻量级的，您可以将重载功能保留在其中

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 / background.js 

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

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

答案 25 :(得分：-1)

浏览器同步

使用令人惊叹的Browser-Sync

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

在MacOS上的安装（查看其在其他OS上安装的帮助）

安装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 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停止浏览器同步行为，该行为在服务器启动时立即加载浏览器选项卡。 / p>

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

希望对某人有用。我已经尝试了许多技巧来刷新浏览器（甚至是我之前用AlfredApp就这个StackOverflow问题提交的一篇旧文章），但这确实是可行的方法；不再有骇客，它只会流淌。

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

答案 26 :(得分：-1)

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

在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

答案 27 :(得分：-4)

不能直接完成。遗憾。

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

申请
相关问题
最新问题