How to update add-on without breaking content-scripts

juraj.masiar · February 25, 2019, 10:03am

I’m working on a new add-on that has some UI that can be in injected in any page. When I reload add-on, I can see the UI is not responsive anymore, because the javascript part is gone but the DOM persists. This is very bad user experience.

If I’m right, this will happen for all users every time I release a new version.

As a possible solution I could:

delay the update using runtime.onUpdateAvailable API
save list of tabs with injected scripts
remove all DOM nodes
use browser.runtime.reload() to install update
use browser.runtime.onInstalled.addListener event to re-inject scripts and recreate DOM

This is a lot of work, maybe there is an easier way?

luckyrat · February 28, 2019, 9:34am

Firefox injects content scripts automatically after an update (or install); Chrome does not. For that reason alone you need to do some work to handle the update procedure in order to not break functionality when an update randomly arrives.

So you could try doing something a bit like this:

github.com

kee-org/browser-addon/blob/7e1176e8514417b523f834ebf5694a9bc0699024/background/KF.ts#L1018-L1057


// Some browsers (e.g. Firefox) automatically inject content scripts on install/update
// but others don't (e.g. Chrome). To ensure every existing tab has exactly one
// instance of this content script running in it, we programatically inject the script.
if (!__KeeIsRunningInAWebExtensionsBrowser) {
browser.runtime.onInstalled.addListener(details => {
    const showErrors = () => {
        if (browser.runtime.lastError) {
            if (KeeLog && KeeLog.error) KeeLog.error(browser.runtime.lastError.message);
            else console.error(browser.runtime.lastError);
        }
    };
    browser.runtime.getManifest().content_scripts.forEach(script => {
        const allFrames = script.all_frames;
        const url = script.matches;


        // We have to define the list of expected Vault URLs here as well as in
        // the manifest because there is no API available to automatically handle
        // the manifest globs and it's not worth bundling a generic parser for
        // just this one use case.
        const vaultURLs = ["https://app-dev.kee.pm:8087/", "https://app-beta.kee.pm/", "https://app.kee.pm/", "https://keevault.pm/"];

This file has been truncated. show original

Then, when your content script loads, it could check the current page for the existence of the DOM you injected and either hook up the necessary events again or delete and recreate it from scratch.

juraj.masiar · February 28, 2019, 1:44pm

Thank you for the info, that’s very good to know.
However in this add-on I’m injecting my content script dynamically using browser.tabs.executeScript so here Firefox won’t re-inject them, right? At least it will behave same way in all browsers .

luckyrat · February 28, 2019, 6:13pm

I’ve not used that API before but that’s my understanding of it, yes.