Linces, hoy les voy a enseñar a crear una extensión para Chrome muy básica pero que a mi me ayuda a ver post de
imágenes
de manera más fácil, sin tener que scrollear, casi al estilo Facebook.
Aquí les dejo una probadita del visor de imágenes que crearemos al terminar este post.
Y aquí otra con Sansa
Como necesitaba una asistente, pasé un buen rato buscando a alguien y al final me he decidido por nada más y nada menos que Barbara Palvin. También puedes usar el mismo post o busca otro con imágenes .
Antes de comenzar les recomiendo tener un poco de conocimientos de Javascript(JQuery), CSS, HTML, Atom y la Terminal o CMD de Windows. El tutorial no es muy complejo y en cada paso incluyo una imagen o gif de como se realiza el procedimiento, pero, si aún así se atoran en algún punto, siempre pueden acudir a la vieja confiable, Google. Ahora si, empecemos.
1. Abre la consola o CMD de Windows y cambia de directorio hasta una carpeta donde se colocará la extensión y luego dentro crea una nueva carpeta que se llame taringa-tools o como más te agrade.
2. Abre Atom usando el siguiente comando y dentro verás una carpeta con el mismo nombre.
3. Crea un nuevo archivo y llamalo manifest.json, luego agrega el código que se muestra en la imagen.
4. Busca un icono en internet, llamalo icon.png y agregalo en la carpeta de trabajo, luego crea un nuevo archivo que se llame popup.html y agrega el código que se muestra en la siguiente imagen.
5. Ahora ya podemos cargar nuestra extensión en Chrome, la siguiente imagen muestra la forma de como hacerlo.
6. Si todo salió bien en el paso anterior notarás que se muestra el icono de nuestra extensión en Chrome, pero aún no hace nada útil. Así que eso es lo siguiente que vamos a hacer. Modifica el archivo manifest.json como se ve en la siguiente imagen.
7. Esta nueva parte inyecta el archivo content.js cuando accedemos a la página que nosotros queramos, en este caso http://www.taringa.net/*. La estrella, en términos simples significa que Chrome inyectará nuestro archivo content.js en cualquier página que inicie con una URL de taringa. Ahora crea un nuevo archivo que se llame content.js y agrega el siguiente código.
8. Esta línea es para verificar que todo funcione antes de continuar. La siguiente imagen te muestra como recargar la extensión para ver la alerta en el navegador.
9. Si viste la alerta podemos continuar. Ahora necesitamos descargar unas librerías que nos ayudarán. Primero descarga JQuery , después Viewer y luego agrega los archivos a la carpeta de trabajo y actualiza el archivo manifest.json como se muestra en la siguiente imagen.
10. Bien, ahora de acuerdo con la documentación de Viewer, necesitamos una clase para agregar el visor.
11. En la siguiente imagen se puede ver que etiqueta utilizaremos para agregar el visor. En pocas palabras todas las imágenes que estén dentro de la etiqueta con la clase main-content-post (el cuerpo del post) serán usadas para el visor.
12. Ahora que ya sabemos en que clase colocar el visor, ya podemos actualizar el archivo content.js como se muestra en la imagen.
13. Ahora si actualizamos el navegador y la extensión, podremos ver que el visor funciona pero no se muestra correctamente.
14. En estas dos imágenes puedes ver la direferencia. La primera muestra lo que tenemos hasta ahora y la segunda como se debería ver.
15. Para corregir este error tenemos que crear un nuevo archivo que se llame content.css y también necesitamos actualizar el archivo manifest.json.
16. En el nuevo archivo content.css agrega el siguiente código. Las clases css corrigen los estilos para que el visor se muestre correctamente.
17. Al fin, ya podemos actualizar todo por última vez y ahora todo se debería mostrar correctamente.
Bueno linces, así es como nuestra extensión queda terminada y ahora podemos ver los posts de imágenes con zoom y con teclas para avanzar y retroceder y sin tener que hacer scroll.
Y ya para terminar el último paso sería publicarlo en Chrome Store pero eso ya es otro asunto.
Gracias por visitar mi post y si alguien quiere el código o la extensión comenten y lo subiré sin problema.
PD. Es mucho más fácil poder ver a Barbara con el visor y además le puedes hacer zoom
.
Aquí les dejo una probadita del visor de imágenes que crearemos al terminar este post.
Y aquí otra con Sansa
Como necesitaba una asistente, pasé un buen rato buscando a alguien y al final me he decidido por nada más y nada menos que Barbara Palvin. También puedes usar el mismo post o busca otro con imágenes .
Antes de comenzar les recomiendo tener un poco de conocimientos de Javascript(JQuery), CSS, HTML, Atom y la Terminal o CMD de Windows. El tutorial no es muy complejo y en cada paso incluyo una imagen o gif de como se realiza el procedimiento, pero, si aún así se atoran en algún punto, siempre pueden acudir a la vieja confiable, Google. Ahora si, empecemos.
1. Abre la consola o CMD de Windows y cambia de directorio hasta una carpeta donde se colocará la extensión y luego dentro crea una nueva carpeta que se llame taringa-tools o como más te agrade.
2. Abre Atom usando el siguiente comando y dentro verás una carpeta con el mismo nombre.
3. Crea un nuevo archivo y llamalo manifest.json, luego agrega el código que se muestra en la imagen.
4. Busca un icono en internet, llamalo icon.png y agregalo en la carpeta de trabajo, luego crea un nuevo archivo que se llame popup.html y agrega el código que se muestra en la siguiente imagen.
5. Ahora ya podemos cargar nuestra extensión en Chrome, la siguiente imagen muestra la forma de como hacerlo.
6. Si todo salió bien en el paso anterior notarás que se muestra el icono de nuestra extensión en Chrome, pero aún no hace nada útil. Así que eso es lo siguiente que vamos a hacer. Modifica el archivo manifest.json como se ve en la siguiente imagen.
7. Esta nueva parte inyecta el archivo content.js cuando accedemos a la página que nosotros queramos, en este caso http://www.taringa.net/*. La estrella, en términos simples significa que Chrome inyectará nuestro archivo content.js en cualquier página que inicie con una URL de taringa. Ahora crea un nuevo archivo que se llame content.js y agrega el siguiente código.
8. Esta línea es para verificar que todo funcione antes de continuar. La siguiente imagen te muestra como recargar la extensión para ver la alerta en el navegador.
9. Si viste la alerta podemos continuar. Ahora necesitamos descargar unas librerías que nos ayudarán. Primero descarga JQuery , después Viewer y luego agrega los archivos a la carpeta de trabajo y actualiza el archivo manifest.json como se muestra en la siguiente imagen.
10. Bien, ahora de acuerdo con la documentación de Viewer, necesitamos una clase para agregar el visor.
11. En la siguiente imagen se puede ver que etiqueta utilizaremos para agregar el visor. En pocas palabras todas las imágenes que estén dentro de la etiqueta con la clase main-content-post (el cuerpo del post) serán usadas para el visor.
12. Ahora que ya sabemos en que clase colocar el visor, ya podemos actualizar el archivo content.js como se muestra en la imagen.
13. Ahora si actualizamos el navegador y la extensión, podremos ver que el visor funciona pero no se muestra correctamente.
14. En estas dos imágenes puedes ver la direferencia. La primera muestra lo que tenemos hasta ahora y la segunda como se debería ver.
15. Para corregir este error tenemos que crear un nuevo archivo que se llame content.css y también necesitamos actualizar el archivo manifest.json.
16. En el nuevo archivo content.css agrega el siguiente código. Las clases css corrigen los estilos para que el visor se muestre correctamente.
17. Al fin, ya podemos actualizar todo por última vez y ahora todo se debería mostrar correctamente.
Bueno linces, así es como nuestra extensión queda terminada y ahora podemos ver los posts de imágenes con zoom y con teclas para avanzar y retroceder y sin tener que hacer scroll.
Y ya para terminar el último paso sería publicarlo en Chrome Store pero eso ya es otro asunto.
Gracias por visitar mi post y si alguien quiere el código o la extensión comenten y lo subiré sin problema.
PD. Es mucho más fácil poder ver a Barbara con el visor y además le puedes hacer zoom
.