Chrome Extension for Twitter
Hello! This is a quick video where I show how your Chrome extension can get information about people who liked a specific tweet
Video
Transcript
Hello! This is a quick video where I show how your Chrome extension can get information about people who liked a specific tweet, for example, let's open this tweet navigate to our development tools network and open this page if we select this filter to only show fetch requests.
and XHR requests if we scroll, you will Notice that Twitter is making requests. that has this text in its favorites I Assume it's people who liked the tweet if I view all other requests; there's no data in them.So let's set a filter here. and let's scroll once more, okay? I think We reached all if we clicked likes. will see this request being made and This response is a JSON object, if we Reload the page. Click likers, and we will see This request was made, and a response has an area like this and somewhere in On this big object, you can see the name of the account that liked this tweet, so get a list of all the people who liked this tweet
We have to simulate these requests and In this video, I will show you how to First of all, if you view these logs, You can see that the type of request is xhr, so if we rewrite this page, xhr function We will be able to capture all requests that are being made by Twitter Let's do that in this snippet of code.
You can see a function that overrides this method, if I run this code and then On the website, you can see that we Before Twitter makes a request, we intercept it, log to the console URL, and response body of this request if URL contains five readers now in order to simulate this request. Let's view this request in this network tab, we can see that this is a get request and the URL looks Like this now, from this point of view, looks very complicated, but let's review.
In more detail, let's copy the query. string to the console. and split it by this character. This reveals that there are two queries. parameters, variables, and features Now, if we copy this first variable and Remove this string now if we do the code.
the CRI component The result is obviously JSON, in order to convert this URL into some sort of readable information, and you can refer to this code now if I reload the paper. URL We will get past information logged to the console about each request URL that is being made and features It looks like this JSON and variables in this JSON These are the two query parameters that are sent to this endpoint to get likes. Now we can assume that this object is the same for every request that is being made, and this request will also be similar. Now let's go back to the post.
Reload the page. Let's run this code. Again, click "likes" and then scroll down. a little bit, and if you review this If you look carefully, you can see that the first request we make does not have this property in its cursor and the point of This property is to tell Twitter to load People who like this specific tweet information This cursor was returned from each request, so if we look at this response body again, we can see that along with information about users. Twitter also returns a cursor that must be used in the next request to their API.
in order to get more information Another list, another batch of people who like the specific post, so in order to simulate requests, we will have to capture this value and then send it to all the consequent requests we make so Let's try simulating. the request and with the information that we just got, so this is the base of the request that Twitter makes these query parameters. Here we create a URL. with this data and then execute a fetch. request, so let's reload the page and try to execute this code Okay, now we have this function here. get likers the free pass This tweet on IG will be inserted here, so if we execute this code We will get an error about bad authentication.
data, and if we review this request, we made in this console We view them side by side with headers that are being sent to Twitter, we can see that Our code sends a lot fewer headers and In order to simulate this request, we have to send exactly the same headers as Twitter, and you can see that they sent authorization header and cross-site request forger tokens and stuff, so in In order to simulate this request, we have to get the values for these headers somewhere in order to see which request headers are being sent with this request. We can override a set request header like This now if we execute this code and Click likers and you can see along with information about the request URL, we see a list of headers These headers are the same for every request that Twitter makes it so that whenever we reload the page Twitter has already made enough fetches.
requests and XHR requests to their backend to have the needed request headers in this snippet, we lock the console all headers that are being set by Twitter, so if you run this code and When we use Twitter, we can see pretty much every request that is being made by Twitter has this authentication request, and in This function gets likes when we use headers. that are being saved by this script We declared earlier, so now if we execute this function again, we will not get an error, and we will receive the response with entries from Twitter from their backend You can see the result here. The name of this person is Thomas, and if we get likes, can see it's actually Thomas who liked this post, so to finalize, we have a function get likers It accepts tweets on IG.
and a cursor for the next batch of information to get from the Twitter API when If I run this script, it will override xhr. off the Twitter website to save headers that We need to make requests if I execute. this function with the ID of a tweet code that you can put into your Chrome extension will make requests to Twitter. and return likers in order, as you can see Here we have an array of names for profiles that liked this Tweet now if we go to a different tweet and execute our With this new ID, we will get another set of arrays if we go to Likers, we can actually see this information is correct, and that's pretty much it This method is useful for moderating social networking sites like Twitter Instagram and Facebook because they all operate in a similar fashion, so if you Want your Chrome extension to get likes? or people who would read it, you can use this code, and it will give you the information you need. Thank you for watching, have a nice day, and if you need a Chrome extension like this developed for your business or your idea Feel free to reach out. Thank you.