Smart way to inject HTML code on a Twitter page?

After having a quick look at the html I can see data-testid used a lot, so I would probably start there data-testid="tweet".

Being lazy I searched for "data-testid" in github filtered by JavaScript got these results: https://github.com/search?l=JavaScript&q=data-testid&type=Repositories the fourth of which is doing something to minimise the twitter UI, so you could start there.

Fallbacks if the data-testid ever gets removed are as others have said you could use <article> or the CSS ids. I would also take a more abstract view and think about what you know to be true for all instances of a tweet, e.g. they all have like buttons, so find a repeated element that is a like button and work through its parents to find the tweet.

I had a thought on doing something similar recently, not for Twitter, but I think it applies the same way.

In your script, I’d probably start with the easiest thing first. As you said, Twitter, like most SPA today, use hashed classnames and IDs. They probably don’t change that much over time though - as it requires refreshing stylesheets and for a website such as Twitter, caching is key to performance.

That’s the most reliable reference you can have, so I’d definitely use that first!

But as you said, it might change, so you need some kind of fallback logic. Here are the solution that I had in mind:

1. Your script can try to select the parent element. It’s not because the childs have a new classname that the parent has changed. It might be the parent’s parent as well. Look at <main> element upper the DOM or having role="main".

2. If everything has changed, your script can determine the data structure of the webpage. In the case of Twitter, they won’t change some key parts of a tweet: the username, the tweet content, the tweet time. Try to figure out a pattern and to code it. Keep in mind as well that websites try to provide good accessibility for some of their users. That might be a good way to hack the structure. Also some websites use the data- attributes to store information (it could be a tweet ID). You can probably use that with high confidence.

3. Ask you user to tell the script where the tweet is. That’s probably the most reliable solution. And to be honest, I would code it before trying the solution #2. In term of UX, you would alert the user that you didn’t detect tweets. And ask them to help. It can be as easy as adding a red border that just narrow each element of a page - like you can see when you inspect elements. The user moves its mouse over a tweet, click and done!

For a very new project, I would not bother developing of all these. They are quite time-consuming... Only until I’ve achieved a critical mass I would try some fallbacks.

Hope that it helps. Very curious to look at what others have in mind.