Developing Extensions for Google Chrome

Developing Extensions for Google Chrome 06: Background with JavaScript

11 videos

88 minutes

For once we have the view with CSS, all the frontend part of the extension is already finished so to speak so we started with the backend work, work background that allows operation, so let's start making the JavaScript code that allows you to track the channel and allow us to obtain the latest video that has been uploaded later to give notice

so the code that you will see is applied to my channel, but as you will see the guts, the extension code because you know perfectly as do any other channel that you want to do in the whole world, so let the JavaScript code and forth Hi I'm Izan, and today we will continue the course for google Chrome extensions, as we remember the last video add a script

really good this link right now would fail because we have not created this script, this script will just six lines then we write the end of everything, because if not now just will not understand what it does but it is very simple, intone now what we will do it's a more complicated part is the background.js, What is background.js? Basically it will be what our extension will run constantly

that is, all the time without stopping, so if you'll excuse me a moment, I have here the complete code because you do not want to have any mistakes while doing nothing it only is this, ahh ... I explain it well it will do exactly as you see we have only basic 'HTML', which has no 'body' or anything and all we have to put is the '

we could make a mistake or just do not know, and then put it best always makes things very simple, first add 'jquery' to 'background' and then adds the file, the script background. It is important that the 'jquery' is first because if you go back first is to run the background and if you first run the 'background' will give error because 'jquery' runs on, then 'jquery' always comes first

OK, this is all it does include this script and now how difficult will now come to be the 'script' 'background.js' ! Ehmmm! I have written this script I already, that is long since I finished the extension and basically I have it written and I will not write again  because it took me quite a while, but I will explain it in great detail its operation, for example, that 'mmm' Let's go here

Okay, I had to pause a moment the video, then, if we look closely, is here the 'script' mmm here have a 'JSON' with three variables 'a, b and c' are different elements 'HTML' we are going to serve to identify each video, if I remember correctly, this, if we give here not found, it will be worth, this right here, that is, it is basically the selector is, the name they use for video

that is, if us to focus as you see here have '' and we have good 40 thousand kinds not know how not to ' as we can not know what the title, and that's what we get, but we know that never the 'class' will never change that is, well if you change the page itself, but while not modify the page, all this here 'a' 'class' is not as not all its classes and royos

it will remain the same, then, as you see here write the '  what we do is this, it is first run as you see the check function, what will make good the 'localStorage' so to speak is how to store data not ?, because we put that if there is, if stored which is the YouTube channel

this is a variable stored within the local storage if there is, then, 'url' is saved in 'localstorage.youtubechannel' then what we are doing is telling the variable you have saved the person who then will then put it in the file 'settings' as a variable 'url' that have defined here above, the change, because if it would not be the default I think it was my channel

I put it to put something, then we do a 'XML.HttpRequest ()' Okay, here we define when the status of 'xmlhttp' this is for when we receive the answer, running and then make a 'GET' and put the url and true to be asynchronous we ship it, and then make an interval and then what is this ?, we are making a 'setTimeOut' 'check' function that is being called herself

constantly, and this is what will do that every two seconds will return to repeat this, this runs every two seconds intone, What is the grace ?, we say that if 'readyState == 4', if I'm not mistaken ... I think it was for this, all of this is when the 'readyState == 4' and the 'status == 200' is that it has executed well, there was no mistake, and I do not remember and have intone, we come to the 'analyze'

and we say take the 'responseText' which is basically this, namely, the 'responseText' I will do all the source code of the web at that time, then, 'analyze' What are you going to do ?, Then call the other two first 'getVideoName' to know what is the name of the video and 'getEmbedLink' that would take the 'link' to put in a eFrame, vdir, ema or what I see in this video, then

GetVideoName' What does? First we create three variables 'index1, index2, index3' then 'videoNameString' which will therefore be that then 'videoName'  hmm assign to the variable 'videoName', as you see I put 'ERROR' because here the changes, if not change it to us 'ERROR' will then if that does not run will be 'ERROR', if not, although we've put 'ERROR' as it is going to change, no longer be 'ERROR'

will be the name of the last video channel and grace is that as we put, we will only make look once the index as the index only looks, that is, if we say that the indexOf, if we do a loop, only it will look once the video and as always, the last video is always above the HTML code, the first index will always find the latest video that has been uploaded the person

that reality is always the first page, well I think I have explained well

To find new courses, subscribe. There will be no spam, promised :)

About the Author

foto de jotajotavm
José Javier Villena

Biography: Analyst-Programmer in different languages. Tutor PREMIUM platforms recognized worldwide as CodigoFacilito. Editor Cristalab articles. My YouTube Channel is sponsored by the ANAYA and LaTostadora publisher. I like to explain in detail and give several examples for the avoidance of doubt.