From 1909970bf875e605ef7b0dcf53a77fb0d9efd97b Mon Sep 17 00:00:00 2001 From: mikob Date: Wed, 29 Apr 2020 17:58:06 -0500 Subject: [PATCH 1/3] Made tab reload optional - sometimes we have our own code to reinject content script necessities, or we don't have content script, and sometimes we don't want the page to refresh --- hot-reload.js | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/hot-reload.js b/hot-reload.js index de5e58c..fd84c4c 100644 --- a/hot-reload.js +++ b/hot-reload.js @@ -17,36 +17,43 @@ const timestampForFilesInDirectory = dir => filesInDirectory (dir).then (files => files.map (f => f.name + f.lastModifiedDate).join ()) -const reload = () => { +const reload = (reloadTab) => { - chrome.tabs.query ({ active: true, currentWindow: true }, tabs => { // NB: see https://github.com/xpl/crx-hotreload/issues/5 + if (reloadTab) { + 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) } + if (tabs[0]) { chrome.tabs.reload (tabs[0].id) } + chrome.runtime.reload () + }) + } else { chrome.runtime.reload () - }) + } } -const watchChanges = (dir, lastTimestamp) => { +const watchChanges = (dir, reloadTab, lastTimestamp) => { timestampForFilesInDirectory (dir).then (timestamp => { if (!lastTimestamp || (lastTimestamp === timestamp)) { - setTimeout (() => watchChanges (dir, timestamp), 1000) // retry after 1s + setTimeout (() => watchChanges (dir, reloadTab, timestamp), 1000) // poll every 1s } else { - reload () + reload (reloadTab) } }) } -chrome.management.getSelf (self => { - if (self.installType === 'development') { - - chrome.runtime.getPackageDirectoryEntry (dir => watchChanges (dir)) +if (typeof module === 'object') { + exports.default = (opts) => { + chrome.management.getSelf (self => { + if (self.installType === 'development') { + chrome.runtime.getPackageDirectoryEntry (dir => watchChanges (dir, opts.reloadTab)) + } + }) } -}) +} From 6a48d8f838a62c62261b441009c3fa7df37083cc Mon Sep 17 00:00:00 2001 From: mikob Date: Tue, 26 May 2020 16:25:23 -0500 Subject: [PATCH 2/3] updated README. Made sure it can be loaded as a standalone script still --- README.md | 16 ++++++++++++++-- hot-reload.js | 12 +++++++++++- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index fc2c2ae..f8ade74 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,13 @@ Here's [a blog post explaining it](https://60devs.com/hot-reloading-for-chrome-e - Works by checking timestamps of files - Supports nested directories - Automatically disables itself in production -- And it's just a 50 lines of code! +- And it's just 50 lines of code! + +## Options + +| Name | Value | Description | +|--------------|----------------------------|----------------------------------------| +| `reloadTab` | `boolean` (default: true) | reload the active tab when crx changes.| ## How To Use @@ -31,4 +37,10 @@ It is also available as NPM module: npm install crx-hotreload ``` -Then use a `require` (or `import`) to execute the script. +In your script: +``` +const hotReload = require('crx-hotreload'); +hotReload.default({ + reloadTab: false +}); +``` diff --git a/hot-reload.js b/hot-reload.js index fd84c4c..572fe6d 100644 --- a/hot-reload.js +++ b/hot-reload.js @@ -47,13 +47,23 @@ const watchChanges = (dir, reloadTab, lastTimestamp) => { } +const defaultOpts = { + reloadTab: true +}; if (typeof module === 'object') { exports.default = (opts) => { + const combinedOpts = Object.assign({}, defaultOpts, opts); chrome.management.getSelf (self => { if (self.installType === 'development') { - chrome.runtime.getPackageDirectoryEntry (dir => watchChanges (dir, opts.reloadTab)) + chrome.runtime.getPackageDirectoryEntry (dir => watchChanges (dir, combinedOpts.reloadTab)) } }) } +} else { + chrome.management.getSelf (self => { + if (self.installType === 'development') { + chrome.runtime.getPackageDirectoryEntry (dir => watchChanges (dir, defaultOpts.reloadTab)) + } + }) } From c69b365530f473d254bf83e9c4f309007f693143 Mon Sep 17 00:00:00 2001 From: mikob Date: Tue, 26 May 2020 17:51:08 -0500 Subject: [PATCH 3/3] Added exclude option to exclude files by name. --- README.md | 7 ++++--- hot-reload.js | 33 +++++++++++++++++---------------- 2 files changed, 21 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index f8ade74..df38aa1 100644 --- a/README.md +++ b/README.md @@ -13,9 +13,10 @@ Here's [a blog post explaining it](https://60devs.com/hot-reloading-for-chrome-e ## Options -| Name | Value | Description | -|--------------|----------------------------|----------------------------------------| -| `reloadTab` | `boolean` (default: true) | reload the active tab when crx changes.| +| Name | Value | Description | +|--------------|------------------------------|----------------------------------------| +| `reloadTab` | `boolean` (default: `true`) | reload the active tab when crx changes.| +| `exclude` | `string[]` (default: `[]`) | file names that we shouldn't watch. | ## How To Use diff --git a/hot-reload.js b/hot-reload.js index 572fe6d..ade04ce 100644 --- a/hot-reload.js +++ b/hot-reload.js @@ -1,11 +1,13 @@ -const filesInDirectory = dir => new Promise (resolve => +const filesInDirectory = (dir, exclude) => new Promise (resolve => dir.createReader ().readEntries (entries => - Promise.all (entries.filter (e => e.name[0] !== '.').map (e => - + Promise.all (entries + .filter (e => e.name[0] !== '.') + .filter (f => !exclude.includes(f.name)) + .map (e => e.isDirectory - ? filesInDirectory (e) + ? filesInDirectory (e, exclude) : new Promise (resolve => e.file (resolve)) )) .then (files => [].concat (...files)) @@ -13,9 +15,9 @@ const filesInDirectory = dir => new Promise (resolve => ) ) -const timestampForFilesInDirectory = dir => - filesInDirectory (dir).then (files => - files.map (f => f.name + f.lastModifiedDate).join ()) +const timestampForFilesInDirectory = (dir, exclude) => + filesInDirectory (dir, exclude).then (files => + files. map (f => f.name + f.lastModifiedDate).join ()) const reload = (reloadTab) => { @@ -31,24 +33,23 @@ const reload = (reloadTab) => { } } -const watchChanges = (dir, reloadTab, lastTimestamp) => { - - timestampForFilesInDirectory (dir).then (timestamp => { +const watchChanges = (dir, opts, lastTimestamp) => { + timestampForFilesInDirectory (dir, opts.exclude).then (timestamp => { if (!lastTimestamp || (lastTimestamp === timestamp)) { - setTimeout (() => watchChanges (dir, reloadTab, timestamp), 1000) // poll every 1s + setTimeout (() => watchChanges (dir, opts, timestamp), 1000) // poll every 1s } else { - - reload (reloadTab) + reload (opts.reloadTab) } }) } const defaultOpts = { - reloadTab: true + reloadTab: true, + exclude: [], }; if (typeof module === 'object') { @@ -56,14 +57,14 @@ if (typeof module === 'object') { const combinedOpts = Object.assign({}, defaultOpts, opts); chrome.management.getSelf (self => { if (self.installType === 'development') { - chrome.runtime.getPackageDirectoryEntry (dir => watchChanges (dir, combinedOpts.reloadTab)) + chrome.runtime.getPackageDirectoryEntry (dir => watchChanges (dir, combinedOpts)) } }) } } else { chrome.management.getSelf (self => { if (self.installType === 'development') { - chrome.runtime.getPackageDirectoryEntry (dir => watchChanges (dir, defaultOpts.reloadTab)) + chrome.runtime.getPackageDirectoryEntry (dir => watchChanges (dir, defaultOpts)) } }) }