Add hot-reload of the extension in Chrome

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "description": "A boilerplate to chrome extension with webpack",
   "scripts": {
-    "build": "node utils/build.js",
+    "build": "NODE_ENV=production node utils/build.js",
     "start": "node utils/webserver.js"
   },
   "devDependencies": {

src/js/hot-reload.js

@@ -0,0 +1,52 @@
+const filesInDirectory = dir => new Promise (resolve =>
+
+    dir.createReader ().readEntries (entries =>
+
+        Promise.all (entries.filter (e => e.name[0] !== '.').map (e =>
+
+            e.isDirectory
+                ? filesInDirectory (e)
+                : new Promise (resolve => e.file (resolve))
+        ))
+        .then (files => [].concat (...files))
+        .then (resolve)
+    )
+)
+
+const timestampForFilesInDirectory = dir =>
+        filesInDirectory (dir).then (files =>
+            files.map (f => f.name + f.lastModified).join ())
+
+const reload = () => {
+
+    chrome.tabs.query ({ active: true, currentWindow: true }, tabs => { // NB: see https://github.com/xpl/crx-hotreload/issues/5
+
+        if (tabs[0]) { chrome.tabs.reload (tabs[0].id) }
+
+        chrome.runtime.reload ()
+    })
+}
+
+const watchChanges = (dir, lastTimestamp) => {
+
+    timestampForFilesInDirectory (dir).then (timestamp => {
+
+        if (!lastTimestamp || (lastTimestamp === timestamp)) {
+
+            setTimeout (() => watchChanges (dir, timestamp), 1000) // retry after 1s
+
+        } else {
+
+            reload ()
+        }
+    })
+
+}
+
+chrome.management.getSelf (self => {
+
+    if (self.installType === 'development') {
+
+        chrome.runtime.getPackageDirectoryEntry (dir => watchChanges (dir))
+    }
+})

src/manifest.json

@@ -2,7 +2,10 @@
   "name": "Chrome Extension Webpack",
   "options_page": "options.html",
   "background": {
-    "page": "background.html"
+    "scripts": [
+      "background.bundle.js",
+      "hot_reload.bundle.js"
+    ]
   },
   "browser_action": {
     "default_popup": "popup.html",

utils/webserver.js

@@ -32,7 +32,8 @@ var server =
     headers: {
       "Access-Control-Allow-Origin": "*"
     },
-    disableHostCheck: true
+    disableHostCheck: true,
+    watchContentBase: true
   });
 
 server.listen(env.PORT);

webpack.config.js

@@ -23,11 +23,13 @@ var options = {
   entry: {
     popup: path.join(__dirname, "src", "js", "popup.js"),
     options: path.join(__dirname, "src", "js", "options.js"),
-    background: path.join(__dirname, "src", "js", "background.js")
+    background: path.join(__dirname, "src", "js", "background.js"),
+    hot_reload: path.join(__dirname, "src", "js", "hot-reload.js")
   },
   output: {
     path: path.join(__dirname, "build"),
-    filename: "[name].bundle.js"
+    filename: "[name].bundle.js",
+    publicPath: "build/"
   },
   module: {
     rules: [