Use execute script to reload page rather than chrome.tabs.reload()

[gbro3n]

This is a better fix to the previous PR.

Calling chrome.tabs.reload (tabs[0].id) is unreliable as the call to chrome.runtime.reload() kills the operation before it can complete. Executing location.reload() with a timeout in the tab page will complete however.

[xpl]

@garethrbrown Hello, the fix is nice, but I have found that executeScript requires adding extra tab/origin permissions to manifest.json which might be unwanted and also breaks the backward compatibility.

At first I came up with that code which checks if a permission has been granted:

const reload = () => {
    chrome.permissions.contains ({
        origins: ["http://*/*", "https://*/*"]
    }, granted => {
        if (granted) {
            chrome.tabs.query ({ active: true, lastFocusedWindow: true }, tabs => { // NB: see https://github.com/xpl/crx-hotreload/issues/5
                if (tabs[0]) {
                    chrome.tabs.executeScript (tabs[0].id, { code: 'setTimeout(() => { location.reload() }, 300)' }, () => {})
                    chrome.runtime.reload ()
                }
            })
        } else {
            alert ('Unable to reload the active tab — please add "http://*/*" and "https://*/*" permissions to manifest.json!')
            chrome.runtime.reload ()
        }
    })
}

...but then I thought that maybe we could simply reload the tab upon extension's startup. So the reload() function goes away and the code becomes that simple:

const watchChanges = (dir, lastTimestamp) => {
    timestampForFilesInDirectory (dir).then (timestamp => {
        if (!lastTimestamp || (lastTimestamp === timestamp)) {
            setTimeout (() => watchChanges (dir, timestamp), 1000) // retry after 1s
        } else {
            chrome.runtime.reload () // <---- reload the runtime only
        }
    })
}

chrome.management.getSelf (self => {
    if (self.installType === 'development') {
        chrome.runtime.getPackageDirectoryEntry (dir => watchChanges (dir))
        chrome.tabs.query ({ active: true, lastFocusedWindow: true }, tabs => { // <--- reload the tab upon startup
            if (tabs[0]) {
                chrome.tabs.reload (tabs[0].id)
            }
        })
    }
})

This does have a side effect — when you launch the browser for the first time, it would reload the active tab, because the extension couldn't know if it's been reloaded or not. But as long as it happens only on a developer's machine, that is a minor price for maintaining the code simple and not requiring extra permissions.

Let me know your thoughts on that.

P.S. Also note that I have changed currentWindow: true to lastFocusedWindow: true as it was suggested long time ago in #5. I found it a better option because it allows reloading the tab while being focused on the extension's DevTools open in a separate window. Let me know if that doesn't work well.

[gbro3n]

Have tested out your fix and can confirm works for me. The original issue of injected content remains solved and if your fix requires fewer manifest permissions then that's a win. Thanks for the good work :)

[xpl]

The fix has gone into master. Thanks for you work too!