livereload.ts

/* https://www.npmjs.com/package/webpack-watch-livereload-plugin
 * in webpack.config:
 * new WatchLiveReloadPlugin({
 *   files: ['./dist']
 * })
 *
 * somewhere in index.ts
 * if (process.env.NODE_ENV === 'development') {
 *  require('./livereload')()
 * }
 */
import * as Rx from 'rxjs'

const LIVERELOAD_HOST = 'localhost'
const LIVERELOAD_PORT = 35729
const url = `ws://${LIVERELOAD_HOST}:${LIVERELOAD_PORT}/livereload`

export default function livereload() {
  const connection = new WebSocket(url)

  Rx.Observable.fromEvent(connection, 'message')
    .skip(1)
    .throttleTime(1000)
    .subscribe(() => {
      console.info('reloading extension')
      chrome.runtime.reload()
    })

  Rx.Observable.fromEvent(connection, 'open').subscribe(() => {
    console.info('livereload tunnel enstablished, send reload to active tab')
    chrome.tabs.query(
      { active: true },
      ([{ url, id }]) => url && url.includes('http') && chrome.tabs.reload(id)
    )
  })
}