Cum am făcut extensia Domai.nr Chrome

Scrierea unui exercițiu Chrome exigent în mod cinstit nu este la fel de dificilă cum credeți. În acest tutorial, vă voi ajuta să vă familiarizați cu modul în care am luat un API oferit de un serviciu de căutare de domenii, Domai.nr, și am creat o extensie Chrome pentru ei, pur și simplu folosind API-.

---

Pasul 00: Ce vom crea astăzi

În acest tutorial, vă voi arăta cum am făcut extensia Domai.nr Chrome, utilizând simple HTML, CSS și jQuery. Fluxul de lucru tipic al acestei extensii poate fi împărțit astfel:

1. Faceți clic pe pictograma
2. Căutați un domeniu
3. Găsiți unul disponibil și faceți clic pe el
4. Cumpărați-l utilizând unul dintre legăturile de pe extensie

Deci, nu este revoluționar sau rupt, dar atunci când căutați domenii destul de frecvent (așa cum sunt sigur că mulți dintre voi sunteți), acesta într-adevăr are un scop. Am vrut să profit de această ocazie pentru a vă arăta nu numai modul în care am făcut această extensie specifică, dar, mai general, cum să faceți o extensie pentru browserul Chrome.

---

Pasul 01: Ce se întâmplă într-o Extensie Chrome

Există câteva tipuri diferite de extensii cromate, dar vom face o extensie de acțiune a browserului care arată un popup atunci când se face clic. Google are o imagine de ansamblu asupra a ceea ce există în fiecare extensie. În esență, ceea ce trebuie să știți este că fiecare extensie este un director de fișiere, asemănător unui site web. Voi discuta mai multe despre fiecare dintre aceste fișiere mai târziu în tutorial, dar directorul fiecărei extensii conține următoarele fișiere și acest lucru este luat direct de la Google:

• A manifest.json
• Una sau mai multe Fișiere HTML (cu excepția cazului în care extensia este o temă)
• Opțional: una sau mai multe Fișierele Javascript
• Opțional: Orice alte fișiere care necesită extensia dvs., adică fișiere imagine

Mai multe despre fișierul JSON

Fișierul manifest oferă în principal informații meta despre extensie. Aici definiți lucruri precum numele, versiunea, pictograma și chiar permisiunile.

---

Pasul 02: Privind API-ul Domai.nr

API-ul Domai.nr poate fi găsit aici. Folosim API-ul JSON, care are două metode: Căutare și Info. Se numește API-ul JSON pentru că, bine, se întoarce JSON. Ambele metode răspund la o solicitare GET, astfel încât să putem concatena doar ceea ce avem nevoie în URL-ul cererii noastre, iar restul va cădea în loc.

---

Pasul 03: Săpați în manifest.json Fişier

După cum vedeți, o extensie Chrome nu este cu mult mai mult decât un site de bază. Structura pe care o vom folosi este următoarea:

• domainr.html - acest lucru este echivalent cu index.html în majoritatea site-urilor web. Prefer să denumesc fișierul HTML principal ca și extensia în sine - este doar o preferință personală.
• icon.png - acest 128px by 128px pictograma este ceea ce văd utilizatorul în bara de instrumente. Atunci când fac clic pe această pictogramă, aceasta va declanșa extensia noastră.
• images / - acest director conține toate imaginile pe care le vom folosi, la fel ca un site tradițional. Am contactat creatorii site-ului Domai.nr și am obținut permisiunea de a folosi toate imaginile pe care le au pe site-ul lor web, diminuat. Deci, am folosit doar Inspectorul Web Chrome și le-am descărcat copii și le-am scalat corespunzător.
• manifest.json - manifest.json fișierul, așa cum am explicat mai sus, este locul în care definim multe proprietăți despre extensia noastră. Este necesar, dar este destul de simplu de creat.
• script.js - acest fișier JavaScript este locul în care toate jQuery noastre este deținut. Vom face referire la acesta în domainr.html fișier și va controla toată logica din extensia noastră.
• style.css - în cele din urmă, aici este fișierul nostru de stil. În mod evident, vom menționa și acest lucru în domainr.html fişier.

Fișierul manifest.json

E timpul să ne grăbim codul și să începem! Al nostru manifest.json fișierul este destul de simplu. Pentru a vedea un rezumat mai detaliat al tuturor câmpurilor acceptate într-un fișier manifest, verificați acest lucru. Puteți găsi tot codul utilizat în fișierul manifest.json de mai jos:

 "nume": "Căutarea Domai.nr", // numele extensiei "versiune": "1.0", // numărul versiunii "descriere": "Dă domenii dvs. un sfârșit fericit". Chrome Webstore "browser_action": "default_icon": "icon.png", // specifică pictograma implicită "popup": "domainr.html" // pagina care va fi afișată când se face clic pe pictograma "permisiuni": ["http://domai.nr", // acordăm permisiunea de extensie pentru a accesa datele de pe aceste site-uri. "http://domai.nr/*" // o sugem cu un *, deci / api este accesibil)

După cum puteți spune prin comentarii, este destul de simplă. Secțiunea de permisiuni este extrem de importantă în cazul nostru. În caz contrar, vom obține o eroare XHR, deoarece extensia nu poate accesa domenii cărora nu îi acordați permisiunea. Prin urmare, importanța secțiunii "permisiuni".

---

Pasul 04: Începeți

Pentru extensia noastră, vor exista în principal trei părți:

• element, cu un , care este locul în care utilizatorul scrie în interogarea pe care o caută. Acesta este pasul pe care îl va concentra acest tutorial.
• A
  cu mai mulți
  • elementele din interiorul acestuia, care sunt populate pe baza cererii lor din partea 1.
  • Informații privind opțiunea pe care o selectează, pe baza elementelor din listă prezentate în partea a 2-a.

  Deci, cred că este corect să spunem că extensia câștigă complexitate pe măsură ce utilizatorul avansează prin acele părți sau etapele descrise mai sus. Odată ce am spus asta, hai să săpăm în codul HTML pe care l-am structurat.

  Bine - asta e, în ceea ce privește obținerea de intrare de la utilizator este în cauză (bine, pe partea de HTML, cel puțin). Pentru a fi un pic mai descriptiv, acel cod este ceea ce utilizatorul va vedea atunci când fac clic pe pictograma pentru a declanșa extensia. Este doar o cutie de intrare pe care o vom face să arate ca site-ul domai.nr-l are. Veți observa că am doar un a

  element - nu a fost definită nicio metodă sau acțiune. N-am avut nevoie să le folosesc pe acestea, ca jQuery $ .getJson metoda are grijă de asta pentru noi. Ar fi un moment minunat pentru a testa extensia, nu-i așa??

  Cum se testează extensiile locale

  Pentru a testa o extensie a dezvoltării care se află pe mașina dvs. locală, urmați acești pași și apoi veți fi pregătită să o faceți în cel mai scurt timp:

  1. Clic Fereastră și selectați Extensii.
  2. În partea dreaptă, spre partea de sus a paginii, veți vedea un link care comută Modul dezvoltator. Faceți clic pe acesta.
  3. Selectați Încărcați extensia neambalată? , și navigați la directorul în care se află extensia. Selectați acel director și asta-i tot!

  Totuși, veți dori să păstrați pagina de extensii într-o filă, pentru că de fiecare dată când faceți o modificare a extensiei și doriți să o testați, va trebui să faceți clic pe "Reîncărcați" în pagina cu extensii pentru acea anumită.

  Am instalat-o local, dar să fim cinstiți - arată destul de hidos. Hai să facem asta, așa că tipii Domai.nr ar fi mândri că ar avea o extensie ca asta. Veți dori să descărcați imaginile pe care le folosesc aici și să le plasați într-un director / images din interiorul folderului dvs. de extensie, deoarece le refer la unele dintre ele în cele din urmă în CSS (și în HTML deasupra).

   corp suprapus-x: ascuns; font: normal 14px / 18px helvetica, arial, sans-serif; culoare: # 414240; .pacheta de intrare overflow: hidden; afișare: bloc; poziția: relativă; #query height: 19px; plutește la stânga; afișare: inline-block; frontieră: 3px solid # A9ADA8; lățime: 220px; umplutura: 6px 12px 5px 12px; font: normal 14px / 18px helvetica, arial, sans-serif; culoare: # 414240; redarea textului: optimizabilitatea; -webkit-font-smoothing: antialiased; raza de graniță: 18px;  #query: focalizați outline: none; #loader width: 16px; înălțime: 16px; poziția: absolută; dreapta: 18px; top: 10px; vizibilitate: ascuns; #button display: none;

  

  Bine - avem prima parte toate codificate și arata bine. În următoarea secțiune, ne vom concentra pe luarea interogării utilizatorului și extragerea unor date din API-ul Domai.nr.

  ---

  Pasul 05: Afișează Utilizatorul Unele Domenii!

  În această secțiune, vom lua ce a introdus utilizatorul în , și interogați-l împotriva API-ului Domai.nr. Pe baza acestor rezultate, vom afișa o listă a tuturor rezultatelor returnate, precum și o pictogramă care indică starea acelui domeniu. Deci, hai să intrăm înăuntru!

  Înainte de a intra în unele dintre jQuery din spatele extensiei, cred că ar fi un moment bun pentru a aduce în discuție cum să inspectați o extensie, la fel ca un site web obișnuit. În loc să faceți clic dreapta pe undeva în pagină și selectând "Inspect Element", pur și simplu faceți clic dreapta pe extensie și selectați "Inspect popup". Cam despre asta e!

  Această secțiune este un pic mai interactivă, deci este punctul de plecare al Javascript-ului nostru. Voi folosi jQuery pentru simplitate.

   $ (document) .ready (functie () $ ("interogare") focus (); // focalizeaza intrarea cand extensia este declansata var url = "http://domai.nr/api/json/search ? q = ", // URL-ul de bază pentru cererea de căutare infoURL =" http://domai.nr/api/json/info?q= ", // URL-ul de bază pentru interogarea solicitării info; // va folosi acest $ $ mai târziu () () () () () ($ ("query")) (val ()! = "") // executați codul de mai jos dacă utilizatorul a scris ceva în? ("# results-list li") remove (); // elimina orice rezultate anterioare, dacă există $ ("# căutare-interogare") elimina (); // mai mult pe aceasta în câteva rânduri $ (".extensie a"). ); // ascunde panoul mai mare dacă este afișat? query = $ ("# query") val (); //?? 

  În bucata de mai sus, facem o serie de lucruri:

  • În primul rând, ne concentrăm în mod implicit caseta de introducere
  • Apoi, setăm câteva variabile (conform API-ului Domai.nr)
  • Apoi, pe formularul de trimitere, facem următoarele:
    • Verificați dacă interogarea nu este necompletată
    • Presupunând că trece, apoi setăm lățimea corpului și afișăm pictograma încărcător AJAX
    • Apoi, ștergem lista precedentă (dacă există una) și eliminăm interogarea de căutare anterioară din vizualizare
    • În cele din urmă, eliminăm câteva informații pe care le vom obține mai departe

  Deci, este un început bun. Unele dintre codurile de mai sus nu vor avea sens deoarece nu sunt încă în codul HTML. Va fi în curând, du-te cu asta pentru moment.

   //? cod de mai sus? $ .getJSON (url + interogare, null, functie (json) $ ('
  '+ json.query +'
  „) .InsertBefore ( "# rezultate"); $ (orice rezultat), funcția (i, rezultatul) if (result.availability === "disponibil") $ ("
   '+ rezultat.domeniu +''+ rezultat.path +'
  „); altfel dacă (result.availability === "poate") $ ("# results-list") append ('
   '+ rezultat.domeniu +''+ rezultat.path +'
  „); altfel $ ("# results-list"). append ('
   '+ rezultat.domeniu +''+ rezultat.path +'
  „); ); // end $ .each $ ("# loader"). css ('vizibilitate', 'ascuns'); ); // end $ .getJSON $ (acest) .find ('# interogare') focus (); return false;  altfel // le va descrie mai târziu? $ (("extensie a")) first () remove (); $ (".registrarii ul li") remove (); . $ ( "Corp"), lățime (250); ); // sfârșitul lui .submit //? și mai mult pentru a veni în secțiunea următoare! );

  Această secțiune de mai sus, în timp ce doar câteva duzini de linii, se face destul de puțin:

  • Folosim metoda getJSON a jQuery și o folosim împotriva API-ului Domai.nr.
  • În cadrul acestei funcții, vom repeta pur și simplu toate rezultatele pe care le întoarce.
  • La fiecare rezultat, verificăm starea de disponibilitate și returnează corect
  • pe baza acelei condiționări.
  • După ce am trecut prin toate rezultatele, ascundem încărcătorul AJAX.
  • Acea instrucțiune altceva acolo - folosită atunci când interogarea este necompletată. Restabilește doar câteva lucruri care nu pot fi goale sau pot fi resetate la starea lor implicită.

  Și nu suntem pregătiți să-l testăm încă. Veți vedea că în codul jQuery de mai sus, vizăm un element de listă cu un id de rezultate-list care nu este încă în DOM. Deci, să mergem mai departe și să adăugăm că imediat după element în domeniu.html.

 ul display: bloc; clar: ambele; margin: 0; padding: 0; ul li font-size: 15px; culoare: # 333333; afișare: bloc; lățime: 100%; line-height: 24px; margin-left: 10px; lățime: 100%; poziția: relativă; ul li .bg width: 15px; înălțime: 15px; afișare: bloc; float: stânga; ul .available .bg background: url ("images / available.png") 0 7px no-repeat; lățime: 15px; înălțime: 19px; afișare: bloc; plutește la stânga; margine-stânga: 10px; ul. nimic .bg width: 15px; înălțime: 19px; afișare: bloc; plutește la stânga; margin-left: 10px; ul .maybe .bg background: url ("images / maybe.png") 0 7px nu-repeta; lățime: 15px; înălțime: 19px; afișare: bloc; plutește la stânga; margin-left: 10px; ul li a culoare: # 2870B0; text-decoration: nici unul; lățime: 100%; display: bloc; .loader-sub poziție: absolută; dreapta: 38px; top: 4px; ul li a: hover (fundal: url ("images / grey.png") nu-repeta stânga sus; cursor: indicatorul; # results-info a: hover background: none; text-decorare: subliniere; cursor: pointer; # results-info h3 margin-top: 11px; text-align: centru; afișare: bloc; lățime: 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 fundal: url ("images / blue.png") no-repeat left top; culoare: #FFFFFF;

 
 
 
 
 
 
Înregistrați-vă la:
 
  
 
 
 
 TLD: 
 
  
Wikipedia
 
IANA
 
 
 
 
Instrumente:
 
  
Vizitați site-ul (www)
 
CARE ESTE
 
 
 
 
 
 
 
Realizat de Domai.nr.
 

 $ ("# results-list a") .de live ('click', function () // 'live' este necesar, deoarece elementele populeaza DOM dupa ce utilizatorul cauta ceva, nu onLoad. (c) ("vizibilitate", "vizibilă"); // ascundeți încărcătorul secundar $ (".extension a"). (link-ul de lângă "TLD") $ (".registrars ul li") remove (); // ascunde 
 elemente. $ .getJSON (infoURL + $ (this) .find ('.domeniu'). text (), null, function (json) // a face ceva magic JSON din nou. ("href", "js", "wreck", "wreck", " (json.tld ['iana_url'])); // adaugă linkul corect iana $ (".whois a") .acr ('href', (json.whois_url)); ".adr ('href', 'http: //' + (json.domain)); // adaugă adresa URL corectă $ (" .extension "). .split ('.') [1]) + '') .show (); // această linie adaugă extensia de domeniu corectă pentru a fi alături de partea "TLD". ("vizibilitate", "ascunsă"); // ascunde încărcătorul specific domeniului, deoarece toate informațiile au fost încărcate. // și codul de mai jos este aici? 

 // codul de mai sus? dacă (json.registrars.length < 1) // if there are no registrars available $(".registrars ul").append('
(nu e disponibil)
„); $ ("# disponibilitate h3") text ('Nu este disponibil.: ('); // tristă. altceva // există registre disponibile pentru (var i = 0; i <= 5; i++) // load the first five $(".registrars ul").append('
'+ json.registrars [i] .name +'
„);  // afișează linkul "Mai mult?" $ (".registrars ul") append ("
Mai Mult? 
"() () () () () () () () () <= json.registrars.length - 1; i++) $(".registrars ul").append('
'+ json.registrars [i] .name +'
„); ); return false; ); . $ ( 'Corp'), lățime (800); // face ca diminuarea să fie mai mare. $ ('# results-list a') removeClass ("activ"); // elimina posibilitatea fratilor de a fi activ $ (acest) .addClass ('activ'); // da elementul clic. $ active ("# results-info"). show (); // arata rezultatele chestiilor racoroase daca ($ (this) .parent () hasClass ('disponibil')) //? și unele condiționalități, bazate pe disponibilitatea $ ("# disponibilitate") html ("
Disponibil!
") altfel dacă ($ (this) .parent () hasClass (" poate ")) $ (" # disponibilitate ") html ("
Posibil disponibile
"); altceva $ (" # disponibilitate ")) html ("
Acest domeniu este luate.
"); / / populează Registrul la linkul $ (" # results-info "); arată (); returnează false; // nu se leagă la nimic din lista drop-down);

 #left float: left; lățime: 250px; padding-bottom: 10px; # results-info float: right; lățime: 510px; afișare: nici una; .register-stuff overflow: hidden; .right float: right; .extension float: right; font-size: 13px; margin-right: 70px; #load-more culoare: # 6C9DC9; font-size: 12px; line-height: 18px; abbr float: stânga; # results-info h4 margin-bottom: 9px; font-size: 16px; font-weight: bold; vertical-aliniere: partea de sus; margin-top: 0; # results-info .sections> li poziție: relativă; plutește la stânga; lățime: 140px; frontieră stângă: 1px solid # A9ADA8; padding-left: 9px; margin-right: 10px; # results-info .sections li ul li margine-stânga: 0; line-height: 20px; # results-info.sections li ul li font-size: 13px; afișare: inline; #footer overflow: hidden; font-size: 11px; culoare: # 666; înălțime: 20px; clar: ambele; marginea-dreapta: 15px; #footer p marja: 0; padding: 0; text-align: right; #footer p a culoare: # 666; #footer p a: hover culoare: # 333333;