From 223ef997dad4f46a5b159ec4473aa1f293760108 Mon Sep 17 00:00:00 2001
From: Igor Pellegrini <igor.pellegrini@live.com>
Date: Sat, 14 Nov 2020 02:01:59 +0100
Subject: [PATCH 1/2] Fix config

---
 utils/webserver.js | 3 ++-
 webpack.config.js  | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/utils/webserver.js b/utils/webserver.js
index 4e8cf27..a6d7d86 100644
--- a/utils/webserver.js
+++ b/utils/webserver.js
@@ -32,7 +32,8 @@ var server =
     headers: {
       "Access-Control-Allow-Origin": "*"
     },
-    disableHostCheck: true
+    disableHostCheck: true,
+    watchContentBase: true
   });
 
 server.listen(env.PORT);
diff --git a/webpack.config.js b/webpack.config.js
index 4003ed4..46fe617 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -27,7 +27,8 @@ var options = {
   },
   output: {
     path: path.join(__dirname, "build"),
-    filename: "[name].bundle.js"
+    filename: "[name].bundle.js",
+    publicPath: "build/"
   },
   module: {
     rules: [

From 6d103fae4dee6ce503f2173ada222bf85d051484 Mon Sep 17 00:00:00 2001
From: Igor Pellegrini <igor.pellegrini@live.com>
Date: Sat, 14 Nov 2020 02:22:06 +0100
Subject: [PATCH 2/2] Support hot-reload of the extension, at build

1) First run a build of the app:
  yarn build

2) Then enable `Developer mode` in Chrome Extensions and `Load unpacked`
from the `./build` directory just created at point 1)

If you break the extension on the browser and it reloads wrongly you
might need to redo the previous steps for restoring a correctly running
hot-reload script.
--

TIP:
You can trigger a build command when saving files, if you use SublimeText,
just installing `SublimeOnSaveBuild` via Package Control,
and adding the config in Tool->BuildSystem->NewBuildSystem:

{
    "working_dir": "/path/to//SearchSynonyms",
    "shell_cmd": "cd $folder && yarn build"
}
($folder is a Sublime special var)

This allows you to do SaveFile->RebuildExtension->ReloadExtension
You might need to reload the current browser tabs, in otder to see
the new changes.
---
 package.json         |  2 +-
 src/js/hot-reload.js | 52 ++++++++++++++++++++++++++++++++++++++++++++
 src/manifest.json    |  5 ++++-
 webpack.config.js    |  3 ++-
 4 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 src/js/hot-reload.js

diff --git a/package.json b/package.json
index 522d74b..d82bb81 100644
--- a/package.json
+++ b/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": {
diff --git a/src/js/hot-reload.js b/src/js/hot-reload.js
new file mode 100644
index 0000000..8d30625
--- /dev/null
+++ b/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))
+    }
+})
\ No newline at end of file
diff --git a/src/manifest.json b/src/manifest.json
index 75bf42f..adc6726 100644
--- a/src/manifest.json
+++ b/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",
diff --git a/webpack.config.js b/webpack.config.js
index 46fe617..64a3a5e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -23,7 +23,8 @@ 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"),