Chrome扩展程序：阻止“不是当前选项卡”更改Chrome本地存储变量/隔离当前的TAB本地存储范围

如何解决Chrome扩展程序：阻止“不是当前选项卡”更改Chrome本地存储变量/隔离当前的TAB本地存储范围

我正在构建一个扩展程序，用于更改网站DOM。默认情况下，扩展会在安装时从Chrome本地存储中获取“ isExtensionRunning”变量来激活。问题是，当我打开一个新标签页（扩展程序未在其中运行时，使用一个完全独立的TAB）然后将其关闭时，“ isExtensionRunning”本地存储变量将获得一个未定义的值，从而触发我的扩展程序内容脚本上的事件侦听器停止扩展在另一个标签上。

我不知道chrome本地存储存在于您打开的每个选项卡中，即使扩展名未在该选项卡上激活，它也可以对其进行操作。我只希望激活扩展的选项卡设置并获取变量的值，以便我可以激活或停止扩展。

这是我的manifest.js：

{
  "manifest_version": 2,"name": "xyz","version": "1.0.8","author": "Jorge Páez","description": "xyz","short_name": "xyz","background": {
    "scripts": ["libraries/jquery-3.5.1.min.js","scripts/background.js"],"persistent": false
  },"content_scripts": [
    {
      "matches": ["just this tab*"],"css": ["styles/custom.css"],"js": [
        "libraries/jquery-3.5.1.min.js","scripts/content.js","scripts/ajaxCalls.js"
      ],"run_at": "document_end"
    }
  ],"web_accessible_resources": [
    "images/*.*","scripts/*.*","libraries/*.*","data/*.*","modal.html"
  ],"icons": {
    "16": "icons/icon16.png","32": "icons/icon32.png","48": "icons/icon48.png","128": "icons/icon128.png"
  },"permissions": [
    "activeTab","declarativeContent","storage","identity","identity.email"
  ],"page_action": {
    "default_title": "xyz","default_popup": "popup.html"
  }
}

这是我的popup.js

function save_button_state() {
  var buttonStateText = $('#js-toggleSorting').html();
  chrome.storage.local.set(
    {
      buttonStateText: buttonStateText
    },function () {}
  );
}
function get_button_state() {
  chrome.storage.local.get(['buttonStateText'],function (data) {
    $('#js-toggleSorting').html(data.buttonStateText);
  });
}
$(document).ready(() => {
  chrome.tabs.executeScript(null,{
    file: 'libraries/jquery-3.5.1.min.js'
  });
  get_button_state();
  let isExtensionRunning;
  let checkExtensionStatus = function (isExtensionRunning) {
    if (isExtensionRunning === true) {
      $('#js-toggleSorting').html('STOP EXTENSION');
    } else {
      $('#js-toggleSorting').html('ACTIVATE EXTENSION');
    }
  };
  chrome.storage.local.get(['isExtensionRunning'],(result) => {
    isExtensionRunning = result.isExtensionRunning;
    console.log(isExtensionRunning);
    checkExtensionStatus(isExtensionRunning);
  });
  chrome.storage.onChanged.addListener((changes) => {
    if (changes.isExtensionRunning) {
      isExtensionRunning = changes.hasIncomingChats.newValue;
      checkExtensionStatus(isExtensionRunning);
    }
  });
  $('#js-toggleSorting').on('click',function () {
    chrome.storage.local.get(['isExtensionRunning'],function (data) {
      isExtensionRunning = data.isExtensionRunning;
      if (isExtensionRunning) {
        $('#js-toggleSorting').html('STOP EXTENSION');
        chrome.storage.local.set({ isExtensionRunning: false });
      } else {
        $('#js-toggleSorting').html('ACTIVATE EXTENSION');
        chrome.storage.local.set({ isExtensionRunning: true });
      }
      save_button_state();
    });
  });
});

这是我的内容脚本，其中的runExtension（）是将执行所有这些DOM更改的函数：

chrome.storage.onChanged.addListener((changes) => {
  if (changes.isExtensionRunning) {
    isExtensionRunning = changes.isExtensionRunning.newValue;
    console.log(
      `hello from content script,the value of isExtensionRunning has changed to: ${isExtensionRunning}`
    );
    if (!isExtensionRunning) {
      console.log('extension stopped');
      chrome.storage.local.set({ isExtensionRunning: false });
      window.location.reload();
    } else {
      runExtension();
    }
  }
});
chrome.storage.local.get(['isExtensionRunning'],function (data) {
  if (data.isExtensionRunning === undefined) {
    chrome.storage.local.set({ isExtensionRunning: true });
  } else {
    if (data.isExtensionRunning) {
      runExtension();
    }
  }
});