Question

因此，我是JS的新手，这是我的第一个Chrome扩展程序。非常简单。我在扩展栏中有一个切换按钮。单击后将替换网站中的文本。再次单击，将还原为原始文本。就目前而言，它可以正常工作。我遇到的问题是，当我打开新的标签页或窗口时，切换状态没有重置。这导致：

标签1：切换功能已关闭

选项卡1：点击切换切换处于打开状态

标签2：已打开，网页上有原始文本

选项卡2：单击切换切换已关闭，因此没有任何反应

标签2：单击切换切换已打开，最后替换了文字

选项卡2：单击切换切换已关闭，文本已还原

选项卡1：单击切换切换已打开，文本已打开，因此没有任何反应

您得到图片。如果我开一个新寡妇也是一样。我需要在一个页面内保留切换状态，但是请在选项卡/窗口之间重置，以便每个选项卡/窗口仅需单击一下即可切换到下一个状态。这是我所拥有的：

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);
    }

});

任何建议都值得赞赏。我已经搜索了答案，但没有找到与该问题非常接近的东西。

Answer 1

每个打开的标签页，您都必须保持切换状态。

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});
});

扩展程序中每个Chrome标签的唯一会话

1 个答案: