Cómo Programar Extensiones de Google Chrome

Cómo Programar Extensiones de Google Chrome 05: Diseñar Estilo de la Extension

11 videos

88 minutos

Una vez creado el archivo HTML, ya ven que la vista pues como todo HTML sin CSS es horrible, es feo. Así que hay que empezar a maquillarlo, por eso en este vídeo pues se va a ver precisamente eso. El estilo que se le va a aplicar, al aspecto visual que tendrá la extensión con CSS. ¡Vamos a verlo!

Hola soy Ethan, continuamos con el curso de hacer extensiones para Google Chrome. Os voy a explicar como probar vuestra extensión, ¿Vale? Vais a Chrome://extensions o vais desde el menú y vais a extensiones y pones cargar extensión descomprimida. Buscáis el directorio donde tengáis la carpeta. Mi carpeta era por la C, Curso Extensiones. Error al cargar la extensión, no se ha podido cargar la página de fondo src ... bueno background.html, de acuerdo

Como antes habíamos puesto que íbamos a usar una ṕagina de background, pues ahora nos dice que no. Pues ponemos cualquier página. Aunque no sirva de nada, solamente para que éste feliz y ya tenga …… A ver …… un momento .. Oh, falta de ortografía. Ay Dios mío. Va con 2 S. Vale, Aquí tenemos un dilema y es que … ésta es la del curso y ésta es la que yo hice. Ésta la voy a deshabilitar y como ves ahora lo único que hay es esto

Y el resto es como si no existiera, y ahora pues tenemos que empezar con el CSS para hacerlo más visual y más utilizable porque ahora mismo es un poco inútil. Bueno, vamos a hacer… a ver … html. Esto nos servirá para determinar cuando cliqueais aquí, veis que tiene unas dimensiones. Pues podéis elegir las que vosotros queráis, yo para la extensión voy a poner .. el width, le voy a poner 700 pixeles y de altura le voy a poner 360 pixeles.

¡Uy! Que se me ha abierto la consola de MySQL. Vale, el body… le vamos a poner.. bueno, por ahora no voy a poner nada. Entonces ya empezamos con la clase “link” ¿Vale? Le voy a poner: width: 640 px, que estos son las dimensiones que va a tener el recuadro del vídeo, ósea el recuadro que ocupa el vídeo. Que ya lo enseñé en otro capítulo y de altura le voy a poner toda, le voy a poner 360 pixeles para que ocupe todo. La posición, le voy a poner absoluta.

Así va a hacer más facil, en pointer-events le ponemos ninguno y left le ponemos 20 pixeles, esto es más que nada para que quede más centrado. Y no quede totalmente al borde, entonces… ahora empezamos con la clase de la imagen de ajustes, posición absoluta. Vale, en width le ponemos 25 px, de altura le voy a poner 10 pixeles (top) … luego a la derecha 5 pixeles, eh dicho de altura me referia al borde.

Por así decirlo desde arriba, ósea, el espacio que hará desde la parte superior. Vamos a ponerle una transición y que sea… la voy a hacer con el “transform” Le voy a poner 0,3 segundos y esto básicamente funciona como antialiasing, porque cuando hace las animaciones las imágenes se pixelan y poniéndole esto .. No sé, por lo menos a mí me dio esa sensación de que ya no se pixela poniéndole esto

Bueno, ¿Que más? Ahora cuando hagas Over … lo que tendrá que pasar es que haga un “transform” con “rotate”de 45 grados. Vale. Ahora ¿Que más vamos a necesitar? Mmmmm… bueno por ahora parece que nada, A ver que pasa. Bueno como véis ya tenemos el espacio adecuado para poner el vídeo Y ya tenemos el botón de ajustes con la animación ésta, al hacer “over” en el botón. Véis hace este especie de giro y bueno ahora en el siguiente vídeo..

Continuamos haciendo este script, mmm.. éste, que nos va a servir para obtener los vídeos de cualquier canal.

Si quieres enterarte de los nuevos cursos, suscríbete. No habrá spam, prometido :)

Sobre el autor

foto de jotajotavm
José Javier Villena

jotajota pa los amigos y jota pa los de más cnfianza.

Bio Seria: Analista-Programador en diferentes lenguajes. Tutor PREMIUM de reconocidas plataformas de nivel mundial como CodigoFacilito. Redactor de artículos para Cristalab. Mi canal de YouTube está patrocinado por la editorial ANAYA y LaTostadora. Me gusta explicar con detalle y poner varios ejemplos para que no queden dudas.

Bio Molona: Me presento :) soy informatico, ni frostis d hardware pero muy muxo de programacion, friki a medias o del to segun el dia. Me gusta programar, muxo. Manejo varios lenguajes y tdo lo ke sepa lo comparto x amor al arte. Este no es mi trabjo pero lo ago mejor y con +ganas y calidad que si lo fuera, x eso mismo, xq para mi es divertido. Solo spero al menos algo de agradecimientO!! ;)

Dios, qe gusto haber escrito este parrafo cm me a dao la gana sin pensar en ortografia ni tildes ni historias!!!!!