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

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

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

1 个答案: