javascript - browsersync 可以在不刷新的情况下在浏览器中注入(inject)更新的内容吗？

Question

我正在使用 browsersync + gulp使用一些很酷的浏览器插件，perfectPixel举一个例子。我的问题是每次我保存我的工作时，它都会强制浏览器重新加载，从而清除浏览器并关闭我的浏览器扩展。这导致我不得不重新激活插件并继续这个低效的工作流程。有人有什么想法吗？

2015 年 7 月 7 日更新 在 Matthew 下方，提供了一些指向包含 websockets 的解决方案的链接，但是我无法让它与我的 gulp 设置一起使用。

var gulp = require('gulp'),
    open = require('gulp-open'),
    browserSync = require('browser-sync').create();

var WebSocketServer, socket, wss;

WebSocketServer = require('ws').Server;

wss = new WebSocketServer({
    port: 9191
});

var reload = browserSync.reload;

var paths = {
    css: 'app/REPSuite/web/static/css/*.css',
    js: 'app/REPSuite/web/static/js/*.js',
    html: 'app/*.html'
};

gulp.task('reload', function() {
    var client, i, len, ref, results;
    ref = wss.clients;
    results = [];
    for (i = 0, len = ref.length; i < len; i++) {
        client = ref[i];
        results.push(client.send('reload'));
    }
    return results;
});

socket = null;

this.reloadClient = {
    connect: function() {
        socket = new WebSocket('wss://localhost:9191');
        socket.onopen = function() {
            return console.log('connected');
        };
        socket.onclose = function() {
            return console.log('closed');
        };
        return socket.onmessage = function(message) {
            if (message.data === "reload") {
                return window.chrome.runtime.reload();
            }
        };
    },
    disconnect: function() {
        return socket.close();
    }
};

// Static Server + watching scss/html files
gulp.task('serve', ['css'], function() {

    browserSync.init({
        server: "./app",
        files: [paths.html, paths.css, paths.js]
    });

    gulp.watch(paths.css, ['css']);
    gulp.watch(paths.html).on('change', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('css', function() {
    return gulp.src(paths.css)
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve','reload']);

Answer 1

浏览器同步无法在 native 执行此操作，因为扩展程序默认设计为在其自己的沙箱中运行。

你需要用 websockets 写一些自定义的东西来解决这个问题，我没有打扰因为我需要一个快速修复所以我最终使用了这个:

https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid

但这应该对你有帮助:

http://blog.waymondo.com/2014-09-16-live-reloading-chrome-apps-and-extensions-with-gulp-and-websockets/