AJAX WebページのDOMとのやりとりですか？

ねえ、私はエクステンションを開発する経験はありませんが、私は学ぶためにそれをやっています。私は特定のツイッターアイコンだけをブロックする拡張機能を作りたいと思います。これを見て、tutorial私は多くを考え出した。私はDOMからつぶやくことができ、ユーザー名をチェックし、JavaScriptでその画像の表示を無効にすることができます。 AJAX WebページのDOMとのやりとりですか？

が、私はこれまで、のは、それがtwitter.html呼びましょう偽のページを作成することによってこれを得た、それは少し次のようになります。

<html> 
    <div class="stream-item" data-item-type="tweet"> 
     <div class="tweet-image"> 
      <img src="abc.jpg" data-user-id="1234"> 
     </div> 
    </div>

.....

<script src="utility.js"></script> 
<script type="text/javascript"> 
var tweets = getElementsByClass("tweet"); 
for (var i = 0; i < tweets.length; i++) { 
    var tweet = tweets[i]; 
    var name = tweet.getAttribute("data-screen-name"); 
    if (name.toLowerCase() == 'some-username'.toLowerCase()) { 
     var icon = tweet.getElementsByTagName("img")[0]; 
     icon.style.display='none'; 
    } 
} 

</script> 

</html>

ので隠ぺいを画像は問題ではありませんが、適切な時間に実行する係数を得ることは問題です。 Safari拡張ビルダーを使用して、メインページとロード前とロード後のjsファイルを提供できます。しかし、実際のtwitter.comが使用するAJAXのため、つぶやきが読み込まれる前にページの読み込みが完了しています。

は、のツイートが読み込まれた後に実行するにはどうすればよいですか？

出典

2010-12-04 Derrick

提供されたコードは、すべてのデータが読み込まれていることを前提としています。何がデータをロードするのですか？あなたが他の誰かのAPIを使っているならば、彼らはたぶんあなたが「完全な」イベントに繋がる方法を提供しているでしょう。 – mqsoh

返事をありがとう。はい、正確には、すべてのデータがロードされていると仮定します。そのすべては、特定の要素にスタイルを適用することにかなりのものです。私はページの 'ドキュメントオブジェクトモデル'以外のAPIは使用していません。私は拡張機能を使ってそれをやろうとしています。 [Facebook Neue]（http://soggysh.it/facebook-neue/）エクステンション – Derrick

と非常によく似ています。データのロードに関する質問に答えるには：ブラウザがtwitter.comに行くと、いくつかのjavascriptが素早く読み込まれます。その後、そのJavaScriptはおそらく、非同期http要求のツイートをロードするための束を行います。私はウェブ開発者ではないので、これを100％正確と見なしてはいけません。 – Derrick

あなたが呼ばれDOMNodeInserted、...よく、DOMノードが挿入されるたび:) が一度受信に耳を傾けるべきでは、ノードが興味のあるタイプであるかどうかを確認し、そこから進みます。

私は変更に対応するためにコードを修正する自由を取ってきました。 Chromeでこれを正常にテストしました。

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

出典

2010-12-04 08:43:02 Sasha

ありがとう。それは働いた！ – Derrick

問題はありません、楽しんでください！ – Sasha

AJAX WebページのDOMとのやりとりですか？

答えて

関連する問題