Can browsersync inject updated content in the browser without a refresh?

Question

I am using browsersync + gulp with some cool browser plugins, perfectPixel to name one. My problem is every time I save my work, it forces the browser to reload, thus clearing the browser and shutting off my browser extension. This causes me to have to reactivate the plugin and continue this inefficient workflow. Does anyone have any ideas?

UPDATE 7/7/2015 Below Matthew, provided some links to a solution which incorporates websockets, however I can't get it to work with my gulp set-up.

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

Browser-sync cant do that natively since extensions are designed by default to run in their own sandbox.

You need to write something custom with websockets to get around that, i didn't bother cuz i needed a quickfix so i ended up using this:

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

But this should help you:

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