如何在点击Chrome扩展程序图标时更改内容脚本变量？

Question

我想通过点击Chrome扩展程序的图标来更改我的contentcript文件中的变量。你知道我怎么做吗？

以下是我的代码示例：

background.js：

var myVariable = false;

chrome.browserAction.onClicked.addListener(function (tab) { //Fired when User Clicks ICON

  chrome.tabs.executeScript(tab.id, {
      "file": "zen-reading.js"
  }, function () {
      console.log("Script Executed .. ");
  });
  if (myVariable === false) {
    chrome.tabs.executeScript({
      code: 'myVariable = ' + true + ';'
    });
    myVariable = true;
  }
  else {
    chrome.tabs.executeScript({
      code: 'myVariable = ' + false + ';'
    });
    zenMode = myVariable;
  }

});

contentscript.js：

if (myVariable === true) {
  doSomething();
}

if (myVariable === false) {
  doSomethingElse();
}

Answer 1

• 方法1：将内容脚本分成两部分，并根据myVariable注入其中一个。

• 方法2：在注入脚本文件之前注入设置变量的代码：

  chrome.tabs.executeScript(tab.id, {
      code: "var myVariable=" + myVariable.toString()
  }, function(results) {
      chrome.tabs.executeScript(tab.id, {file: "zen-reading.js"}, function(results) {
          ..........
      });
  });
  

  如果它不是布尔值/数字，请使用JSON：

  code: 'var myVariable=JSON.parse("' + JSON.stringify(myVariable) + '")'
  

• 方法3：注入文件一次并使用messaging。这稍微复杂一点，因为如果活动选项卡注入了内容脚本，则需要首先检查（使用executeScript查找内容脚本应该定义的变量），如果用户可能不是这种情况导航到同一标签中的另一个网址。