Взаимодействуете с DOM для веб-страниц AJAX? - PullRequest
1 голос
/ 04 декабря 2010

Эй, ребята, у меня нет опыта в разработке расширений, но я делаю это, чтобы учиться. Я хотел бы сделать расширение, которое блокирует только определенные иконки Twitter. Просматривая этот урок , я многое понял. Я могу отправлять твиты из DOM, проверять имя пользователя и отключать отображение этого изображения с помощью JavaScript.

Я достиг этого, создав поддельную страницу, назовем ее 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 до и после загрузки. Однако загрузка страницы «завершена» до того, как загружаются твиты из-за AJAX-содержимого, которое использует настоящий twitter.com.

Как заставить мой js-код запускаться после загрузки твитов?

1 Ответ

2 голосов
/ 04 декабря 2010

Вам следует прослушать 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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...