Pues una vez que ya tenemos la vista con la CSS, está toda la parte frontend de la extensión digámoslo así ya terminada
así que comenzamos con el trabajo backend, con el trabajo de fondo que permite el funcionamiento, así que, vamos a empezar a hacer el código JavaScript
que permite rastrear el canal y permitirnos obtener el ultimo video que se ha subido para posteriormente dar la notificación
así que el código que vas a ver está aplicado para mi canal, pero como vas a ver las tripas, el código de la extensión pues sabrás perfectamente
como hacerlo con cualquier otro canal que tu quieras hacerlo en el mundo mundial, así que vamos con el código JavaScript y adelante
Hola soy Izan, y hoy vamos a continuar con el curso de extensiones para google Chrome, como recordamos del ultimo video añadimos un script
bueno este link en realidad ahora mismo daría un error porque aun no hemos creado este script, este script tendrá apenas seis líneas
entonces la escribiremos al final de todo, porque si no ahora igual no entenderéis lo que hace pero es muy sencillo, entones ahora lo que vamos a hacer
ya es una parte mas complicada, es el background.js, ¿Qué es el background.js? Básicamente será lo que va a ejecutar nuestra extensión constantemente
o sea, todo el rato sin parar, entonces si me perdonáis un momento, tengo por aquí el código completo porque no quiero tener ningún error mientras lo hago ni nada
vale, solamente es esto, vale ahh... Explico bien que va hacer exactamente, como veis solo tenemos 'HTML' básico, que no tiene ni 'body' ni nada
y lo único que tenemos que poner es el '
nos podría dar un error o igual no lo se, mejor siempre ponerlo y luego hace las cosas muy sencillas, primero añade 'jquery' al 'background' y después añade
el archivo, la script del background. Es importante que el 'jquery' esté primero porque si va detrás primero se va a ejecutar el background
y si se ejecuta primero el 'background', va a dar error porque se ejecuta 'jquery' en el, entonces 'jquery' siempre lo primero
vale, esto lo único que hace es incluir esa script y ahora lo difícil va a venir ahora que va a ser la 'script' 'background.js'
!ehmmm! esta script la he escrito yo ya, o sea hace tiempo que tengo la extensión acabada y básicamente ya la tengo escrita y no la voy a escribir de nuevo
porque me llevó bastante rato, pero voy a explicar muy detalladamente su funcionamiento vale, por ejemplo, yo que se 'mmm' vamos a ir aquí
vale, he tenido que pausar un momento el video, entonces, si nos fijamos bien, está aquí la 'script' mmm aquí tengo un 'JSON' con tres variables ' a, b y c'
son diferentes elementos 'HTML' que nos van a servir para identificar cada video, si no recuerdo mal, esto, si le damos aquí
no lo encuentra, pues vaya haber vale, esto de aquí, o sea, básicamente es el selector o sea, que utilizan para el nombre de videos
o sea, si nos fijáramos como veis aquí tenemos '' y tenemos bueno 40 mil clases no se que no se cuanto hasta '
como nosotros no podemos saber cual es el titulo, y eso es lo que queremos obtener, pero si sabemos que nunca el 'class ' nunca va a cambiar
o sea, bueno si cambian la pagina si, pero mientras no modifiquen la pagina, todo esto de aquí 'a' 'class' no se que no se cuanto, todas sus clases y sus royos
va a seguir igual, entonces, como veis aquí escribimos el '
lo que hacemos es esto, vale, primero ejecutamos como veis la función check, que lo que va hacer bueno el 'localstorage'
por así decirlo es ¿para almacenar datos no?, pues le ponemos que si existe o sea, si está guardado cual es el canal de YouTube
que esto es una variable guardada dentro del almacenamiento local, si existe, entonces, 'url' se guarda en 'localstorage.youtubechannel'
entonces, lo que estamos haciendo es decirle la variable que haya guardado la persona que luego será la que luego pondremos en el archivo de 'settings'
pues una variable 'url' que la hemos definido aquí arriba, la cambiamos, pues si no sería la predeterminada que creo que era mi canal
lo puse por poner algo, entonces, hacemos un 'XML.HttpRequest()' vale, aquí definimos cuando cambie el estado del 'xmlhttp'
esto es para cuando recibamos la respuesta, que se ejecute y entonces, hacemos un 'GET' y ponemos la url y true para que sea asíncrono
lo enviamos, y luego hacemos un intervalo y entonces ¿Qué es esto?, estamos haciendo un 'setTimeOut' de 'check' o sea la función se está llamando así misma
constantemente, y esto lo que va hacer es que cada dos segundos va a volver a repetir esto, esto se ejecuta cada dos segundos
entones, ¿Cuál es la gracia?, le decimos que si 'readyState==4', si no me equivoco creo que era para..., esto, todo esto de aquí es cuando
el 'readyState==4' y el 'status==200' es que se ha ejecutado bien, que no había ningún error, ya no me acuerdo y haber entones, llegamos a la función 'analyze'
y le decimos que coja el 'responseText' que básicamente es, esto, o sea, el 'responseText' que me va a hacer, todo el código fuente de la web
en ese momento, entonces, 'analyze' ¿Qué va hacer?, pues llamar a las otras dos primero el 'getVideoName', para saber cual es el nombre del video
y 'getEmbedLink' que sería coger el 'link' para meter dentro de un eframe, vdir, ema o lo que veo, en este video, entonces
getVideoName' ¿Qué hace? Primero creamos tres variables 'index1, index2, index3' y luego 'videoNameString' que será, pues, la que luego 'videoName'
mmmm asignaremos a la variable 'videoName', como veis he puesto 'ERROR' porque aquí la cambia, en caso de que no la cambie a nosotros nos saldrá 'ERROR'
entonces si esto no se ejecuta será 'ERROR', si no, aunque nosotros hayamos puesto 'ERROR' como va a cambiarlo, ya no será 'ERROR'
será el nombre del ultimo video del canal y la gracia es que como, hemos puesto, solo vamos a hacer que busque una vez el índice
como el índice solo busca, o sea, si le decimos que el indexof, si no hacemos un bucle, solo lo va a buscar una vez y como el video siempre está,
el ultimo video está siempre mas arriba del código HTML, el primer index siempre va a encontrar, el ultimo video que se ha subido la persona
que en realidad en la pagina siempre es el primero, bueno creo que me he explicado bien
