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

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

代码检查类，但它设置id。 These are very different如果可能有多个 div，则 class 是要使用的正确属性/属性。

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