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

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

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.id = "my-special-div";
        document.body.appendChild(div);
    }
    else {
        document.getElementsByClassName("my-special-div")[0].remove();
    }
});

有什么建议吗？

我想这个问题可以更普遍地提出：我如何保留关于内容脚本中创建的内容的任何状态信息，这些内容脚本也可以访问这些信息？

Answer 1

代码检查是否有class，但它设置id。这些是非常不同的，如果可能有多个div，则类是要使用的正确属性。

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