Tutorial: Chrome Extension for YouTube

Hello! In this quick video, I will show You have one different way to get information from a website or a web application

Video

Transcript

Hello! In this quick video, I will show You have one different way to get information from a website or a web application. Besides using the document query selector For example, let's say that you're developing a Chrome extension for YouTube, and you need to get this information the title of the video YouTube has very descriptive selectors.

Using the selector is quite reliable to get the title of the video we visit another video. and use the selector.

We will get a different title. In the case of YouTube, this selector is unlikely to change, and you can use it to get this title very reliably. However, not all websites have semantic HTML like YouTube So in this video, I will show you one other way to get this information

If we go to network Click search and search for the title of this video We will get several results. Now, if we click on one of them, We will see the response object, which is what YouTube gets When the website searches, it sends a request to their back end now if we input this URL in the filter We will see that this endpoint gets called every time we navigate to a different video

It is possible with Chrome extensions to intercept this request and get this response object, and from that point we will be able to read this text the title of the video and let me show you how to do that. Now let's reload the page if we make this request

In this column type, we can see that this is a fetch request, which means that YouTube used a window .fetch to execute it now if I type window.fetch in console I will see native code here, what we can do is overwrite this function. after we execute this function. In console, YouTube will be calling our new function whenever the website wants to make a request if I click "thumbs up." This function will be executed by YouTube, and if I am on the console, we can see the request that's made by YouTube We can see that it's like, "How do we use this to get the title of the video now. There are several steps that we need to do

First of all Let's reload the page executing this code in the console without the debugger YouTube uses window fetch. to change videos without reloading the website, however, if we replace the window Fetch with our own function this feature YouTube will break, and after that Clicking on a new item will force the website to be reloaded. and the code that we executed in the console will be lost.

To avoid that, we need to return a response from the function that we create, so in this snippet you can see that we save the real fetch function in a variable, and then when YouTube calls window fetch, we call this save function. and return the response; however, we also have access to arguments that are passed to this request, so let's execute this coding console and see the result.

Now, when I navigate to a different video, I can see a lot of requests being logged. into the console, and the YouTube website is not reloaded, so that feature is not broken now There are a lot of requests being made. but this is the one we care about. has next in the url, so let's filter all the requests we get, and only log into The request that we want Reload the page.

Execute the code now. navigate to a different video, and now we see the request response being logged into console Now let's try to access the response. body of the JSON that actually has the title in it to do that, let's call response JSON unlock the JSON into console again, we have to reload the page. and put this code in the console. It navigates to a different video. Navigate to this video, and we'll see the response being logged into console one thing you have to keep in mind when Working with this API means calling response JSON multiple times is not possible So you can only read response body one once

So if I write this json1 and json2 and log this into the console. when making requests like this. We will see three promises here. and two of them are errors. failed to extract your JSON because the body stream was already red, and this may cause issues with the website we're working on. So instead of calling Json or text instead of reading the response body on the response object directly, we need to use Response Clone to clone the response object, and then we can read the JSON safely, it's very important to keep in mind not to break the website where We are changing this fetch function, okay? Now let's execute this code and see the that we get in the body First, we must reload the patch.

The code and moving to a different page locks the response body into the console As you can see, this object is very complex; it has a lot of properties. So I created a small function like this. that logs every string of the response. JSON into the console, so if I run it instead of just logging into the console. The extension or our snippet will lock all this text into the console and If I search for the title of this video, I can see it in several places in the response, and it's up to you to select which one you want to use, so this looks more or less reliable, so if I copy this string and put it here. instead of logging the entire JSON logging only this part the title Let's try this out As you can see now, navigating to a new video just logs the title of the video that we navigate In the console, this method may seem more cumbersome and more complicated, but In a lot of cases, using the method more reliable than using document queries. selector to get information from the page in cases where the Dom is not readable It's not semantic either if we Check out the response body that we got. So if the HTML of the page is not readable It's not semantic, the selectors change a lot, you can use this method to Get information from the page live. Thank you for watching.

Have a good day.