Live reloading Chrome extension with WebSocket
Mar 30, 2016 · 1 分钟阅读

Install ws

$ npm install ws --save-dev

gulpfile.js

gulp.watch(['build/**/*.{js,css,jpeg,png}'], ['reload']);

// send `reload` massage
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({
  port: 9191
});

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

background.js

var reloadSocket = new WebSocket('ws://localhost:9191');

reloadSocket.onopen = function() {
  console.log('connected');
};

reloadSocket.onmessage = function(msg) {
  if (msg.data === 'reload') {
    // reload extension
    chrome.runtime.reload();
  }
};

chrome.tabs.query({
  active: true,
  currentWindow: true
}, function(tabs) {
  if (!tabs[0].url.includes('chrome-extension://')) {
    // reload page
    chrome.tabs.reload();
  }
});
← Previous Post Next Post →

Ryun的博客
与其感慨路难行,不如马上出发。

atom css design git html javascript jekyll laravel life mac mobile optimization sublime tool vscode vue
mac

About

你好,❤朋友

这里是 Ryun 的博客 📝

📝记录了我学习 🔎的过程

作为一名前端攻城狮 🦁

希望能和大家一起 🔎

共同进步 🏃

🦁的特长:

  • HTML5
  • CSS3
  • JavaScript
  • Vue.js
  • 微信小程序
  • 熟练配合 Node.js、PHP 和 Laravel
  • 熟练使用各种开发和设计工具

🦁喜欢 🆒🆒的东西

对提升效率和美感的事物有兴趣 😋

欢迎 👏交流


see this hugo-theme-dream-ink