hand Inicio

SERVICIOS

Salir

noched铆a

JavaScript Aplicado con una extensi贸n de Chrome y Unsplash

1200 palabras
5 minutos
July 14, 2020

Vamos a utilizar JavaScript sin ning煤n tipo de framework, s贸lo con JavaScript "vainilla", para escribir una extensi贸n para Chrome que nos muestre im谩genes de unsplash

Pr贸logo

Las extensiones de Chrome son herramientas potentes que sin embargo no han conseguido convertir en t茅rminos de monetizaci贸n lo que uno podr铆a esperar

En cualquier caso se utilizan much铆simo

En este curso vamos a ver un ejemplo simple y sin complicarnos, s贸lo con pure JavaScript o tambi茅n conocido con JavaScript vainilla

Y qu茅 har谩?

Simplemente mostrarnos una imagen de unsplash en cuanto abrimos una nueva pesta帽a

Vamos all谩

  1. Pr贸logo
  2. manifest.json
  3. kw-unsplash.html
  4. Chrome://extensions
  5. Mostrar un background de unsplash
  6. A帽adiendo un cach茅
  7. Renovar la imagen cada dia
  8. Bot贸n para cambiar la imagen
  9. Publicando la extensi贸n
  10. C贸digo final

manifest.json

脡ste es el primer archivo que tendremos que crear, un archivo JSON que no es m谩s que un archivo en forma de objeto de JavaScript, donde incluiremos informaci贸n que Chrome nos pide

Recuerda que en los archivos json las propiedades van con comillas s铆 o s铆, y no juegues con las comas

Puedes ver todas las opciones que aplican en developer.chrome.com

Con nuestro manifest lo que hemos hecho es aparte de definir los n煤meros de versiones, descripciones y dem谩s, definir las acciones y los permisos de nuestra extensi贸n

  • La versi贸n del manifiesto tiene que ser 2 ya que es el formato de manifiesto que Chrome espera

  • En chrome_url_overrides estamos sustituyendo la p谩gina de nueva pesta帽a que es newtab y que la dirigimos hacia kw-unsplash.html

  • Y para hacer esta sustituci贸n necesitamos los permisos, que apuntamos en permissions, de activeTab que es lo que nos permite interceder cuando el usuario abre una nueva pesta帽a (y se le pedir谩 que acepte este permiso al instalar la extensi贸n)

kw-unsplash.html

Para crear una p谩gina html b谩sica (que es la que Chrome ejecutar谩 como nueva pesta帽a) utilizaremos una estructura como la siguiente

P谩sate por los cursos de html y css si quieres profundizar, los tienes aqu铆 y aqu铆

A destacar, importo las fuentes directamente de Google (tienes una herramienta para verlas aqu铆)

Y preparo el terreno para a帽adir las normas css y el JavaScript

Con esto ya tenemos nuestra extensi贸n lista (lo que vendr铆a a ser el esqueleto de la extensi贸n) y ya podemos ver qu茅 tal se comporta

Chrome://extensions

Para probar la extensi贸n nos vamos a chrome://extensions (lo ponemos en nuestro Chrome como si fuera una direcci贸n web, o accedemos a ella a trav茅s de los men煤s) y all铆 accionamos el Developer mode para poder luego clicar el Load unpacked y seleccionar el directorio donde tenemos estos dos archivos (el manifest y el html)

Pero para que funcione necesitamos el icono, b谩jate cualquier imagen en formato .png, ponle el nombre que has puesto en el manifest, y listos, ya tenemos el esqueleto de la extensi贸n

Mostrar un background de unsplash

Utilizamos la API de unsplash, y generamos la imagen con JavaScript, por lo que lo primero es a帽adir el ancla donde pondremos la imagen que ser谩 simplemente un <div>

Y luego, creamos el archivo kw-unsplash.js que es donde le hemos dicho al documento que tendr铆amos nuestro script

Lo primero es la 煤ltima l铆nea, donde le digo que cuando el DOM est茅 cargado (lo que viene a ser que todo el documento haya sido interpretado por el navegador) ejecute la funci贸n que se llama start

Luego defino la funci贸n start, y lo hago utilizando JavaScript moderno con las fat arrows

Esto representa un problema puesto que hay muchos navegadores (antiguos) que no entienden este JavaScript

Por eso necesitar铆amos utilizar alg煤n proceso de compilaci贸n para transformar ese JavaScript en una versi贸n m谩s antiguo y compatible

La mejor manera (normalmente) de conseguir esto es trabajar con alg煤n framework concreto que ya nos lo integre

Pero aqu铆 no haremos ni una cosa ni la otra, pero que lo sepas

A partir de aqu铆, la funci贸n start construye la url con la que pediremos la imagen mediante el elemento html <img>

Pero esto, que nos funcionar铆a en una p谩gina normal, no nos funciona en una extensi贸n por sus limitaciones particulares (lo puedes leer aqu铆)

El c贸digo que s铆 funciona es el siguiente:

En lugar de utilizar una imagen lo que haremos ser谩 cambiar el fondo del elemento <body>

El c贸digo css ser铆a el siguiente

Y en el JavaScript lo que har铆amos ser铆a modificar el elemento <body> y dejaremos de lado la imagen

A帽adiendo un cach茅

El cach茅 nos sirve para que si la imagen ya se ha descargado con anterioridad no se vuelva a descargar

Una manera de hacerlo es a帽adiendo el header correspondiente

Otra manera de hacerlo y asegurarse es la siguiente

Aqu铆 hemos utilizado la cach茅 del navegador (que nos la proporciona el propio navegador) y localStorage para recordar la url que hemos pedido

Renovar la imagen cada dia

Tal y como est谩 el c贸digo, una vez pedimos una imagen, 茅sta se almacena en localStorage y ya nunca m谩s la actualizaremos, y queremos que esto sea as铆 pero s贸lo durante un d铆a

Una manera de hacerlo es almacenar la fecha de la imagen tambi茅n en localStorage y as铆 podremos comprobar si estamos dentro del mismo d铆a o no

Y ahora con esta funci贸n podemos decidir si miramos si hay una imagen en localStorage o si por el contrario descargamos una nueva imagen s铆 o s铆

Bot贸n para cambiar la imagen

Pero nos falta algo, qu茅 pasa si la imagen descargada no nos gusta?

Necesitamos un bot贸n para poder cambiarla

Lo estilamos con css

Y controlamos con JavaScript cu谩ndo se aprieta para ejecutar la funci贸n start con un argumento que lo definimos como un string con un texto sem谩ntico cualquiera

Luego lo que haremos es que si existe ese argumento entonces pediremos una nueva imagen s铆 o s铆

Pero hay un 煤ltimo problema y es que si apretamos el bot贸n muy seguido unsplash nos devolver谩 la misma imagen repetida

La documentaci贸n de unsplash nos dice c贸mo evitarlo

Y listos

Nos faltar铆an dos cosas

  • Poner una respuesta gr谩fica cuando apretamos el bot贸n de cambio de imagen, y anular el bot贸n mientras la imagen se est谩 cargando
  • Poner un <input> para poder cambiar las keywords ya que ahora est谩n en el c贸digo

Pero vamos, el grueso de la extensi贸n ya estar铆a hecho

Publicando la extensi贸n

Este paso es el m谩s sencillo, necesitar谩s 5 USD para abrirte cuenta de desarrollador en Google (un 煤nico pago) y ya podr谩s subir tu extensi贸n de Chrome

Abrir cuenta de developers

Tienes que visitar chrome.google.com/webstore/developer/dashboard y all铆 te pedir谩n la one-time developer registration fee, piensa antes con qu茅 cuenta personal quieres abrir esta cuenta developer ya que despu茅s no podr谩s cambiar

Subir la extensi贸n

Una vez dentro te pedir谩n subir la extensi贸n en formato .zip, por lo que coge el directorio donde est茅 todo tu c贸digo, lo empaquetas con cualquier programa de compresi贸n compatible con zip y ya lo puedes subir

All铆 te pedir谩n m谩s informaci贸n, en concreto de la extensi贸n del curso nos dice que no hemos a帽adido un short name en el manifiesto, nos pide que a帽adamos una descripci贸n del mismo, un icono, y pantallazos (screenshots) que servir谩n para convencer al usuario de que se instale la extensi贸n, incluso podemos tener un v铆deo YouTube para a帽adir m谩s argumentos de compra

Piensa que la mitad del trabajo es programaci贸n, y la otra mitad es marketing!

Tienes m谩s informaci贸n sobre c贸mo publicar tu extensi贸n en la documentaci贸n de Google aqu铆

Entre otras cosas podr谩s acotar en qu茅 pa铆ses quieres publicar tu extensi贸n y a qu茅 precio quieres venderla si es que quieres monetizarla

En realidad el proceso es bastante sencillo aunque generar todo el apartado gr谩fico y de texto para la extensi贸n es m谩s laborioso (me refiero a lo que ver谩 el usuario en la tienda de extensiones)

C贸digo final

Si quieres testear el c贸digo final, aqu铆 lo tienes en versi贸n no-extensi贸n para poder probarlo en codesandbox (sin el bot贸n)

馃檵鈥嶁檪锔

Qu茅 tal el curso?
馃憣 Bien 馃檶馃檶
馃憤 Bien, pero algunas cosas podr铆an explicarse mejor 馃槵
馃し鈥嶁檪锔 Da por sentadas demasiadas cosas 馃槖
馃し鈥嶁檪锔 A ver, hay poca chicha 馃槵
馃し鈥嶁檪锔 Los ejemplos no son muy claros 馃檱鈥嶁檪锔
馃し鈥嶁檪锔 No se entiende, est谩 mal escrito 馃憥
鉁嶏笍 Hay errores, rev铆salo en cuanto puedas 馃檹

Quiz谩 te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]