Come ho creato l'estensione Chrome di Domai.nr

Scrivere una nifty Chrome Extension onestamente non è così difficile come potresti pensare. In questo tutorial, ti illustrerò come ho utilizzato un'API offerta da un ottimo servizio di ricerca dei nomi di dominio, Domai.nr, e ho creato un'estensione per Chrome, semplicemente utilizzando la loro API.

---

Step 00: Cosa creeremo oggi

In questo tutorial, ti illustrerò come ho creato l'estensione Chrome di Domai.nr, utilizzando semplici HTML, CSS e jQuery. Il tipico flusso di lavoro di questa estensione può essere suddiviso in questo modo:

1. Clicca l'icona
2. Cerca un dominio
3. Trovane uno disponibile e fai clic su di esso
4. Acquistalo utilizzando uno dei collegamenti sull'estensione

Quindi, non è rivoluzionario o rivoluzionario, ma quando cerchi domini abbastanza frequenti (come sono sicuro che molti di voi lo sono), in realtà serve a uno scopo. Volevo cogliere l'occasione per mostrarti non solo come ho realizzato questa estensione specifica, ma anche, più in generale, come creare un'estensione per il browser web di Chrome.

---

Passaggio 01: cosa c'è in un'estensione di Chrome

Ci sono alcuni diversi tipi di estensioni di Chrome, ma faremo un'estensione di azione del browser che mostra un popup quando si fa clic. Google ha una grande panoramica di ciò che è in ogni estensione. In sostanza, ciò che devi sapere è che ogni estensione è una directory di file, proprio come un sito web. Discuterò di più su ciascuno di questi file più avanti nel tutorial, ma la directory di ogni estensione contiene i seguenti file, e questo è preso direttamente da Google:

• UN manifest.json file
• Uno o più File HTML (a meno che l'estensione non sia un tema)
• Opzionale: uno o più File Javascript
• Opzionale: qualsiasi altro file necessario per l'estensione, ovvero i file di immagine

Maggiori informazioni sul file JSON

Il file manifest fornisce principalmente meta informazioni sull'estensione. Qui è dove si definiscono cose come il nome, la versione, l'icona e persino le autorizzazioni.

---

Passo 02: dare un'occhiata all'API di Domai.nr

L'API di Domai.nr può essere trovata qui. Stiamo utilizzando l'API JSON, che ha due metodi: ricerca e informazioni. Si chiama API JSON perché, beh, restituisce JSON. Entrambi i metodi rispondono a una richiesta GET, quindi possiamo semplicemente concatenare tutto ciò di cui abbiamo bisogno nella nostra richiesta URL, e il resto andrà a posto.

---

Passo 03: scavando nel manifest.json File

Come puoi vedere, un'estensione di Chrome non è molto più di un semplice sito web. La struttura che utilizzeremo è la seguente:

• domainr.html - questo è equivalente al index.html pagina nella maggior parte dei siti web. Preferisco nominare il file HTML principale come l'estensione stessa, è solo una preferenza personale.
• icon.png - Questo 128 px per 128 px icona è ciò che l'utente vede nella barra degli strumenti. Quando fanno clic su questa icona, verrà attivata la nostra estensione.
• immagini/ - questa directory contiene tutte le immagini che useremo, proprio come un sito web tradizionale. Ho contattato i creatori di Domai.nr e ho ottenuto il permesso di utilizzare tutte le immagini che hanno sul loro sito web, ridimensionato. Quindi, ho appena usato Chrome's Web Inspector e ne ho scaricato copie e li ho ridimensionati di conseguenza.
• manifest.json - il manifest.json file, come spiegato sopra, è dove definiamo molte proprietà sulla nostra estensione. È richiesto, ma è piuttosto semplice da creare.
• script.js - questo file JavaScript è il luogo in cui è conservato tutto il jQuery. Lo faremo riferimento nel domainr.html file, e controllerà tutta la logica nella nostra estensione.
• style.css - finalmente, ecco il nostro foglio di stile. Ovviamente faremo riferimento anche a questo nel domainr.html file.

Il nostro file manifest.json

È ora di approfondire il nostro codice e iniziare! Nostro manifest.json il file è abbastanza semplice. Per vedere un riepilogo più dettagliato di tutti i campi supportati in un file manifest, controlla questo. Puoi trovare tutto il codice utilizzato nel nostro file manifest.json di seguito:

 "nome": "Domai.nr Cerca", // il nome dell'estensione "versione": "1.0", // numero di versione "descrizione": "Dai ai tuoi domini un lieto fine.", // descrizione utilizzata in il Chrome Webstore "browser_action": "default_icon": "icon.png", // specifica l'icona predefinita "popup": "domainr.html" // la pagina da mostrare quando viene cliccata l'icona, "permessi": ["http://domai.nr", // diamo il permesso di estensione per accedere ai dati su questi siti. "http://domai.nr/*" // lo suffisso con un *, quindi / api è accessibile]

Come puoi dire dai commenti, è abbastanza semplice. La sezione delle autorizzazioni è estremamente importante nel nostro caso. In caso contrario riceviamo un errore XHR perché l'estensione non può accedere ai domini a cui non gli si concede l'autorizzazione. Quindi, l'importanza della sezione "permessi".

---

Step 04: Guida introduttiva

Per la nostra estensione, ci saranno fondamentalmente tre parti:

• Il
  elemento, con un , che è dove l'utente digita nella query che sta cercando. Questo è ciò su cui si concentrerà questo passaggio del tutorial.
• UN
  con diversi
  • elementi al suo interno, che vengono popolati in base alla loro richiesta nella parte 1.
  • Informazioni sull'opzione che selezionano, in base agli elementi dell'elenco presentati a loro nella parte 2.

  Quindi, penso che sia giusto dire che l'estensione guadagna complessità mentre l'utente progredisce attraverso quelle parti, o fasi descritte sopra. Detto questo, scaviamo nel codice HTML che ho usato per strutturare questo.

  Bene - questo è tutto, per quanto riguarda l'input da parte dell'utente (beh, sul lato HTML, almeno). Per essere un po 'più descrittivo, quel codice è ciò che l'utente vedrà quando fa clic sull'icona per attivare l'estensione. È solo una casella di input che avremo lo stile per assomigliare al sito di domai.nr. Noterai che ho solo un

  elemento: nessun metodo o azione è stato definito. Non avevo bisogno di usarli, come quelli di jQuery $ GetJSON il metodo si prende cura di questo per noi. Sarebbe un ottimo momento per testare l'estensione, no??

  Come testare le estensioni locali

  Per testare un'estensione nello sviluppo che si trova sul tuo computer locale, segui semplicemente questi passaggi, e sarai subito operativo e funzionante in pochissimo tempo:

  1. Clic Finestra e selezionare estensioni.
  2. A destra, verso l'alto della pagina, vedrai un link che abilita / disabilita il Modalità sviluppatore. Clicca qui.
  3. Selezionare Caricare l'estensione scompattata? , e vai alla directory in cui si trova l'estensione. Seleziona quella directory, e questo è tutto!

  Ti consigliamo di mantenere la pagina delle estensioni in una scheda, perché, ogni volta che apporti una modifica all'estensione e vuoi testarla, devi fare clic su "Ricarica" ​​nella pagina delle estensioni per quella specifica.

  L'abbiamo installato localmente, ma siamo onesti: sembra piuttosto orribile. Facciamo un po 'di tutto, quindi i ragazzi di Domai.nr sarebbero orgogliosi di avere un'estensione come questa. Dovrai scaricare le immagini che uso qui, e metterle in una directory / images all'interno della tua cartella di estensione, perché le riferimento ad alcuni di loro alla fine nel CSS (e anche nell'HTML sopra).

   body overflow-x: hidden; font: normale 14px / 18px helvetica, arial, sans-serif; color: # 414240; .input-wrapper overflow: hidden; blocco di visualizzazione; position: relative; #query height: 19px; float: sinistra; display: blocco in linea; border: 3px solid # A9ADA8; larghezza: 220px; imbottitura: 6px 12px 5px 12px; font: normale 14px / 18px helvetica, arial, sans-serif; colore: # 414240; rendering del testo: ottimizzazione della flessibilità; -webkit-font-smoothing: antialiased; border-radius: 18px;  #query: focus outline: none; #loader width: 16px; altezza: 16px; posizione: assoluta; destra: 18px; inizio: 10px; visibilità: nascosta; #button display: none;

  

  Ok, abbiamo la prima parte interamente codificata e con un bell'aspetto. Nella prossima sezione, ci concentreremo sul prendere la query dell'utente e tirare alcuni dati dall'API di Domai.nr.

  ---

  Passaggio 05: mostra all'utente alcuni domini!

  In questa sezione, prenderemo ciò che l'utente ha digitato nel , e interrogarlo con l'API di Domai.nr. Sulla base di questi risultati, visualizzeremo un elenco di tutti i risultati restituiti e un'icona che indica lo stato di quel dominio. Quindi, saltiamo dentro!

  Prima di entrare in una parte del jQuery dietro l'estensione, penso che sarebbe un buon momento per illustrare come ispezionare un'estensione, proprio come un normale sito web. Invece di fare clic con il pulsante destro in qualche punto della pagina e selezionare "Ispeziona elemento", lo farai semplicemente tasto destro del mouse sull'estensione e selezionare "Ispeziona popup". Questo è tutto ciò che c'è da fare!

  Questa sezione è un po 'più interattiva, quindi è il punto di partenza per il nostro Javascript. Userò jQuery per semplicità.

   $ (document) .ready (function () $ ("# query"). focus (); // mette a fuoco l'input quando viene attivata l'estensione var url = "http://domai.nr/api/json/search ? q = ", // URL di base per la richiesta di ricerca infoURL =" http://domai.nr/api/json/info?q= ", // URL di base per la richiesta di richiesta di informazioni; // userà questo più tardi $ ( "form"). submit (function () if ($ ("# query"). val ()! = "") // esegue il codice qui sotto se l'utente digitava qualcosa in? $ ("body"). width (250); $ ("# loader"). css ("visibility", "visible"); $ ("# results-list li"). remove (); // rimuove qualsiasi risultato precedente, se ci sono ? $ ("# search-query"). remove (); // più su questo in poche righe? $ (". estensione a"). remove (); $ ("# results-info"). hide ( // nasconde il pannello più grande se è mostrato? query = $ ("# query"). val (); //? codice qui sotto? 

  Nel blocco qui sopra, facciamo una serie di cose:

  • Per prima cosa, focalizziamo la finestra di input per impostazione predefinita
  • Successivamente, impostiamo alcune variabili (come per l'API Domai.nr)
  • Quindi, sul modulo di invio, facciamo quanto segue:
    • Assicurati che la query non sia vuota
    • Supponendo che passi, impostiamo quindi la larghezza del corpo e mostriamo un'icona del caricatore AJAX
    • Quindi cancelliamo la precedente (se c'è una) lista di domini e rimuoviamo la precedente query di ricerca dalla vista
    • Infine, rimuoviamo alcune informazioni che otterremo in seguito

  Quindi, è un buon inizio. Parte del codice sopra non ha senso perché non è ancora nel nostro codice HTML. Tra poco ci andrà, per ora.

   //? codice sopra? $ .getJSON (url + query, null, function (json) $ ('
  '+ json.query +'
  ') .InsertBefore ( "# risultati"); $ .each (json.results, function (i, result) if (result.availability === "available") $ ("# results-list"). append ('
   '+ result.domain +''+ result.path +'
  '); altrimenti if (result.availability === "maybe") $ ("# results-list"). append ('
   '+ result.domain +''+ result.path +'
  '); else $ ("# results-list"). append ('
   '+ result.domain +''+ result.path +'
  '); ); // end $ .each $ ("# loader"). css ('visibility', 'hidden'); ); // end $ .getJSON $ (this) .find ('# query'). focus (); restituisce falso;  else // descriverà questi dopo? $ (". estensione a"). first (). remove (); $ (". registrars ul li"). remove (); . $ ( "Corpo") di larghezza (250); ); // fine di .submit //? e altro ancora nella prossima sezione! );

  Quella sezione qui sopra, mentre solo poche dozzine di linee, viene eseguita un bel po ':

  • Utilizziamo il metodo getJSON di jQuery e lo usiamo contro l'API di Domai.nr.
  • All'interno di questa funzione, semplicemente ripetiamo tutti i risultati che restituisce.
  • Su ogni risultato, controlliamo il suo stato di disponibilità e restituiamo il corretto
  • basato su quel condizionale.
  • Una volta esaminati tutti i risultati, nascondiamo il caricatore AJAX.
  • Quella altra dichiarazione in là - che viene usata quando la query è vuota. Reimposta solo alcune cose che potrebbero non essere vuote o potrebbe dover essere ripristinato allo stato predefinito.

  E non siamo ancora pronti a testarlo ancora. Lo vedrai nel codice jQuery di cui sopra, stiamo prendendo di mira un elemento di elenco con un ID di risultati-list non è ancora nel DOM. Quindi, andiamo avanti e aggiungiamolo subito dopo elemento in domainr.html.

 ul display: block; clear: both; margin: 0; padding: 0; ul li dimensione font: 15px; color: # 333333; blocco di visualizzazione; width: 100%; line-height: 24px; margin-left: 10px; width: 100%; posizione: relativa; ul li .bg larghezza: 15px; altezza: 15px; blocco di visualizzazione; float: left; ul .available .bg background: url ("images / available.png") 0 7px no-repeat; larghezza: 15px; altezza: 19px; blocco di visualizzazione; float: sinistra; margin-left: 10px; ul .nothing .bg width: 15px; altezza: 19px; blocco di visualizzazione; float: sinistra; margin-left: 10px; ul .maybe .bg background: url ("images / maybe.png") 0 7px no-repeat; larghezza: 15px; altezza: 19px; blocco di visualizzazione; fluttuare: a sinistra; margin-left: 10px; ul li a color: # 2870B0; decorazione del testo: nessuna; width: 100%; display: block; .loader-sub position: absolute; a destra: 38 px; top: 4px; ul li a: hover background: url ("images / grey.png") no-repeat left top; cursor: pointer; # results-info a: hover background: none; decorazione del testo: sottolineatura; cursor: pointer; # results-info h3 margin-top: 11px; allineamento del testo: centro; blocco di visualizzazione; width: 340px; # results-info .available color: # 23B000! important; text-shadow: rgba (100%, 100%, 100%, 1.0) 0 1px 2px; font-size: 24px; ul li a.active background: url ("images / blue.png") no-repeat left top; color: #FFFFFF;

 
 
 
 
 
 
Registrati a:
 
  
 
 
 
 TLD: 
 
  
Wikipedia
 
IANA
 
 
 
 
Utensili:
 
  
Visita il sito (www)
 
CHI È
 
 
 
 
 
 
 
Realizzato da Domai.nr.
 

 $ ("# results-list a"). live ('click', function () // 'live' è richiesto, perché gli elementi popolano il DOM dopo che l'utente cerca qualcosa, non onLoad. $ (this). fratelli ('. loader-sub'). css ('visibility', 'visible'); // nasconde il loader secondario $ (". extension a"). first (). remove (); // rimuove l'estensione precedente (link accanto a 'TLD'). $ (". registrars ul li"). remove (); // nasconde il precedente egistrar 
 elementi. $ .getJSON (infoURL + $ (this) .find ('. domain'). text (), null, function (json) //? fa di nuovo qualche magia JSON. // la riga $ .getJSON sopra cerca il dominio attualmente selezionato $ ("# wikipedia"). attr ('href', (json.tld ['wikipedia_url'])); // aggiunge il link corretto di wikipedia $ ("# iana"). attr ('href', (json.tld ['iana_url'])); // aggiunge il collegamento iana corretto $ (". whois a"). attr ('href', (json.whois_url)); // aggiunge il collegamento whois corretto $ ( ".www a"). attr ('href', 'http: //' + (json.domain)); // aggiunge l'URL corretto $ (". extension"). append ('' + (json.domain .split ('.') [1]) + '') .show (); // questa riga aggiunge l'estensione di dominio corretta accanto alla parte "TLD". $ ('. loader-sub'). css ('visibilità', 'nascosto'); // nasconde il caricatore specifico del dominio, perché tutte le informazioni sono state caricate. // e il codice qui sotto va qui? 

 // il codice sopra? se (json.registrars.length < 1) // if there are no registrars available $(".registrars ul").append('
(non disponibile)
'); $ ("# availability h3"). text ('Non disponibile. :('); // faccia triste. else // ci sono registrar disponibili per (var i = 0; i <= 5; i++) // load the first five $(".registrars ul").append('
'+ json.registrars [i] .name +'
');  // mostra il link "Altro?" $ (". registrars ul"). append ("
Di Più? 
"); // quando l'utente fa clic su" more "? $ (" # load-more "). click (function () $ (this) .remove (); for (var i = 6; i <= json.registrars.length - 1; i++) $(".registrars ul").append('
'+ json.registrars [i] .name +'
'); ); restituisce falso; ); . $ ( 'Body') di larghezza (800); // ingrandisci il menu a discesa. $ ('# results-list a'). removeClass ('active'); // rimuove la possibilità per i fratelli di essere .active $ (this) .addClass ('active'); // dare l'elemento cliccato .active $ ("# results-info"). show (); // mostra i risultati interessanti se ($ (this) .parent (). hasClass ('available')) //? e alcuni condizionali, in base alla disponibilità $ ("# availability"). html ("
A disposizione!
"); else if ($ (this) .parent (). hasClass ('maybe')) $ (" # availability "). html ("
Possibilmente disponibile
"); else $ (" # availability "). html ("
Questo dominio è prese.
"); // popola il registro al link $ (" # results-info "). show (); return false; // non si collega a nulla nell'elenco a discesa);

 #left float: left; larghezza: 250px; padding-bottom: 10px; # results-info float: right; larghezza: 510px; display: none; .register-stuff overflow: hidden; .right float: right; .extension float: right; font-size: 13px; margin-right: 70px; # load-more color: # 6C9DC9; font-size: 12px; line-height: 18px; abbr float: left; # results-info h4 margin-bottom: 9px; font-size: 16px; font-weight: bold; vertical-align: top; margin-top: 0; # results-info .sections> li position: relative; fluttuare: a sinistra; larghezza: 140 px; border-left: 1px solid # A9ADA8; padding-left: 9px; margin-right: 10px; # results-info .sections li ul li margin-left: 0; line-height: 20px; # results-info .sections li ul li a dimensione font: 13px; display: inline; #footer overflow: hidden; font-size: 11px; colore: # 666; altezza: 20px; clear: both; margin-right: 15px; #footer p margin: 0; padding: 0; text-align: right; #footer p a color: # 666; #footer p a: hover color: # 333333;