From 1909970bf875e605ef7b0dcf53a77fb0d9efd97b Mon Sep 17 00:00:00 2001 From: mikob Date: Wed, 29 Apr 2020 17:58:06 -0500 Subject: [PATCH 1/2] 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/2] 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)) + } + }) }