Question

嘿伙计们，我对开发扩展程序没有经验，但我正在学习它。我想制作一个仅阻止某些推特图标的扩展程序。通过查看tutorial我已经找到了很多东西。我可以从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>

所以隐藏图像不是问题，但让coe在正确的时间运行是。我正在使用Safari扩展构建器允许我提供主页，以及加载前和加载后的js文件。但是，由于真正的twitter.com使用的AJAX内容，在加载任何推文之前页面加载已“完成”。

如何在加载推文后让我的js代码运行？

Answer 1

你应该监听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);

与DOM交互的AJAX网页？

1 个答案: