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

我希望我的Chrome扩展可以在每次将文件保存到扩展文件夹时重新加载,而无需在chrome:// extensions /中显式地单击“重新加载”。 这可能吗?

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

您可以使用Chrome的“ Extensions Reloader ”

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

如果您曾经开发过Chrome扩展程序,则可能希望自动完成重新加载解包扩展程序的过程,而无需通过扩展页面。

“Extensions Reloader”允许您使用2种方法重新加载所有解包的扩展:

1 – 扩展的工具栏button。

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

工具栏图标将重新加载解压后的扩展名,只需点击一下。

“通过浏览重新加载”旨在使用“后期构build”脚本自动执行重新加载过程 – 只需使用Chrome将脚本添加到“ http://reload.extensions ”,即可刷新Chrome窗口。

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

更新 :我已经添加了一个选项页面,以便您不必手动查找和编辑扩展的ID。 CRX和源代码在: https : //github.com/Rob–W/Chrome-Extension-Reloader
更新2:增加了快捷方式(请参阅我的Github库)。
包含基本function的原始代码如下所示


创build一个扩展,并使用浏览器操作方法结合chrome.extension.management API来重新加载你的解包扩展。

下面的代码为Chrome添加了一个button,点击后将重新加载扩展程序。

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 :select一个不错的48×48图标,例如:
谷歌浏览器icons/google/chrome/48/Google-Chrome-icon.png 谷歌浏览器

在任何function或事件

 chrome.runtime.reload(); 

将重新加载您的扩展。 您还需要更改manifest.json文件,添加:

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

我已经做了一个简单的embedded脚本做热重载:

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

它监视扩展的目录中的文件更改。 检测到更改后,将重新加载扩展并刷新活动选项卡(以重新触发更新的内容脚本)。

  • 通过检查文件的时间戳工作
  • 支持嵌套的目录
  • 在生产configuration中自动禁用它自己

Chrome扩展有一个许可系统 ,它不会允许它(SO 中的一些人与你有相同的问题 ),所以要求他们“添加此function”是不会工作IMO。 Chromium Extensions Google Groups提供了一个使用chrome.extension.getViews()提供的解决scheme(理论)的邮件,但不保证能够正常工作。

如果可以将一些Chrome内部页面(如chrome://extensions/添加到manifest.json ,则可以创build一个与Reload定位点交互的插件,并使用外部程序(如XRefresh插件 – 有一个使用Ruby和WebSocket的Chrome版本 ),你可以实现你所需要的:

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

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

你可以尝试find第三方的解决scheme,而不是在看到文件中的修改(我不知道emacs既不Textmate,但在Emacs中可以绑定一个“保存文件”行动内的应用程序调用),只是点击特定应用程序的特定坐标:在这种情况下,它是您开发中的扩展程序的Reload定位点(为此重新打开Chrome窗口)。

(疯狂地狱,但它可能工作)

另一个解决scheme是创build自定义的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中作为后台脚本运行,瞧!

注意:这不是我的解决scheme。 我只是发布它。 我在Chrome扩展程序生成器生成的代码(伟大的工具!)中find它。 我在这里发布这个,因为它可能有帮助。

这里有一个函数可以用来监视文件的变化,如果检测到变化,可以重新加载。 它的工作原理是通过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')); 

也许我晚了一点晚,但我已经通过创buildhttps://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln

它通过重载chrome://extensions页面来工作,每当file.change事件通过websocket传入时。

如何在扩展文件夹中的文件更改时发出file.change事件的基于Gulp的示例可以在这里find: https : //github.com/robin-drexler/chrome-extension-auto-reload-watcher

为什么重新加载整个选项卡,而不是使用扩展pipe理api重新加载/重新启用扩展? 目前禁用和启用扩展再次导致任何开放的检查窗口(控制台日志等)closures,我发现在积极开发过程中太烦人了。

您的内容文件,如HTML和清单文件是不可更改的,没有扩展的安装,但我相信,JavaScript文件dynamic加载,直到扩展已被打包。

我知道这是因为通过Chrome扩展API工作的当前项目,并似乎加载每次我刷新页面。

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

然后使用npm init在目录root中创build一个package.json

npm install --save-dev gulp-open && npm install -g gulp

然后创build一个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进行开发很有用,您可能会看到更改您观看文件的path,同时假设您已安装npm和节点。

刚刚find一个新的基于grunt的项目,提供引导,脚手架,一些自动预处理能力,以及自动重新加载(不需要交互)。

从Websecurify 引导您的Chrome扩展

感谢@GmonC和@Arik以及一些业余时间,我pipe理好这个工作。 我不得不改变两个文件来完成这个工作。

(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"重新加载所有的开发扩展

(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 Reloaderbutton,并通过点击工具栏上的button激活LiveReload扩展,现在你将重新加载页面和每个文件的扩展名,同时使用LiveReload的所有其他好东西(css reload,image reload等)

唯一不好的事情是,你将不得不重复每个扩展更新更改脚本的过程。 为了避免更新,请将扩展名解压缩。

当我有更多的时间来解决这个问题的时候,我可能会创build一个扩展来消除对这两个扩展的需求。

直到那时,我正在开发我的扩展Projext Axeman

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

正如在文档中提到的:以下命令行将重新加载一个应用程序

 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --load-and-launch-app=[path to the app ] 

所以我刚刚创build了一个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); } );}); 

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

这是AutoIt或其他软件如何发光的地方。 关键是写一个脚本,模拟你当前的testing阶段。 习惯于至less使用其中的一种技术,因为许多技术不具备明确的工作stream程/testingpath。

 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("^`") 

很明显,您可以更改代码以适应您的testing/迭代需求。 确保选项卡点击位于chrome:// extensions站点中的锚标签的位置。 您也可以使用相对于窗口鼠标移动和其他这样的macros。

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

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

这意味着当我在Vim中时,按下上面的button(通常负责:|和\)称为领导者button,并按照大写字母“A”进行保存并开始我的testing阶段脚本。

请确保在上面的Vim / hotkey脚本中正确填写{input …}部分。

许多编辑会允许你用热键做类似的事情。

AutoIt的替代品可以在这里find。

对于Windows:AutoHotkey

对于Linux:xdotool,xbindkeys

对于Mac:Automator

如果你有一台苹果机,最简单的方法就是用阿尔弗雷德应用程序!

只需使用Powerpack获取Alfred App ,然后添加下面链接中提供的工作stream程,并自定义所需的热键(我喜欢使用⌘+⌥+ R)。 就这样。

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

如果您想使用其他浏览器,请在“Alfred Preferences”工作stream程内打开AppleScript,并将“Google Chrome”replace为“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 

工作stream文件是ReloadChrome.alfredworkflow 。

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

问候,彼得

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

Clerc – 用于Chrome Live扩展程序重新加载客户端

连接到LiveReload兼容服务器,每次保存时自动重新加载分机。

额外奖励:您可以自行重新加载扩展程序改变的网页。

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

开发扩展应该不需要那么不同。 Clerc为Chrome开发者带来了同样的自动化function。 使用LiveReload服务器设置构build系统,Clerc将监听重新加载事件以刷新您的扩展。

唯一的大缺陷是对manifest.json的更改。 在清单中的任何微小的拼写错误可能会导致进一步的重新加载尝试失败,你将被卡住卸载/重新安装您的扩展,以再次加载您的更改。

Clerc在重新加载后将完整的重新加载消息转发给您的扩展,所以您可以select使用提供的消息触发进一步的刷新步骤。

是的,你可以间接做! 这是我的解决scheme。

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

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

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

这不能直接完成。 抱歉。

如果您想将其视为function,可以在http://crbug.com/new上申请;