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.
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.
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.
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;