Pues una vez hecha la parte de la configuración inicial, los parámetros que permiten el funcionamiento, empieza la parte del desarrollo, digamos 'frontend' de la extensión,
así que comenzamos con el archivo HTML, el 'popup', que es lo que permite pues, la vista que va a tener la extensión, si se la han instalado ya sabrán de lo que les hablo,
y también veremos como se va a comenzar a estructurar toda la extensión. Te lo explica Ithan.
Hola, soy Ithan y vamos a continuar con los vídeos de como hacer una extensión para Google Chrome. Vale, ahora vamos a empezar con el 'popup.html', vale,
tendremos que poner... bueno, vamos a hacer esto, si pones HTML y le das a 'tabulador', ya te hace la estructura básica, en título no me hace falta poner nada,
directamente lo borramos, ¡importante!, el 'charset', para decirle que formato de texto queremos usar, sino, los acentos no nos van a funcionar probablemente,
luego, aquí ya en el 'header', para que lo cargue rápidamente, ponemos 'script'... ¡Uy!, faltas de ortografía, 'src', 'igual', y ponemos 'src', 'barra', 'jquery',
punto', 'js', cerramos el 'tag' (gracias, no quiero comprar), y comprobamos que sea el mismo nombre, todo bien, vale continuemos,
vamos a hacer el 'style' en las extensiones, hay que hacerlo en el propio 'header' del HTML, así que, vamos ya a dejar aquí un espacio para tener los estilos visuales de CSS,
entonces, continuamos con el 'body', vamos a necesitar básicamente, como podéis ver aquí la tengo, la extensión (no la tengo activada, a ver... habilitar),
aquí la tengo, y como veis tengo por así decirlo un 'iframe' ¿no?, del vídeo, pero si os fijáis, no hace 'hover' ¿veis?, no hace... O sea, es como si fuera una imagen,
no hace ninguna interacción con el vídeo, y eso es porque por encima he puesto un 'div', para que cuando 'clickees', en vez de reproducirte el vídeo aquí,
(como cuando coges el vídeo tal cual y haces un 'iframe), sino que cuando 'clickas' en el 'div', te abre esta pestaña con el 'link' a este vídeo, ¿y veis?,
como veis, aquí sí que, cuando pones el teclado encima, o sea, el ratón encima, sí que hace el efecto 'hover' de que se pone rojo este botón. Y luego,
aquí tengo un botón de ajustes, donde podremos elegir cual es el canal, pero en este caso... Bueno, no si, en los tutoriales estos vamos a explicarlo es verdad,
como hacerlo con diferentes canales, bueno... entonces, vamos a hacer un 'div', y el 'id' lo vamos a llamar 'onclick', así ya tenemos bien claro cual es,
'class', es igual a 'link', luego ya usaremos esta clase, y luego, esto lo ponemos aquí que es más fácil, y le ponemos 'pointer', 'guión', 'events', y le ponemos
auto', 'importante', esto ahora igual no entendéis porqué pero, ahora en un momento os explicaré bien porqué he puesto esto.
Vale, también vamos a tener que poner un 'script', que será el que buscará el vídeo del canal, y lo pondrá en el 'iframe', este 'script' va a ser, 'src',
y vamos a llamar al 'script', 'getvideos.js', de acuerdo (¿qué ha pasado?), ¡Ay!, he escrito 'style' (jo***, vaya día...), a ver continuamos,
y vamos a poner una imagen que va a ser el botón, 'id', 'settings', 'img', por ejemplo, 'class', le vamos a hacer 'settings', y 'src', le tenemos que poner una imagen,
y le vamos a poner, 'src', 'barra', 'settings', 'punto', 'png'. Y ahora diréis, ¿y esta imagen de dónde la sacas?, pues, me la invento, la buscáis por internet,
la hacéis con el 'photoshop', con el 'Adobe Ilustrator', como queráis. ¡Y muy importante! (eh... se escribe con dos 'e'),
sino, es muy molesto que vayas a 'clickar' y se arrastre la imagen, y se les abra un 'link' a la imagen por arrastrarla. Si le ponéis esto,
funciona como si fuera un botón de un programa, no pueden arrastrar la imagen ni hacer cosas raras, de acuerdo, esto, vamos a indentarlo un poco mejor, vale.
Entonces, como veis, yo tengo aquí ya de por sí, la imagen de 'settings', vosotros tendréis que buscar una, sería una imagen así,
cualquier símbolo que represente la idea de 'configuración', y bueno, continuamos en el siguiente vídeo.
