Developing Extensions for Google Chrome

For once made part of the initial configuration parameters that allow the operation of the development begins, say 'frontend' extension, so we started with the HTML file, the 'popup', which is what it allows, the view will have the extension, if it is installed already know of what I speak, and also see how it will begin to structure the full extent. You Ithan explains.

Hi, I'm Ithan and we will continue making videos as an extension for Google Chrome. Okay, now let's start with the 'popup.html' worth, we will have to ... well, let's do this, if you put HTML and give a 'tab', and makes you the basic structure in title I do not need to put anything, directly delete it, Important !, the 'charset' to say that we want to use text format, but the accents are not we probably will work,

then, here and in the 'header', so that it loads quickly, we 'script' ... oops !, misspellings, 'src', 'equal' and put 'src', 'bar', ' jquery ' point '' js', we close the 'tag' (thanks, I do not want to buy), and check it the same name, all right, okay continue, we will do the 'style' extensions, it must be done in your own 'header' of HTML, so we leave here and a space to have visual styles CSS,

then continue with the 'body', we will need basically, as you can see here I have, the extension (do not have it on, to see ... enable), I have it here, and as you see I have so to speak a 'iframe 'right ?, the video, but if you look, you do not' hover 'do you see ?, does ... I mean, it's like a picture , It makes no interaction with the video, and that's because above have put a 'div', so that when 'clickees' instead of playte the video here,

(Like when you take the video as it is and you do a 'iframe) but when' clickas' in the 'div', opens this tab with the 'link' to this video, and see ?, as you see, here it that when you put above the keyboard, or the mouse over, yes it does effect 'hover' that turns red this button. And then, here I have a settings button, where you can choose which channel, but in this case ... Well, not if, these tutorials will explain it is true,

how to do it with different channels, well ... then let's do a 'div', and the 'id' we'll call 'onclick' so we have very clear which is, 'Class' is equal to 'link', then longer use this class, and then we put it here that this is easier, and we put 'pointer', 'script', 'events', and we put auto ',' important ', this now just do not understand why, but now I'll explain in a moment why I put this well.

Okay, we're also going to have to put a 'script' which will be the search for the video channel and put it in the 'iframe', this 'script' is going to be, 'src' and we will call the 'script', 'getvideos.js' according (what happened?), Oh !, I wrote 'style' (jo ***, what a day ...) to see continue , and we will put an image to be the 'id' button, 'settings', 'img' for example, 'class', we're going to do 'settings' and 'src', you have to put a image,

and we'll put, 'src', 'bar', 'settings', 'point', 'png'. And now ye say, and this picture of where you get ?, Then, my invention, the seek online, you do with the 'photoshop' with the 'Adobe Illustrator' whatever you want. And very important! (Eh ... it is written with two 'e'), but it is very annoying to go to 'clickar' and drag the image, and they open a 'link' to the image by dragging. If you put this,

works like a button on a program, you can not drag the image or make rare, according stuff, this, we will indent it a little better, okay. So you see, I have here already, the image of 'settings', you have to look for one, would such an image, any symbol representing the idea of ​​'setup, and well, continue in the next video.