Hur jag gjorde Domai.nr Chrome Extension

Att skriva en smidig Chrome Extension är ärligt inte så svår som du kanske tror. I den här handledningen kommer jag att gå igenom hur jag tog ett API som erbjuds av en stor domännamnssökningstjänst, Domai.nr, och skapade en Chrome-förlängning för dem, helt enkelt genom att använda deras API.

---

Steg 00: Vad ska vi skapa idag

I denna handledning går jag igenom hur jag skapade Domai.nr Chrome Extension, med enkel HTML, CSS och jQuery. Det typiska arbetsflödet för denna förlängning kan brytas ner som så:

1. Klicka på ikonen
2. Sök efter en domän
3. Hitta en som är tillgänglig och klicka på den
4. Köp det med hjälp av en av länkarna på förlängningen

Så det är inte revolutionerande eller banbrytande, men när du letar efter domäner ganska ofta (som jag är säker på att många av er), tjänar det faktiskt ett syfte. Jag ville ta tillfället i akt att inte bara visa dig hur jag gjorde den här specifika utvidgningen, utan också mer generellt hur man gör en förlängning för Chrome webbläsaren.

---

Steg 01: Vad finns i en Chrome Extension

Det finns några olika typer av kromförlängningar, men vi gör en uppdatering för webbläsare som visar en popup när den klickas. Google har en bra översikt över vad som finns i varje förlängning. I huvudsak är vad du behöver veta att varje tillägg är en katalog med filer, ungefär som en webbplats. Jag kommer att diskutera mer om var och en av dessa filer senare i handledningen, men varje tilläggs katalog innehåller följande filer, och det här tas direkt från Google:

• en manifest.json-filen
• En eller flera HTML-filer (om inte förlängningen är ett tema)
• Valfritt: En eller flera Javascript-filer
• Valfritt: Alla andra filer som du behöver, dvs bildfiler

Mer om JSON-filen

Manifestfilen ger mestadels meta-information om förlängningen. Här definierar du saker som namn, version, ikon och till och med behörigheter.

---

Steg 02: Ta en titt på Domai.nrs API

Domai.nrs API finns här. Vi använder JSON API, som har två metoder: Sök och Info. Det kallas JSON API eftersom det returnerar JSON. Båda metoderna svarar på en GET-förfrågan, så vi kan bara sammanfoga vad vi behöver i vår begäran URL, och resten kommer att falla på plats.

---

Steg 03: Gräva in i manifest.json Fil

Som du kan se är en Chrome-förlängning verkligen inte mycket mer än en grundläggande webbplats. Den struktur vi ska använda är som följer:

• domainr.html - detta motsvarar index.html sida på de flesta webbplatser. Jag föredrar att namnge den huvudsakliga HTML-filen på samma sätt som förlängningen själv - det är bara en personlig preferens.
• icon.png - detta 128px med 128px ikonen är vad användaren ser på verktygsfältet. När de klickar på den här ikonen kommer den att bränna vår förlängning.
• bilder/ - den här katalogen innehåller alla bilder vi ska använda, precis som en traditionell webbplats. Jag kontaktade skaparna av Domai.nr och fick tillstånd att använda alla bilderna på deras hemsida, bara nedskalade. Så jag använde bara Chrome's Web Inspector och hämtade kopior av dem, och skalade dem i enlighet med det.
• manifest.json - de manifest.json fil, som förklaras ovan, är där vi definierar många egenskaper om vår förlängning. Det krävs, men det är ganska enkelt att skapa.
• script.js - Denna JavaScript-fil är där alla våra jQuery hålls. Vi kommer att referera det i domainr.html fil, och det kommer att styra all logiken i vår förlängning.
• style.css - äntligen, här är vår stylesheet-fil. Vi kommer självklart också att hänvisa till detta i domainr.html fil.

Vår manifest.json-fil

Det är dags att gräva in i vår kod och komma igång! Vår manifest.json filen är ganska enkel. För att se en mer detaljerad sammanfattning av alla de fält som stöds i en manifestfil, kolla här. Du kan hitta all kod som används i vår manifest.json-fil nedan:

 "namn": "Domai.nr Search", // namnet på förlängningen "version": "1.0", // versionsnummer "description": "Ge dina domäner en lycklig avslutning.", // beskrivning som används i Chrome Webstore "browser_action": "default_icon": "icon.png", // anger standardikonet "popup": "domainr.html" // den sida som ska visas när ikonen klickas, "behörigheter": ["http://domai.nr", // vi ger förlängningsbehörigheten att komma åt data på dessa webbplatser. "http://domai.nr/*" // vi suffix den med en *, så / api är tillgänglig]

Som du kan berätta av kommentarerna är det ganska enkelt. Tillståndssektionen är oerhört viktigt i vårt fall. Annars kommer vi att få ett XHR-fel eftersom utökningen inte kan komma åt domäner som du inte tillåter det till. Därför betydelsen av "behörigheter" sektionen.

---

Steg 04: Komma igång

För vår förlängning kommer det i princip att vara tre delar:

• De
  element med en , vilket är var användaren skriver i den fråga de letar efter. Detta är vad detta steg i handledningen kommer att fokusera på.
• en
  med flera
  • element inuti det, som blir befolket baserat på deras förfrågan i del 1.
  • Information om det alternativ de väljer, baserat på de listposter som presenteras för dem i del 2.

  Så, jag tycker det är rättvist att säga att förlängningen blir komplex när användaren fortskrider genom de delar eller steg som beskrivs ovan. Med det sagt, låt oss gräva i HTML som jag brukade strukturera detta.

  Okej - det är så, så långt som att få inmatningen från användaren är orolig (ja, på HTML-sidan, åtminstone). För att vara lite mer beskrivande är den koden som användaren kommer att se när de klickar på ikonen för att utlösa tillägget. Det är bara en inmatningslåda som vi kommer att stila för att se ut som domai.nrs webbplats har den. Du märker att jag bara har en

  element - ingen metod eller åtgärd har definierats. Jag behövde inte använda dem, som jQuery s $ .getJson metod tar hand om det för oss. Det här skulle vara en bra tid att testa förlängningen, skulle det inte?

  Så här testar du lokala tillägg

  För att testa en förlängning i utveckling som finns på din lokala dator, följ helt enkelt dessa steg, så kommer du att vara igång med det på nolltid:

  1. Klick Fönster och välj Extensions.
  2. Till höger, uppe på sidan, ser du en länk som växlar Utvecklarläge. Klicka på det.
  3. Välj Ladda upppackad förlängning? , och navigera till katalogen som tillägget är i. Välj den katalogen, och det är allt!

  Du vill ändå hålla tilläggssidan uppe i en flik, eftersom varje gång du ändrar tillägget och vill testa det, måste du klicka på "Ladda om" på tilläggssidan för den specifika.

  Vi har installerat det lokalt, men låt oss vara ärliga - det ser ganska hemskt ut. Låt oss söta det så Domai.nr killar skulle vara stolta över att ha en förlängning så här. Du vill ladda ner bilderna som jag använder här och placera dem i en / bildkatalogen inuti din tilläggskatalog eftersom jag refererar till några av dem så småningom i CSS (och i HTML-koden ovan).

   kropp overflow-x: hidden; font: normal 14px / 18px helvetica, arial, sans-serif; färg: # 414240; .input-wrapper overflow: hidden; display: block; position: relativ; #query höjd: 19px; flyta till vänster; display: inline-block; gräns: 3px fast # A9ADA8; bredd: 220px; vaddering: 6px 12px 5px 12px; typsnitt: normal 14px / 18px helvetica, arial, sans-serif; färg: # 414240; text-rendering: optimizeLegibility; -webkit-typsnitt-utjämning: antialiased; gränsstråle: 18px;  #query: fokus outline: none; #loader width: 16px; höjd: 16px; position: absolut; höger: 18px; topp: 10px; synlighet: dold; #button display: none;

  

  Okej - vi har den första delen alla kodade upp och ser bra ut. I nästa avsnitt fokuserar vi på att ta användarens fråga och dra några data från Domai.nrs API.

  ---

  Steg 05: Visa användaren vissa domäner!

  I det här avsnittet tar vi vad användaren skrev i , och fråga det mot Domai.nrs API. Baserat på resultaten kommer vi att visa en lista över alla returnerade resultat samt en ikon som anger status för den domänen. Så, låt oss hoppa rätt in!

  Innan vi kommer in i några av jQuery bakom förlängningen tror jag att det skulle vara en bra tid att ta reda på hur man inspekterar en förlängning, precis som en vanlig webbplats. Istället för att högerklicka någonstans på sidan och välja "Inspektera element", kommer du helt enkelt högerklicka på förlängningen och välj "Inspektera popup". Det är allt som finns där!

  Det här avsnittet är lite mer interaktivt, så det är utgångspunkten för vår Javascript. Jag använder jQuery för enkelhetens skull.

   $ (dokument) .ready (funktion () $ ("# query"). fokus (); // fokuserar inmatningen när förlängningen utlöses var url = "http://domai.nr/api/json/search ? q = ", // basadress för sökfråga infoURL =" http://domai.nr/api/json/info?q= ", // basadress för begäran om infor- mation; // kommer att använda det senare $ ( val )! = "") // exekvera koden nedan om användaren skrev något i? $ ("body"). bredd (250); $ ("# loader"). css ("synlighet", "synlig"); $ ("# resultatlista li"). remove (); // tar bort tidigare resultat, om det finns några ? $ ("# sökfråga"). ta bort (); // mer på detta i några rader? $ (".förlängning a"). ta bort (); $ ("# results-info") ); // gömmer den större panelen om den visas? query = $ ("# query") .val (); //? koden nedan? 

  I chunken ovan gör vi ett antal saker:

  • Först fokuserar vi inmatningsrutan som standard
  • Därefter ställer vi några variabler (enligt Domai.nr API)
  • Då, på formuläret skickar, gör vi följande:
    • Kontrollera att frågan inte är tom
    • Om vi ​​antar det passerar vi sedan kroppsbredden och visar en AJAX-laddareikon
    • Vi rensar sedan den tidigare (om det finns en) lista över domäner och tar bort tidigare sökfråga från vyn
    • Slutligen tar vi bort några uppgifter som vi kommer att komma till mer nedan

  Så det är en bra start. En del av koden ovan kommer inte att ge mening eftersom det inte finns i vår HTML än. Det kommer att bli kort, bara gå med det för nu.

   //? koden ovan? $ .getJSON (url + fråga, null, funktion (json) $ ('
  '+ json.query +'
  ') .InsertBefore ( "# resultat"); $ .each (json.results, funktion (i, resultat) if (result.availability === "available") $ ("# resultatlista").
   '+ result.domain +''+ result.path +'
  '); annars om (result.availability === "maybe") $ ("# results-list"). append ('
   '+ result.domain +''+ result.path +'
  '); annars $ ("# results-list"). append ('
   '+ result.domain +''+ result.path +'
  '); ); // slut $ .each $ ("# loader"). css ("synlighet", "dold"); ); // slut $ .getJSON $ (this) .find ('# query'). fokus (); returnera false;  annars // kommer att beskriva dessa senare? $ (". förlängning a"). första (). ta bort (); $ (".registratorer ul li"). ta bort (); . $ ( "Kropp") bredd (250); ); // slutet av .submit //? och mer att komma i nästa avsnitt! );

  Det här avsnittet, medan bara några dussinlinjer, blir ganska litet:

  • Vi använder jQuery's getJSON-metod och använder den mot Domai.nrs API.
  • Inom den funktionen klarar vi helt enkelt över alla de resultat som den returnerar.
  • På varje resultat kontrollerar vi dess tillgänglighetsstatus och returnerar det korrekta
  • baserat på det villkorade.
  • När vi har gått igenom alla resultat döljer vi AJAX-lastaren.
  • Det där annat uttalandet där - det används när frågan är tom. Det återställer bara några saker som kanske inte är tomma, eller kanske måste återställas till deras standardstatus.

  Och vi är inte helt redo att prova det ännu. Du får se att i jQuery-koden ovan riktar vi in ​​ett listelement med ett ID-nummer resultatlistan Det finns ännu inte i DOM. Så, låt oss fortsätta och lägga till det strax efter element i domainr.html.

 ul display: block; tydligt: ​​båda; marginal: 0; vaddering: 0; ul li font-size: 15px; color: # 333333; display: block; bredd: 100%; line-height: 24 bildpunkter; margin-left: 10px; bredd: 100%; position: relativ; ul li .bg bredd: 15px; höjd: 15px; display: block; float: left; ul. available .bg background: url ("images / available.png") 0 7px no-repeat; bredd: 15px; höjd: 19px; display: block; flyta till vänster; margin-left: 10px; ul. nothing .bg width: 15px; höjd: 19px; display: block; flyta till vänster; margin-left: 10px; ul .maybe .bg background: url ("images / maybe.png") 0 7px no-repeat; bredd: 15px; höjd: 19px; display: block; flyta till vänster; marginal-vänster: 10px; ul li a färg: # 2870B0; text-dekoration: ingen; bredd: 100%; display: block; .loader-sub position: absolute; höger: 38px; top: 4px; ul li a: sväva bakgrund: url ("images / gray.png") no-repeat left top; markör: pekare; # resultat-info a: svep bakgrund: ingen; text-dekoration: understryka; markör: pekare; # resultat-info h3 margin-top: 11px; text-align: center; display: block; bredd: 340px; # resultat-info. tillgänglig färg: # 23B000! viktigt; textskugga: rgba (100%, 100%, 100%, 1,0) 0 1px 2px; fontstorlek: 24px; ul li a.active background: url ("images / blue.png") ingen upprepa vänster topp; färg: #ffffff;

 
 
 
 
 
 
Registrera på:
 
  
 
 
 
 TLD: 
 
  
Wikipedia
 
IANA
 
 
 
 
Verktyg:
 
  
Besök webbplatsen (www)
 
VEM ÄR
 
 
 
 
 
 
 
Drivs av Domai.nr.
 

 $ ("# results-list a"). live ('klick', funktion () // 'live' krävs, eftersom elementen fyller i DOM efter att användaren söker efter något, inte onLoad. $ (detta). css ("synlighet", "synlig"); // göm sekundärlastaren $ (".förlängning a"). första () .fjern (); // ta bort föregående tillägg (länk bredvid "TLD"). $ (".registratorer ul li"). ta bort (); // dölja föregångaren 
 element. $ .getJSON (infoURL + $ (detta) .find ('.domän') .text (), null, funktion (json) //? gör lite JSON magi igen. // $ .getJSON-linjen ovan söker efter attr ('href', (json.tld ['wikipedia_url']); // lägger till den rätta wikipedia-länken $ ("# iana"). attr ('href' (json.tld ['iana_url']); // lägger till den korrekta iana-länken $ ("whois a"). attr ('href', (json.whois_url)); // lägger till den korrekta whois-länken $ ".www a"). attr ('href', 'http: //' + (json.domain)); // lägger till den korrekta URL $ (". extension"). .split ('.') [1]) + '') .show (); // den här raden lägger till rätt domänutvidgning för att vara bredvid delen "TLD". $ ('.loader-sub') ("synlighet", "dold"); // göm den domänspecifika lastaren, eftersom all information har laddats. // och koden nedan går här? 

 // koden ovan? om (json.registrars.length < 1) // if there are no registrars available $(".registrars ul").append('
(inte tillgänglig)
'); $ ("# tillgänglighet h3") .text ('Ej tillgängligt. :('); // ledsen ansikte. else // det finns registrarer tillgängliga för (var i = 0; i <= 5; i++) // load the first five $(".registrars ul").append('
'+ json.registrars [i] .name +'
');  // Visa länken "Mer?" $ (".registratorer ul"). lägg till ("
Mer? 
"); // när användaren klickar på" mer "? $ (" # load-more "). klicka (funktion () $ (detta) .remove (); för (var i = 6; <= json.registrars.length - 1; i++) $(".registrars ul").append('
'+ json.registrars [i] .name +'
'); ); returnera false; ); . $ ( 'Kropp') bredd (800); // gör dropdownen större. $ ('# results-list a'). removeClass ('aktiv'); // ta bort syskonens möjlighet att vara .aktiv $ (detta) .addClass ('aktiv'); // ge det klickade objektet .active $ ("# results-info"). visa (); // visa de svala resultaten saker om ($ (detta) .parent (). hasClass ('available')) //? och vissa villkor, baserat på tillgänglighet $ ("# tillgänglighet"). html ("
Tillgängliga!
"); annars om ($ (detta) .parent (). hasClass (" kanske ")) $ (" # availability "). html
Eventuellt tillgänglig
"); else $ (" # availability "). html ("
Den här domänen är tagen.
"); // Fyll i registret vid länk $ (" # results-info "). visa (); returnera false; // länka inte till något i rullgardinsmenyn);

 #left float: left; bredd: 250px; padding-bottom: 10px; # resultat-info float: right; bredd: 510px; display: none; .register-stuff overflow: hidden; .right float: right;. extension float: right; font-size: 13px; marginal-höger: 70px; # load-more color: # 6C9DC9; font-size: 12px; linjehöjd: 18px; abbr float: left; # resultat-info h4 margin-bottom: 9px; typsnittstorlek: 16px; font-weight: bold; vertikaljustering: topp; margin-top: 0; # results-info .sections> li position: relative; flyta till vänster; bredd: 140px; gränsen till vänster: 1px fast # A9ADA8; padding-left: 9px; marginal-höger: 10px; # resultat-info .sections li ul li margin-left: 0; linjehöjd: 20px; # resultat-info .sections li ul li a font-size: 13px; display: inline; #footer overflow: hidden; typsnittstorlek: 11px; färg: # 666; höjd: 20px; tydligt: ​​båda; marginal-höger: 15px; #footer p marginal: 0; padding: 0; text-align: right; #footer p a color: # 666; #footer p a: svävar färg: # 333333;