0

私はPageMod、Web ページに読み込まれた画像要素を処理するために使用する小さな Firefox アドオンに取り組んでいます。jQuery を使用した Web 上の例を見てきましたが、すべての Web ページにコンテンツ スクリプトを追加しているため、jQuery を追加すると取り返しのつかない損害が発生する可能性があります。

Firefox がサポートしているので、 AndrewVermieMutationObserverのおかげで次のことを試みました。

content.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

必要なもの

スクリプトが挿入された Web ページ内に動的にロードされた各要素を反復処理し、要素の属性を変更できるようにします。

純粋な JavaScript を使用して、または使用せずにそれを行うことができれば、それはMutationObserver本当に盛り上がります。

それ以外の場合は、ページのすべての要素をもう一度繰り返すためにいくつかの要素が読み込まれていることがわかった場合、それは問題ありませんが、膨らみません。

私は物事を少し片付けたことを願っています。

どんな助けでも大歓迎です。

4

1 に答える 1

2

ここでの間違いは、すべてのノードが実際にquerySelectorAllメソッドを持っていると考えることです。たとえば、テキストノードはそうではありません! そのため、存在しないメソッドを呼び出したため、例外がスローされ、処理が早期に終了しました (imgur.com の最初のミューテーション ノードは実際にはテキスト ノードであるため)。

これが私が思いついたものです。あなたが求めていることを行うように見えるものは、ecma-6化されたビットです: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 に答える