内容脚本找不到创建的元素？

Question

我正在尝试让我的扩展程序中的工具栏按钮（浏览器工具栏）打开和关闭一个 div。但是，我发现内容脚本找不到我创建的任何对象。

这是第一次单击时创建 div 的代码。但是在第二次点击时，它只会创建另一个，当它应该找到最后一个并将其删除时：

main.js:

var self = require("sdk/self");
var tabs = require("sdk/tabs");

var button = require("sdk/ui/button/action").ActionButton({
  id: "style-tab",
  label: "Style Tab",
  icon: "./icon-16.png",
  onClick: function() {

    worker = tabs.activeTab.attach({
      contentScriptFile: self.data.url("my-script.js")
    });
    worker.port.emit("myaction", "whatever");
  }
});

我的脚本.js：

var div = 0;
self.port.on("myaction", function(color) {
    var el = document.getElementsByClassName("my-special-div");
    if (el.length) div = el[0];
    else div = 0;       

    if (!div) {
        // add div
        div = document.createElement("div");
        div.id = "my-special-div";
        document.body.appendChild(div);
    }
    else {
        document.getElementsByClassName("my-special-div")[0].remove();
    }
});

有什么建议吗？

我想这个问题可以更笼统地提出：我如何保留有关内容脚本中创建的东西的任何状态信息，也可以由内容脚本访问？

Answer 1

代码检查 class 但它设置 id。 These are very different，如果这些divs 可能不止一个，那么类是要使用的正确属性/属性。

my-script.js 应该是这样的：

var div = 0;
self.port.on ("myaction", function (color) {
    var el = document.getElementsByClassName ("my-special-div");
    if (el.length) div = el[0];
    else div = 0;       

    if (!div) {
        // add div
        div = document.createElement ("div");
        div.classList.add ("my-special-div")
        document.body.appendChild (div);
    }
    else {
        div.remove ();
    }
} );