keep-tabs-open

Keep WebExtension tabs open

This drop-in module does one simple thing: it allows you to keep the extension tabs of your WebExtension open when you reload it during development.

Notes / Limitations

It is not possible to catch the 'unload' event of the background page (in Firefox 65), so this module (only) hooks into the browser.runtime.reload() method, which means that it will only handle reloads initiated by calls to that method, and not reloads caused by clicking Reload on about:debugging#addons or updating/re-installing the extension. I'd suggest you put a button that invokes that function on your extension pages (which you want to have open anyway) or add a context menu option (see below).

I was reminded of this problem and decided to use it as a quick exercise. Is it Worth the Time is already giving me a clear no, so here is the solution I came up with in about two hours:

• Firefox keeps unloaded/discarded extension tabs open, so unload all tabs prior to reloading the extension, then reload them to load them again.
• But that only works if the tab is not active in its window, so if that is the case, open a new tab with a reload notice.
• But now we have those additional tabs, so close them after reloading the extension.
• But then you have those closed tabs in the session history, so remove them from there as well.
• And I hope that's it.

This probably requires the 'tabs' permission, and to remove the temporary tabs from the history, it (optionally) requires the 'sessions' permission (which you might want to only add to development builds).

Usage

This module is available via NPM, so do npm install keep-tabs-open. Now include the file node_modules/keep-tabs-open/index.js in your extension (web-ext might mess with this) and load it as a background script (however you do that with your other scripts).

If you use an AMD loader (like require.js) the script will define an anonymous module, otherwise it exposes itself as a keepExtTabsOpen global function. Either way, you need to call that function with extension specific options (all optional) to activate it:

• iconUrl: favicon of the temporary reload tab.
• title: HTML title of the temporary reload tab.
• message: HTML message to display on the temporary reload tab.
• browser: Promise capable browser API to use and patch. Defaults to the browser global, so in Firefox you usually don't need to supply this.

E.g.:

background/index.js:

const manifest = browser.runtime.getManifest();
require([ 'node_modules/keep-tabs-open/index', ], keepExtTabsOpen => {
    keepExtTabsOpen({ browser: global.browser, iconUrl: '/icon.png',
        title: 'Reloading: '+ manifest.name, message: `
            <style> :root { background: #424F5A; filter: invert(1) hue-rotate(180deg); font-family: Segoe UI, Tahoma, sans-serif; } </style>
            <h1>Reloading ${manifest.name}</h1><p>This tab should close in a few seconds ...</p>
        `,
    }).catch(console.error);
});

If you have the 'menus' or 'contextMenus' permission, you can also add this to make reloading the extension more convenient.

const Menus = browser.menus || browser.contextMenus; if (Menus) {
    Menus.create({ contexts: [ 'browser_action', ], id: 'extension:restart', title: 'Restart Extension', });
    Menus.onClicked.addListener(({ menuItemId, }) => { menuItemId === 'extension:restart' && browser.runtime.reload(); });
}