Czy przeglądarka może wstrzyknąć zaktualizowaną zawartość w przeglądarce bez odświeżania?

Question

Używam browsersync + gulp z kilkoma fajnymi wtyczkami do przeglądarek, perfectPixel, aby wymienić jeden. Mój problem polega na tym, że za każdym razem, gdy zapisuję swoją pracę, zmusza ona przeglądarkę do przeładowania, usuwając w ten sposób przeglądarkę i wyłączając moje rozszerzenie przeglądarki. To powoduje, że muszę ponownie aktywować wtyczkę i kontynuować ten nieefektywny przepływ pracy. Czy ktoś ma jakieś pomysły?

UPDATE 07.07.2015 Poniżej Mateusza, pod warunkiem, kilka linków do roztworu, który wciela WebSockets, jednak nie mogę zmusić go do pracy z moim haustem konfiguracji.

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

Nie można zsynchronizować przeglądarki, ponieważ rozszerzenia są domyślnie zaprojektowane do pracy w ich własnym środowisku izolowanym.

Musisz napisać coś niestandardowego z WebSocket obejść, że ja nie przeszkadzało bo potrzebowałem quickfix więc skończyło się tak:

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

ale to powinno pomóc:

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