0

我正在开发一个小型 Firefox 插件，用于PageMod处理网页中加载的图像元素。我在网上看到过使用 jQuery 的示例，但由于我正在向每个网页添加内容脚本，因此添加 jQuery 可能会造成无法弥补的损害。

由于 Firefox 支持，感谢AndrewVermieMutationObserver，我尝试执行以下操作：

内容.js

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {

    if(mutation.tagName == "IMG")
    {
        //I'm not sure this object can be treated as a DOM Element (?)
        mutation.src = "http://s6.tinypic.com/15npphk_th.jpg";
    }

    for (var i = 0; i < mutation.addedNodes.length; ++i) {
          var node = mutation.addedNodes[i],
              matches = [].slice.call(node.querySelectorAll('img'));

          for (var j = 0; j < matches.length; ++j) {
              var img = matches[j];
              img.src = "http://s6.tinypic.com/15npphk_th.jpg";
          }
      }
   });
});

var config = { attributes: true, childList: true, subtree: true, characterData: true};
observer.observe(window.document, config);


var elements = document.getElementsByTagName("img");
var elementsLength = elements.length;
for (var i = 0; i < elementsLength; i++) 
{
    elements[i].src = "http://s6.tinypic.com/15npphk_th.jpg";
}

main.js

pageMod.PageMod({
    include: "*",
    contentScriptWhen: 'ready',
    contentScriptFile: [self.data.url("content.js")],
    onAttach: //...
    }
});

怎么了 ：

  1. 访问http://imgur.com/
  2. 开始滚动直到动态加载图像
  3. 请注意，它们没有改变

当我将鼠标悬停在图像上时，我console.log()只能看到.tagName。p#text

我需要的

遍历注入脚本的网页中动态加载的每个元素，并能够修改元素的属性。

如果它可以用纯 JavaScript 来完成，不管有没有MutationObserver，那都会非常棒。

否则，如果我能发现某些元素已被加载以再次通过页面的所有元素重复，那会没问题但不会膨胀。

我希望我已经把事情弄清楚了。

任何帮助将不胜感激。

4

1 回答 1

2

您在这里的错误是认为所有节点实际上都有一个querySelectorAll方法。例如文本节点没有！因此，您调用了一个不存在的方法，该方法引发了异常并提前结束了您的处理（因为 imgur.com 上的第一个突变节点实际上是一个文本节点）。

这是我想出的，似乎在做你所追求的，ecma-6-ified一点：p。我的内容脚本：

var observer = new MutationObserver(function(mutations) {
  for (var m of mutations) {
    for (var node of m.addedNodes) {
      if (!node || !node.querySelectorAll) {
        // Not all nodes support querySelectorAll, e.g. text nodes.
        continue;
      }
      for (var img of node.querySelectorAll("img")) {
        img.src = "http://s6.tinypic.com/15npphk_th.jpg";
      }
    }
  }
});

var config = { attributes: true, childList: true, subtree: true, characterData: true};
observer.observe(window.document, config);

var elements = document.getElementsByTagName("img");
var elementsLength = elements.length;
for (var i = 0; i < elementsLength; i++) {
    elements[i].src = "http://s6.tinypic.com/15npphk_th.jpg";
}
于 2014-05-20T07:50:04.813 回答