1

私は、(とりわけ) ページ上の GIF 画像に影響を与える Chrome 拡張機能に取り組んでいます。最初のページの読み込み後に動的に追加された新しい画像に対して機能させるのに苦労しています。これを処理するために、コンテンツ スクリプトに追加したものは次のとおりです。

function processGif(newTag) {
  console.log(newTag.src);
}

var observer = new MutationObserver(function(mutations, obs) {
  for(var i=0; i<mutations.length; ++i) {
    for(var j=0; j<mutations[i].addedNodes.length; ++j) {
      var newTag = mutations[i].addedNodes[j];
      if(newTag.tagName == "IMG" && /.gif$/i.test(newTag.src)) {
        processGif(newTag);
      }
    }
  }
});

observer.observe(document.documentElement, {
  childList: true,
  subtree: true
});

processGifテスト目的で、関数をconsole.logタグのsrc属性にすぎないように縮小しました。

ほとんどの場合、ページが最初にロードされたときに DOM が最初に構築されるため、うまく機能し、作成されたすべての初期画像を正常にキャッチします。しかし、Google+ のようなページでは、下にスクロールしても MutationObserver は動的に読み込まれた投稿をまったくキャッチしていないようです。テスト目的でKoushik Dutta の公開ページを使用してきました。彼はGIF を投稿するのが大好きです。上記のコードをコンソールに貼り付けて下にスクロールしようとすると、動的に読み込まれた画像が検出されていないことを確認できるはずです。

これらの動的に追加されたimgタグが表示されないのはなぜですか? また、このように動的に追加された画像を処理するにはどうすればよいですか?

4

1 に答える 1

4

私は何が起こっているのかを理解したと思います。オブザーバーを介して取得するaddedNodesリストは、実際には DOM に追加されたすべてのノードのリストではなく、複数のノードが一度に追加された場合の最上位のノードのみです。

これを考慮して、追加された各ノードとそのすべての子も処理する必要があります。したがって、オブザーバー コールバックを次のように変更する必要があります。

observer = new MutationObserver(function(mutations, obs) {
  for(var i=0; i<mutations.length; ++i) {
    for(var j=0; j<mutations[i].addedNodes.length; ++j) {
      var newTag = mutations[i].addedNodes[j];
      if (newTag.querySelectorAll) {
        Array.prototype.forEach.call(
          newTag.querySelectorAll('img[src*=".gif"]'),
          processGif);
      }
    }
  }
});
于 2014-09-07T15:52:12.727 に答える