Selector for the <div> which contains tweets on twitter website

Front End Help
#1

I am building a Chrome extension that requires a button to be positioned right below the text of the tweet. Since this would require knowing the selector for the <div> tag which contains the tweet, I tried to search for a common selector for the tweets. Unfortunately, I found out that Twitter changes the class name of that all the<div> tags each time the website updates and I couldn’t find any other unique selector to access it such as ID. The parent and sibling elements also had dynamic class names. I tried using the DOM path as a selector but that doesn’t work for all tweets and sometimes, it returns null.

For example, I want to add the button below the text and above the image.

image
image598×591 87.9 KB

I would appreciate if someone could help me out in finding the appropriate selector for all tweets.

#2

Hello devguru.

Often, I use hierarchical selectors, or the XPath. For example, selecting your name in this post:

//*[@id="post_1"]/div[2]/div[2]/div[1]/div[1]/span/a

Or

.select('article > div > div > div > div > span > a

Hope this helps.

#3

Hi Sky020,
I tried using this as well but it didn’t work consistently. Sometimes it returns null, other times it returns a NodeList but leaves out several tweets.

#4

What if you extracted the div inside the tweet’s parent div, it always has a constant class=content?

Actually, I am being stupid…if you can get this, then you can select it’s parent. So, that should work fine.

#5

There’s no class which remains constant. It changes every time the page is refreshed. Moreover, the elements don’t have an ID as well

#6

What do you mean?

From what I see, every tweet has many attributes that remain constant. One of them being the class=content. You do not have to have an id.

#7

The class of the tweets every time the page is loaded. I couldn’t find any element with the ‘content’ class when I used a querySelector for searching in the DevTools console. Class names of tweets look like class="css-1dbjc4n r-1iusvr4 r-16y2uox r-1777fci r-5f2r5o r-1mi0q7o" and change if the page is reloaded.

#8

image
image1011×193 17 KB

Every tweet is contained in a li, which has a div with some random class, which has a div with class=content.

image
image386×520 16.4 KB

So, from what I have seen, every tweet is accessible by li > div > div[class='content']. Yes, you may want the parent div of the one with the class='content', but that is easily selected through some method like:

let tweet = document.getElementsByClassName("content")[0].parentNode;

I hope this has helped.

#9

How does this work when twitter is dynamically loaded and it won’t deploy after it’s loaded but before