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

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.

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

Hello devguru.

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



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

Hope this helps.

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.

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.

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

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.

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.

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

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.

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