0

I have a chrome extension for Twitter where I add a button to all those tweets which have images in them. The code in the content script is something like this:

$(".tweet, .js-tweet").each(function() {
            var username = $(this).attr('data-screen-name');
            var tweetid = $(this).attr('data-tweet-id');
            if (username != null) {
                var mediaLinkContainer = $(this).find(".card2")
                addButtonToMediaLinkTweets(tweetid, mediaLinkContainer)
                // addOverlayToMediaLinks()

                var outerContainer = $(this).find(".AdaptiveMediaOuterContainer")
                var mediaContainer = $(this).find(".AdaptiveMedia-photoContainer")
                if (mediaContainer.length) {
                    console.log("Photo found in link")
                   addButtonToPosts(tweetid, outerContainer)
                   // addOverlayToPosts(outerContainer)
                }
            }
        });

This worked perfectly with the older UI of Twitter, but this doesn't work after the new UI was rolled out. All the class names have changed and the view hierarchy is different as well. I'm trying to navigate through all of that to make my extension work again. The following class name appears a lot of times - css-1dbjc4n I tried the following to iterate over all the tweets:

$('.css-1dbjc4n.r-1ila09b.r-qklmqi.r-1adg3ll').each(function() {
            console.log($(this).html())
        })

.css-1dbjc4n r-1ila09b r-qklmqi r-1adg3ll are the classes assigned to the div that is at the second to top most level of a tweet (the topmost div does not have a class or id). However, console.log does not print anything in this case. I need to iterate over the tweets to be able to add my UI element.

Edit: It seems that jQuery has issues with the new Twitter UI. When I wrote the following in vanilla JavaScript:

var tweetDivs = document.getElementsByClassName("css-1dbjc4n r-1ila09b r-qklmqi r-1adg3ll")
        console.log(tweetDivs)
        //get images inside the tweets and add button on top of these images
        $(tweetDivs).each(function(tweet) {
            console.log(tweet)
        })

I get a HTML collection in tweetDivs. However, I'm unable to iterate over its elements as its length is 0. The elements show up in console though, but that's probably because the DOM hasn't loaded when this gets called. That's weird because I'm calling the above code from document.ready. I tried replacing document.ready with document.addEventListener("DOMContentLoaded", function(){}) and changed run_at in manifest.json file to document_start but it did not make a difference.

Crazed'n'Dazed
  • 461
  • 1
  • 7
  • 20
  • 1
    Expect these classes to change very regularly. Quite possibly with every major deployment Twitter does. – ceejayoz Jul 24 '19 at 20:01
  • yes, I agree. What would be a more appropriate approach, if I don't want to rely on class names? The use case is to add an element, say a button as described in the question, to all those tweets that contain images – Crazed'n'Dazed Jul 24 '19 at 20:54
  • This is a dynamic site that creates its content long after DOMContentLoaded was fired so your content script won't see it. There are multiple methods to detect the changes, see [this answer](https://stackoverflow.com/a/39508954). – wOxxOm Jul 25 '19 at 04:58

0 Answers0