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

从Websecurify引导您的Chrome扩展

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

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

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

这正是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://扩展站点。您还可以使用相对于窗口的鼠标移动和其他类似的宏。

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

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

这意味着当我在Vim中，我按下ENTER上面的按钮(通常负责:|和\)，即领导按钮，并跟随一个大写的“a”，它保存并开始我的测试阶段脚本。

请确保填写{input…}节在上面的Vim/热键脚本适当。

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

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

Windows: AutoHotkey

Linux: xdotool, xbindkeys

Mac: Automator

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

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

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

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

更新:我已经添加了一个选项页面，这样你就不必手动查找和编辑扩展的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图标，例如:

使用npm init创建一个包。Json在根目录下

NPM install——save-dev gulp-open &&

然后创建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和节点安装。