The if/else in background script does not execute on extension click but only after unpacked extension refresh

Question

I'm trying to load a background script (extension-starter.js) that contains an if/else statement. I store a user's preference for how to open the extension (popup, new window, new tab) in local storage. Upon opening the extension, I expect it to retrieve the saved value and open the extension appropriately, but for some reason when changing the preference (for example from popup to new tab), clicking the extension icon opens the extension in the previous state. Only after I refresh the unpacked extension does it open the app as expected.

    // Here is the manifest.json...(took out unnecessary info)
    {
    "manifest_version": 2,
    "background": {
    "persistent": false,
    "scripts": ["extension-starter.js"]
    },
    "browser_action": {}
}
    // Here is the extension-starter.js...
    const extPrefer = localStorage.getItem('extensionPreference');

    if (extPrefer === null) {
    localStorage.setItem('extensionPreference', 'popup');
    }

    chrome.browserAction.onClicked.addListener(function () {
    if (extPrefer === 'window') {
        chrome.windows.create({url: chrome.runtime.getURL("index.html"), width: 500, height: 600});
    }
    else if (extPrefer === 'tab') {
        chrome.tabs.create({url:chrome.extension.getURL("index.html")});
    }
    else {
    chrome.browserAction.setPopup({
        popup: "index.html"
    });
    }
    })

I expect to retrieve the saved preference from local storage and open the extension in the desired manner.

---

UPDATE The above issue is caused by chrome.browserAction.setPopup({popup: "index.html"});. Once the setPopup is executed, I cannot update back to window or tab preference. It seems like setPopup is being set on the manifest and cannot be overwritten when changing the preference from popup to tab or window.

Updated Question: 1. Is there a way to do the opposite of setPopup? 2. Is there another method for setPopup?

Answer 1

Okay, I figured it out! Below I will explain the ultimate issue and then, the solution.

Issue

In the background script, I wanted to allow a saved value in localStorage to determine whether the extension opens as a popup, a new window, or a new tab. Switching between window and tab worked, except when switching from popup. If popup is selected, the extension would open as a popup. When switching to new tab, for example, the extension would still open as a popup. The new value would only work after restarting the extension. The issue was in, drumroll please:

chrome.browserAction.setPopup({popup: "index.html"});.

Solution

I am not sure as to the exact cause of the issue above (and I don't want to just say things that may be false or not 100% accurate) but the simple solution was executing the setPopup method on a tab rather than the browser.

First, in the chrome.browserAction.onClicked.addListener method's callback function pass in tab. chrome.browserAction.onClicked.addListener(function (tab) {

Second, set the setPopup to execute on the tab by doing the following... chrome.browserAction.setPopup({tabId: tab.id, popup: "index.html"});

The above solution works like a charm. If anything is not clear, please let me know! Thanks JamesWasson for helping!