扩展中每个 Chrome 选项卡的唯一 Session

Question

So I'm very new to JS and this is my first Chrome extension. It's pretty straight forward. I have a toggle in the extensions bar. When clicked it replaces text in a website. When clicked again it reverts to the original text. As far as that goes, it works like it should. The issue I'm having is when I open a new tab or window, the state of the toggle isn't reset. This leads to:

Tab 1: toggle is off

Tab 1: click toggle toggle is on

Tab 2: opened, web page has original text

Tab 2: click toggle toggle is switched to off, so nothing happens

Tab 2: click toggle toggle is switched to on, finally replaces text

Tab 2: click toggle toggle is off, text is reverted

Tab 1: click toggle toggle is on, text is already on, so nothing happens

You get the picture. It's the same if I open a new widow. I need the state of the toggle preserved within one page, but reset between tabs/windows so each tab/window only takes one click to toggle to the next state. Here's what I have:

manifest.json

"manifest_version": 2,
    "name": "Chrome Decolonized",
    "icons": { "16": "icon16.png",
           "48": "icon48.png",
          "128": "icon128.png" },
    "description": "Replaces foreign names for tribes and locations in tribal homelands with the original names used by the indigenous people.",
    "version": "1.0",
     "background":
    {
        "scripts": ["background.js"]
    },
    "permissions": [
      "activeTab"
    ],
    "browser_action": {
          "default_title": "(De)Colonize Toggle" 
      }
}

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
    if (clickit == 0){
        chrome.tabs.executeScript({file:"content.js"}); //execute for this tab
        clickit++;
        //alert("Clickit was 0 and now is " + clickit);
    }else if (clickit == 1){
        chrome.tabs.executeScript({file:"colonized.js"}); // revert for this tab
        clickit++;
        //alert("Clickit was 1 and now is " + clickit);
    }else{
        chrome.tabs.executeScript({file:"content.js"}); //execute for this tab
        clickit = 1;
        //alert("Clickit was neither and now is " + clickit);
    }

});

Any advice is appreciated. I've searched for answers, but I've not found something really close to this question.

Answer 1

You will have to keep status of toggle for each opened tab.

background.js

const state = {
  loaded:   {},
  injected: {},
}

const toggleIn = ({id:tab_id}) => {
  // toggle out: it's currently loaded and injected
  if (state.loaded[tab_id] && state.injected[tab_id]) {
    chrome.tabs.executeScript(tab_id, { file: 'content.js' });
    state.injected[tab_id] = false;
  }

  // toggle in: it's loaded and needs injected
  else if (state.loaded[tab_id] && !state.injected[tab_id]) {
    chrome.tabs.executeScript(tab_id, { file: 'colonized.js' })
    state.injected[tab_id] = true;
  }

  // fresh start in tab
  else {
    chrome.tabs.executeScript(tab_id, { file: 'content.js' })
    state.loaded[tab_id]    = true
    state.injected[tab_id]  = true
  }

  chrome.tabs.onUpdated.addListener(function(tabId) {
    if (tabId === tab_id)
      state.loaded[tabId] = false
  })
}


chrome.browserAction.onClicked.addListener(function(tab) {
   toggleIn({id: tab.id});
});