Cómo hice la extensión Chrome de Domai.nr

Escribir una ingeniosa extensión de Chrome honestamente no es tan difícil como podrías pensar. En este tutorial, te mostraré cómo tomé una API ofrecida por un excelente servicio de búsqueda de nombres de dominio, Domai.nr, y creé una extensión de Chrome para ellos, simplemente utilizando su API..

---

Paso 00: Lo que vamos a crear hoy

En este tutorial, te mostraré cómo hice la extensión Chrome de Domai.nr, utilizando HTML simple, CSS y jQuery. El flujo de trabajo típico de esta extensión se puede desglosar así:

1. Haga clic en el icono
2. Buscar un dominio
3. Encuentra uno que esté disponible, y haz clic en él
4. Adquiéralo utilizando uno de los enlaces de la extensión.

Entonces, no es revolucionario ni innovador, pero cuando buscas dominios con bastante frecuencia (como estoy seguro de que muchos de ustedes lo son), en realidad tiene un propósito. Quería aprovechar esta oportunidad para no solo mostrarle cómo hice esta extensión específica, sino también, en general, cómo hacer una extensión para el navegador web Chrome.

---

Paso 01: ¿Qué hay en una extensión de Chrome?

Hay algunos tipos diferentes de extensiones de chrome, pero haremos una extensión de acción del navegador que muestre una ventana emergente cuando se haga clic. Google tiene una gran visión general de lo que hay en cada extensión. Esencialmente, lo que necesita saber es que cada extensión es un directorio de archivos, al igual que un sitio web. Discutiré más sobre cada uno de estos archivos más adelante en el tutorial, pero el directorio de cada extensión contiene los siguientes archivos, y esto se toma directamente de Google:

• UNA archivo manifest.json
• Uno o mas Archivos HTML (a menos que la extensión sea un tema)
• Opcional: Uno o más Archivos Javascript
• Opcional: cualquier otro archivo que su extensión necesite, es decir, archivos de imagen

Más sobre el archivo JSON

El archivo de manifiesto proporciona mayormente información meta sobre la extensión. Aquí es donde se definen cosas como el nombre, la versión, el icono e incluso los permisos..

---

Paso 02: Echando un vistazo a la API de Domai.nr

La API de Domai.nr se puede encontrar aquí. Estamos utilizando la API JSON, que tiene dos métodos: búsqueda e información. Se llama API JSON porque, bueno, devuelve JSON. Ambos métodos responden a una solicitud GET, por lo que solo podemos concatenar lo que necesitemos en nuestra URL de solicitud, y el resto caerá en su lugar.

---

Paso 03: Cavando en el manifest.json Expediente

Como puede ver, una extensión de Chrome realmente no es mucho más que un sitio web básico. La estructura que usaremos es la siguiente:

• domainr.html - esto es equivalente a la index.html Página en la mayoría de los sitios web. Prefiero nombrar el archivo HTML principal igual que la extensión en sí, es solo una preferencia personal.
• icon.png - esta 128 px por 128 px El icono es lo que el usuario ve en la barra de herramientas. Cuando hagan clic en este icono, se disparará nuestra extensión..
• imagenes / - Este directorio contiene todas las imágenes que usaremos, al igual que un sitio web tradicional. Me puse en contacto con los creadores de Domai.nr y obtuve permiso para usar todas las imágenes que tienen en su sitio web, simplemente a escala reducida. Entonces, solo utilicé el Inspector web de Chrome y descargué copias de ellos, y los escalé en consecuencia.
• manifest.json - la manifest.json El archivo, como se explicó anteriormente, es donde definimos muchas propiedades sobre nuestra extensión. Es requerido, pero es bastante simple de crear..
• script.js - este archivo JavaScript es donde se lleva a cabo todo nuestro jQuery. La referenciaremos en el domainr.html archivo, y controlará toda la lógica en nuestra extensión.
• style.css - Finalmente, aquí está nuestro archivo de hojas de estilo. Obviamente también haremos referencia a esto en el domainr.html expediente.

Nuestro archivo manifest.json

¡Es hora de profundizar en nuestro código y empezar! Nuestro manifest.json El archivo es bastante simple. Para ver un resumen más detallado de todos los campos admitidos en un archivo de manifiesto, compruebe esto. Puede encontrar todo el código utilizado en nuestro archivo manifest.json a continuación:

 "name": "Domai.nr Search", // el nombre de la extensión "version": "1.0", // número de versión "description": "Dale a tus dominios un final feliz.", // descripción usada en Chrome Webstore "browser_action": "default_icon": "icon.png", // especifica el icono predeterminado "popup": "domainr.html" // la página para mostrar cuando se hace clic en el icono, "permisos": ["http://domai.nr", // le damos permiso a la extensión para acceder a los datos en estos sitios. "http://domai.nr/*" // lo colocamos con un *, por lo que / api es accesible]

Como se puede ver en los comentarios, es bastante sencillo. La sección de permisos es extremadamente importante en nuestro caso. De lo contrario, obtendremos un error XHR porque la extensión no puede acceder a los dominios a los que no le da permiso. De ahí, la importancia de la sección de "permisos"..

---

Paso 04: Comenzando

Para nuestra extensión, básicamente habrá tres partes:

• los
  elemento, con un , que es donde el usuario escribe en la consulta que están buscando. Esto es en lo que se enfocará este paso del tutorial..
• UNA
  con varios
  • Elementos dentro de él, que se rellena en función de su solicitud en la parte 1.
  • Información sobre la opción que seleccionan, basada en los elementos de la lista que se les presenta en la parte 2.

  Entonces, creo que es justo decir que la extensión gana complejidad a medida que el usuario avanza a través de las partes o etapas descritas anteriormente. Con eso dicho, vamos a profundizar en el HTML que utilicé para estructurar esto.

  Bien, eso es todo, en lo que respecta a obtener información del usuario (bueno, en el lado HTML, al menos). Para ser un poco más descriptivo, ese código es lo que verá el usuario cuando haga clic en el icono para activar la extensión. Es solo un cuadro de entrada que vamos a diseñar para que parezca que el sitio domai.nr lo tiene. Notarás que simplemente tengo un

  Elemento - ningún método o acción ha sido definido. No necesitaba usar esos, como jQuery $ .getJson El método se encarga de eso por nosotros. Este sería un buen momento para probar la extensión, ¿no es así??

  Cómo probar extensiones locales

  Para probar una extensión en desarrollo que se encuentra en su máquina local, simplemente siga estos pasos y luego estará listo para usarlo en poco tiempo:

  1. Hacer clic Ventana y seleccione Extensiones.
  2. A la derecha, hacia la parte superior de la página, verá un enlace que alterna la Modo desarrollador. Haga clic en ese.
  3. Seleccionar Cargar extensión desempaquetada? , y navegue hasta el directorio en el que se encuentra la extensión. Seleccione ese directorio, y eso es todo!

  Sin embargo, querrá mantener la página de extensiones en una pestaña, ya que cada vez que realice un cambio en la extensión y quiera probarla, deberá hacer clic en "Recargar" en la página de extensiones para esa específica..

  Lo tenemos instalado localmente, pero seamos honestos, se ve bastante horrible. Encantémoslo para que los chicos de Domai.nr estén orgullosos de tener una extensión como esta. Querrá descargar las imágenes que utilizo aquí y colocarlas en un directorio / images dentro de su carpeta de extensión, porque al final hago referencia a algunas de ellas en el CSS (y en el código HTML anterior)..

   cuerpo overflow-x: oculto; fuente: normal 14px / 18px helvetica, arial, sans-serif; color: # 414240; .input-wrapper desbordamiento: oculto; bloqueo de pantalla; position: relative; #query height: 19px; flotador izquierdo; pantalla: bloque en línea; frontera: 3px sólido # A9ADA8; ancho: 220px; relleno: 6px 12px 5px 12px; fuente: normal 14px / 18px helvética, arial, sans-serif; color: # 414240; renderizado de texto: optimiza la legibilidad; -webkit-font-smoothing: suavizado; radio del borde: 18px;  #query: focus outline: none; #loader width: 16px; altura: 16px; posición: absoluta; derecha: 18px; superior: 10px; visibilidad: oculta; #button display: none;

  

  Bien, tenemos la primera parte, todo codificado y con buen aspecto. En la siguiente sección, nos centraremos en tomar la consulta del usuario y extraer algunos datos de la API de Domai.nr.

  ---

  Paso 05: Mostrar al usuario algunos dominios!

  En esta sección, tomaremos lo que el usuario escribió en el , y consultarlo contra la API de Domai.nr. Sobre la base de esos resultados, mostraremos una lista de todos los resultados devueltos, así como un icono que indica el estado de ese dominio. Entonces, saltemos a la derecha en!

  Antes de entrar en algunos de los jQuery detrás de la extensión, creo que este sería un buen momento para mencionar cómo inspeccionar una extensión, como un sitio web normal. En lugar de hacer clic con el botón derecho en algún lugar de la página y seleccionar "Inspeccionar elemento", simplemente haga clic derecho en la extensión y seleccione "Inspeccionar ventana emergente". Eso es todo al respecto!

  Esta sección es un poco más interactiva, por lo que es el punto de partida de nuestro Javascript. Estaré usando jQuery por simplicidad.

   $ (document) .ready (function () $ ("# query"). focus (); // enfoca la entrada cuando se activa la extensión var url = "http://domai.nr/api/json/search ? q = ", // URL base para la solicitud de búsqueda infoURL =" http://domai.nr/api/json/info?q= ", // URL base para la consulta de solicitud de información; // utilizará esto más tarde $ ( "form"). submit (function () if ($ ("# query"). val ()! = "") // ejecuta el siguiente código si el usuario escribió algo en? $ ("body"). ancho (250); $ ("# loader"). css ("visibilidad", "visible"); $ ("# results-list li"). remove (); // elimina cualquier resultado anterior, si hay alguno ? $ ("# search-query"). remove (); // más sobre esto en unas pocas líneas? $ (". extension a"). remove (); $ ("# results-info"). hide ( ); // oculta el panel más grande si se muestra? query = $ ("# query"). val (); //? código debajo? 

  En la parte superior, hacemos varias cosas:

  • Primero, enfocamos el cuadro de entrada por defecto
  • A continuación, establecemos algunas variables (según la API Domai.nr)
  • Luego, en el formulario de envío, hacemos lo siguiente:
    • Compruebe que la consulta no esté en blanco
    • Suponiendo que eso pase, luego establecemos el ancho del cuerpo y mostramos un ícono del cargador AJAX
    • Luego borramos la lista de dominios anterior (si existe) y eliminamos la consulta de búsqueda anterior de la vista.
    • Finalmente, eliminamos alguna información que veremos a continuación.

  Entonces, es un buen comienzo. Parte del código anterior no tendrá sentido porque aún no está en nuestro HTML. Será en breve, solo ve con eso por ahora.

   //? código arriba? $ .getJSON (url + consulta, nulo, función (json) $ ('
  '+ json.query +'
  ') .insertBefore ("# results"); $ .each (json.results, function (i, result) if (result.availability === "available") $ ("# results-list"). append ('
   '+ resultado.dominio +''+ result.path +'
  '); else if (result.availability === "maybe") $ ("# results-list"). append ('
   '+ resultado.dominio +''+ result.path +'
  '); else $ ("# results-list"). append ('
   '+ resultado.dominio +''+ result.path +'
  '); ); // end $ .each $ ("# loader"). css ('visibilidad', 'oculto'); ); // end $ .getJSON $ (this) .find ('# query'). focus (); falso retorno;  else // los describiré más tarde? $ (". extensión a"). first (). remove (); $ (". registrars ul li"). remove (); $ ("cuerpo"). ancho (250); ); // fin de .submit //? ¡Y más por venir en la siguiente sección! );

  Esa sección de arriba, mientras que solo unas pocas docenas de líneas, se hace bastante:

  • Utilizamos el método getJSON de jQuery y lo usamos contra la API de Domai.nr.
  • Dentro de esa función, simplemente iteramos sobre todos los resultados que devuelve.
  • En cada resultado, verificamos su estado de disponibilidad y devolvemos el correcto
  • basado en ese condicional.
  • Una vez que hemos pasado por todos los resultados, ocultamos el cargador AJAX.
  • Esa otra declaración allí, se usa cuando la consulta está en blanco. Simplemente restablece algunas cosas que pueden no estar en blanco o que deben restablecerse a su estado predeterminado.

  Y todavía no estamos listos para probarlo. Verá que en el código de jQuery anterior, estamos apuntando a un elemento de lista con un ID de lista de resultados Eso aún no está en el DOM. Entonces, sigamos adelante y agreguemos que justo después de la elemento en domainr.html.

 ul display: block; Limpia los dos; margen: 0; relleno: 0; ul li font-size: 15px; color: # 333333; bloqueo de pantalla; ancho: 100%; altura de línea: 24px; margen izquierdo: 10px; ancho: 100%; posición: relativo; ul li .bg ancho: 15px; altura: 15px; bloqueo de pantalla; float: left; ul .available .bg background: url ("images / available.png") 0 7px no se repite; ancho: 15px; altura: 19px; bloqueo de pantalla; flotador izquierdo; margen izquierdo: 10px; ul .nothing .bg width: 15px; altura: 19px; bloqueo de pantalla; flotador izquierdo; margen izquierdo: 10px; ul .maybe .bg background: url ("images / maybe.png") 0 7px no se repite; ancho: 15px; altura: 19px; bloqueo de pantalla; flotador izquierdo; margen izquierdo: 10px; ul li a color: # 2870B0; texto-decoración: ninguno; ancho: 100%; pantalla: bloque; .loader-sub posición: absoluta; derecha: 38px; arriba: 4px; ul li a: hover background: url ("images / grey.png") sin repetición arriba a la izquierda; cursor: puntero; # results-info a: hover background: none; texto-decoración: subrayado; cursor: puntero; # results-info h3 margin-top: 11px; text-align: center; bloqueo de pantalla; ancho: 340px; # results-info .available color: # 23B000! important; text-shadow: rgba (100%, 100%, 100%, 1.0) 0 1px 2px; tamaño de fuente: 24px; ul li a.active background: url ("images / blue.png") sin repetición arriba a la izquierda; color: #ffffff;

 
 
 
 
 
 
Registrarse en:
 
  
 
 
 
 TLD: 
 
  
Wikipedia
 
IANA
 
 
 
 
Herramientas:
 
  
Visite el sitio (www)
 
QUIEN ES
 
 
 
 
 
 
 
Desarrollado por Domai.nr.
 

 $ ("# results-list a"). live ('click', function () // 'live' es obligatorio, porque los elementos llenan el DOM después de que el usuario busca algo; no está en la carga. $ (esto). hermanos ('. loader-sub'). css ('visibilidad', 'visible'); // oculta el cargador secundario $ (". extensión a"). first (). remove (); // elimina la extensión anterior (enlace al lado de 'TLD'). $ (". registrars ul li"). remove (); // ocultar los egistrar anteriores 
 elementos. $ .getJSON (infoURL + $ (this) .find ('. domain'). text (), null, function (json) //? volver a hacer un poco de magia con JSON. // la línea $ .getJSON de arriba busca el dominio seleccionado actualmente $ ("# wikipedia"). attr ('href', (json.tld ['wikipedia_url'])); // agrega el enlace correcto de wikipedia $ ("# iana"). attr ('href', (json.tld ['iana_url'])); // agrega el enlace correcto de iana $ (". whois a"). attr ('href', (json.whois_url)); // agrega el enlace de whois correcto $ ( ".www a"). attr ('href', 'http: //' + (json.domain)); // agrega la URL correcta $ (". extensión"). append ('' + (json.domain .split ('.') [1]) + '') .show (); // esta línea agrega la extensión de dominio correcta para que esté junto a la parte "TLD". $ ('. loader-sub'). css ('visibilidad', 'oculto'); // oculta el cargador específico del dominio, porque se ha cargado toda la información. // y el código a continuación va aquí? 

 // el código de arriba? if (json.registrars.length < 1) // if there are no registrars available $(".registrars ul").append('
(no disponible)
'); $ ("# disponibilidad h3"). texto ('No disponible. :('); // cara triste. else // hay registradores disponibles para (var i = 0; i <= 5; i++) // load the first five $(".registrars ul").append('
'+ json.registrars [i] .name +'
');  // muestra el enlace "¿Más?" $ (". registrars ul"). append ("
Más? 
"); // cuando el usuario haga clic en" más "? $ (" # carga-más "). haga clic en (función () $ (esto) .remove (); para (var i = 6; i <= json.registrars.length - 1; i++) $(".registrars ul").append('
'+ json.registrars [i] .name +'
'); ); falso retorno; ); $ ('cuerpo'). ancho (800); // Hacer el menú desplegable más grande. $ ('# results-list a'). removeClass ('active'); // elimina la posibilidad de que los hermanos sean .active $ (this) .addClass ('active'); // da el elemento en el que se hizo clic .active $ ("# results-info"). show (); // muestra las cosas geniales de los resultados si ($ (this) .parent (). hasClass ('available')) //? y algunos condicionales, según la disponibilidad $ ("# disponibilidad"). html ("
Disponible!
"); else if ($ (this) .parent (). hasClass ('maybe')) $ (" # disponibilidad "). html ("
Posiblemente Disponible
"); else $ (" # disponibilidad "). html ("
Este dominio es tomado.
"); // rellene el Registro en el enlace $ (" # results-info "). show (); devuelva false; // no enlace a nada en la lista desplegable);

 #left float: left; ancho: 250px; padding-bottom: 10px; # results-info float: right; ancho: 510px; pantalla: ninguna; .register-stuff desbordamiento: oculto; .right float: right; .extension float: right; tamaño de fuente: 13px; margen derecho: 70px; # load-more color: # 6C9DC9; tamaño de fuente: 12px; line-height: 18px; abbr float: left; # results-info h4 margin-bottom: 9px; tamaño de fuente: 16px; font-weight: negrita; alineación vertical: superior; margin-top: 0; # results-info .sections> li position: relative; flotador izquierdo; ancho: 140px; borde izquierdo: 1px sólido # A9ADA8; relleno-izquierda: 9px; margin-right: 10px; # results-info .sections li ul li margin-left: 0; line-height: 20px; # results-info .sections li ul li a font-size: 13px; pantalla: en línea; #footer desbordamiento: oculto; tamaño de fuente: 11px; color: # 666; altura: 20px; Limpia los dos; margen derecho: 15px; # pie de página margen: 0; relleno: 0; text-align: right; #footer p a color: # 666; #footer p a: hover color: # 333333;