Trình duyệt có thể đồng bộ hóa nội dung cập nhật trong trình duyệt mà không cần làm mới không?

Question

Tôi đang sử dụng browsersync + gulp với một số plugin trình duyệt thú vị, perfectPixel để đặt tên một. Vấn đề của tôi là mỗi lần tôi lưu công việc của mình, nó buộc trình duyệt phải tải lại, do đó xóa trình duyệt và tắt tiện ích mở rộng trình duyệt của tôi. Điều này khiến tôi phải kích hoạt lại plugin và tiếp tục quy trình làm việc không hiệu quả này. Có ai có ý tưởng nào?

CẬP NHẬT 2015/07/07 Dưới Matthew, cung cấp một số liên kết đến một giải pháp trong đó kết hợp WebSockets, tuy nhiên tôi không thể có được nó để làm việc với ngụm tôi thiết lập.

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

Trình duyệt đồng bộ hóa không thể làm điều đó tự nhiên từ phần mở rộng được thiết kế theo mặc định để chạy trong sandbox riêng của họ.

Bạn cần phải viết một cái gì đó tùy chỉnh với WebSockets để có được xung quanh đó, tôi đã không bận tâm vì tôi cần một người QuickFix vì vậy tôi đã kết thúc sử dụng này:

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

Nhưng điều này sẽ giúp bạn:

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