Question

我正在尝试学习使用Firefox创建扩展程序，但我遇到了一些问题，我希望有经验的人可以给我一些提示。

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

我发现这个有趣的人遇到了一个非常类似的问题：Interacting with DOM for AJAX webpages?并尝试测试某人提出的答案。不幸的是，当我运行我的脚本时，我收到以下错误：“getattribute不是函数”

为了清楚起见，我使用的是该帖子中的相同片段（使用twitter.com进行测试）

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（），每当我从我的扩展中的window.addEventListener（“load”）获得回调时都会调用它。

知道如何解决这个问题吗？我目前正在使用上述脚本仅用于测试目的，因为它与我想要实现的目标完全相同。

提前致谢！

Answer 1

Felix Kling是正确的，您应该在内容文档上注册您的事件处理程序 - 现在您正在侦听正在添加到浏览器的节点（很可能是新选项卡）。当然，这仅在内容文档可用时才有可能，例如在DOMContentLoaded事件中。这也有一个优点，就是只减慢你真正想要查看的文档（在文档中有一个DOMNodeInserted事件监听器会大大减慢DOM修改）。这样的事情（未经测试但应该有效）：

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

请注意节点类型的附加检查 - 例如，还插入了文本节点，并且没有getAttribute方法（这可能导致您的错误）。您只想查看元素节点。

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

1 个答案: