Hola mundo como estas? Mi nombre es José como ya saben… aquí les doy la bienvenida a un nuevo curso del canal para desarrollo de extensiones para Google Chrome
Así que en este curso vamos a ver como se desarrolla una extensión que es la extensión propia de mi canal que te notifica cuando yo haya subido un nuevo vídeo
Para que estes atento de lo que vaya subiendo y recibas notificaciones a través de las notificaciones, es un ejemplo muy sencillo
Pero sirve para que ustedes aprendan a programar extensiones para Chrome. En este caso este curso estará a cargo de uno de los suscriptores de este canal
Y fan que es un auténtico crack y yo de verdad lo admiro mucho porque es muy joven y para la edad que tiene maneja muchos lenguajes y a un nivel muy bueno
Así que bueno pues… Este curso la va a impartir él. Yo iré guiando a todos ustedes en el proceso pues para que tengan esa linea de secuencia
Aprovecho también para decirles que si alguno de ustedes pues quiere aportar algo al canal o algún tipo de conocimiento o desarrollo de alguna tecnología
Que no exista actualmente pues yo estoy abierto a que lo hagan. Así que comenzamos con el desarrollo de la extensión de Google Chrome
Se la pueden descargar tienen en el enlace en la descripción del vídeo y en este primer vídeo que van a ver ahora, van a ver como se configura la extensión
Y los archivos básicos que permiten el funcionamiento como el manifest.json y esos archivos como los iconos y etc. Así que los dejo con Izan
Que es una auténtica máquina y disfruten… Hola soy Izan, y este es el primer episodio de extensiones para Google Chrome…
En este episodio les voy a mostrar, en primer lugar los requisitos básicos que necesitarán para hacer una extensión. Tenemos que hacer una carpeta…
Pues podemos poner cualquier nombre… yo le pongo la abreviatura de 'Source' que serviría para los archivos fuentes, aquí adentro pondremos iconos…
Para empezar con la aplicación unos iconos de 128x128, 48x48, 16x16 y otro de 19x19 pixeles. También necesitaremos para este proyecto Jquery
Porque así será mucho más rápido de desarollar. Entonces continuamos… Luego tenemos que hacer un archivo llamado manifest.json
Si… a ver.. Manifest.json vale? (Hablando para si mismo) . Tendremos que ver si nunca has usado un archivo manifest.json pero básicamente tendremos que poner
Es para así decirlo… Este archivo básicamente sirve para decirle a Google Chrome cosas de nuestra aplicación como que permisos necesita, nombre de los iconos
Empezaremos poniendo 'name' dos puntos y podemos poner 'Youtube notificator' y una coma y tenemos que poner la versión y vamos a ponerle 1.0
Ya que no hemos hecho ninguna actualización… La 'descripción' Ay! Lo habia puesto en castellano… no sé por ejemplo 'utilizalo para enterarte de nuevos vídeos'…
Así por ejemplo… podría ser cualquier otra cosa… se me ha ido el teclado... (hablando para él mismo) Que más? Tenemos que poner la versión del manifest.json
Esto la verdad no acabo de entender que era pero a funcionado simplemente colocando un dos, así que por el momento no lo puedo explicar, me volví loco probando
Empecé poniendo cero y uno hasta que puse dos y me funcionó. Lo demás por algún motivo me daba error… La verdad que no sé por qué.
Tenemos que poner 'Author', ponemos pues en mi caso 'Izan' en tu caso pues tu nombre es básicamente para identificarnos.
Bueno parte importante 'Icons' Vale? Tendremos que hacer por decirlo de una manera una variable Json igual que cuando haces un json javascript o otra cosa
Y tendremos que ponerle estos valores… '16:' pues en mi caso sería 'src/icon16.png', luego tenemos que ponerle '48: src/icon48.png'
Luego no sé si querrás hacer vuestros propios iconos o para probar puedes ir buscando unos por internet pero la verdad esto no es un curso de Photoshop
Así que tampoco voy a explicar como hacer un icono ya que eso es muy complicado ya si quieres hacer algo muy elaborado… tambíen tenemos que poner
128:' 'src/icon128.png', Vale? Teóricamente está todo correcto. Luego tenemos que poner 'browser' una variable que es 'browser_action'
Y esto básicamente tenemos que ponerle Eh… O sea esto es información para el navegador Chrome y tenemos que ponerle el titulo predeterminado
Que en este caso podría ser pues exactamente esto mismo de aquí. Tenemos que ponerle el icono predeterminado 'default_icon' aquí es cuando Bueno…
No es obligatorio que sea de 19x19 pixeles pero yo le he puesto ese valor, se ve bastente bien porque con 16x16 se veía un poco pixeleado
Y con 19x19 no se ve pixelado pero el tamaño debe ser los más pequeño posible y tambíen tenemos que ponerle el 'default_popup'
Esto el 'default_popup' será que cuando hagamos click en el icono de la extensión o como le des click en cualquier otra extensión
La pestañita que se abre pues aquí será donde tenemos que indicarle cual será… por ahora no tenemos popup pero nos lo vamos a inventar y se llamará 'popup.html'
Entonces… continuamos a esto le vamos a poner una coma, ahora que nos falta y es el background. En el background aunque solo vayamos a poner un valor
Hay que usarlo así. Aquí tenemos que ponerle que va a haber en el background o sea el segundo plano que se estará ejecutando pues aquí le ponemos…
