Hello everyone, I am fairly new to developing extensions but I am eager to learn. I am currently working on creating an extension that specifically blocks certain Twitter icons. Through a helpful tutorial, I have been able to gather a lot of information. I have successfully extracted tweets from the DOM, checked for usernames, and disabled the display of specific images using JavaScript.
I have made progress by setting up a mock page, which I have named twitter.html, designed like this:
<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>
While I have successfully hidden the images, I am struggling with getting the code to run at the right time. I am using the Safari extension builder which allows me to provide a main page, as well as before-load and after-load JS files. However, the page load completes before any tweets are loaded due to the AJAX operations used by the actual twitter.com website.
How can I ensure that my JS code runs after the tweets have been loaded?