Javascript 使用AJAX（Firefox扩展）通过页面访问DOM

我正试图学习使用Firefox创建扩展，但我遇到了一些问题，我希望更有经验的人能给我一些建议

这个想法是做一个虚拟扩展，在加载页面后访问DOM，因此我将钩住DOMContentLoaded，稍后迭代某些元素类getElementsByClassName。我注意到的问题是，我得到一个零长度数组作为响应。我假设这是因为页面使用异步脚本加载部分内容，当事件触发时，内容尚未完成

我发现有人遇到了一个非常类似的问题，这是一条有趣的线索：我试图测试某人提出的答案。不幸的是，当我运行脚本时，会出现以下错误：“getattribute不是函数”

为了清楚起见，我使用了那篇文章中的相同片段（使用twitter.com进行测试）

除了我使用的是

gBrowser.addEventListener（）

，每当我从扩展名中的

window.addEventListener（“load”）

获得回调时，就会调用它

---

你知道如何解决这个问题吗？我目前正使用上述脚本进行测试，因为这与我试图实现的目标完全相同。

Felix Kling是正确的，您应该在内容文档中注册事件处理程序-现在您正在侦听添加到浏览器中的节点（很可能是新选项卡）。当然，这只有在内容文档可用时才可能，例如在

DOMContentLoaded

事件中。这还有一个优点，即您只会减慢真正想要查看的文档的速度（在文档中使用

DOMNodeInserted

事件侦听器会大大降低DOM修改的速度）。类似这样的内容（未经测试，但应该有效）：

---

请注意节点类型的附加检查-例如，还有一些文本节点正在插入，而这些节点没有

getAttribute

方法（这可能是导致错误的原因）。您只想查看元素节点。

您可能应该在页面的

文档

对象上侦听事件，而不是在Firefox UI上。尝试：

gBrowser.contentDocument.addEventListener（）

.Thansk，但这样做不会触发任何事件！我甚至尝试了DOMContentLoaded只是为了测试，但它也不起作用。OTOH，使用普通的gBrowser.addEventListener（）似乎确实有效..谢谢你Wladimir，这真的很有帮助。尽管我是个新手，但你说的很有道理（顺便向Felix道歉！）不幸的是，它仍然不起作用。我注意到streamItem.getAttribute（'class'）总是返回null，因此脚本以后将无法执行很多操作。不幸的是，我只能使用类，因为我无法控制dom的生成。有什么想法吗？谢谢不用说，html结构看起来是正确的：@Dan：我建议您看看

event.target.localName

和

event.target.innerHTML

，看看插入的内容。可能它不是流项目本身，而是它的父节点（或完全无关的东西）。

window.addEventListener("DOMNodeInserted",
function(event){ 
    var streamItem = event.target;
    if (streamItem == null)
        return;

    if (streamItem.getAttribute('class') != 'stream-item')
        return;

    var tweet = streamItem.getElementsByClassName("tweet",streamItem)[0];
    var name = tweet.getAttribute("data-screen-name");
    if (name.toLowerCase() == 'some-username'.toLowerCase()) 
    {
        var icon = tweet.getElementsByTagName("img")[0];
        icon.style.display='none';
    }
}, 
false);

gBrowser.addEventListener("DOMContentLoaded", function(event)
{
  var contentDoc = event.target;  // That's the document that just loaded

  // Check document URL, only add a listener to the document we want
  if (contentDoc.URL.indexOf("http://example.com/") != 0)
    return;

  contentDoc.addEventListener("DOMNodeInserted", function(event)
  {
    var streamItem = event.target;
    if (streamItem == null || streamItem.nodeType != Node.ELEMENT_NODE)
      return;

    ...
  });
}, false);