Hoe ik de Domai.nr Chrome-extensie heb gemaakt

Een eerlijke Chrome-extensie eerlijk schrijven is niet zo moeilijk als je zou denken. In deze zelfstudie ga ik u laten zien hoe ik een API heb gebruikt die werd aangeboden door een geweldige zoekservice voor domeinnamen, Domai.nr, en een Chrome-extensie voor hen maakte, gewoon met behulp van hun API.

---

Stap 00: Wat we vandaag gaan creëren

In deze zelfstudie laat ik u zien hoe ik de Domai.nr Chrome-extensie heb gemaakt met behulp van eenvoudige HTML, CSS en jQuery. De typische workflow van deze extensie kan als volgt worden opgesplitst:

1. Klik op het pictogram
2. Zoek naar een domein
3. Zoek er een die beschikbaar is en klik erop
4. Koop het via een van de links op de extensie

Het is dus niet revolutionair of baanbrekend, maar als je tamelijk vaak naar domeinen op zoek bent (zoals velen van jullie waarschijnlijk wel zijn), heeft het wel degelijk een doel. Ik wilde van deze gelegenheid gebruik maken om u niet alleen te laten zien hoe ik deze specifieke extensie heb gemaakt, maar ook, meer in het algemeen, hoe u een extensie voor de Chrome-webbrowser kunt maken.

---

Stap 01: Wat zit er in een Chrome-extensie

Er zijn een paar verschillende soorten Chrome-extensies, maar we zullen een browserextensie maken die een pop-up laat zien wanneer erop wordt geklikt. Google heeft een goed overzicht van wat er in elke extensie staat. Kort gezegd, wat u moet weten, is dat elke extensie een map met bestanden is, net als een website. Ik zal later in de tutorial meer over elk van deze bestanden bespreken, maar de directory van elke extensie bevat de volgende bestanden en deze worden rechtstreeks van Google genomen:

• EEN manifest.json-bestand
• Een of meer HTML-bestanden (tenzij de extensie een thema is)
• Optioneel: een of meer Javascript-bestanden
• Optioneel: alle andere bestanden die uw extensie nodig heeft, d.w.z. afbeeldingsbestanden

Meer over het JSON-bestand

Het manifestbestand biedt meestal metagegevens over de extensie. Hier definieert u zaken als de naam, versie, pictogram en zelfs rechten.

---

Stap 02: Een kijkje nemen in de API van Domai.nr

Domai.nr's API is hier te vinden. We gebruiken de JSON-API, die twee methoden heeft: zoeken en info. Het wordt de JSON-API genoemd omdat het inderdaad JSON retourneert. Beide methoden reageren op een GET-verzoek, dus we kunnen gewoon alles samenvoegen wat we nodig hebben in onze verzoek-URL, en de rest valt op zijn plaats.

---

Stap 03: Graven in de manifest.json het dossier

Zoals u ziet, is een Chrome-extensie echt niet veel meer dan een standaardwebsite. De structuur die we zullen gebruiken is als volgt:

• domainr.html - dit is gelijk aan de index.html pagina in de meeste websites. Ik geef er de voorkeur aan het hoofd-HTML-bestand hetzelfde te noemen als de extensie zelf - dat is gewoon een persoonlijke voorkeur.
• icon.png - deze 128 px bij 128 px pictogram is wat de gebruiker ziet in de werkbalk. Wanneer ze op dit pictogram klikken, wordt onze extensie geactiveerd.
• afbeeldingen/ - deze map bevat alle afbeeldingen die we zullen gebruiken, net als een traditionele website. Ik nam contact op met de makers van Domai.nr en kreeg toestemming om alle afbeeldingen die ze hebben op hun website te gebruiken, alleen verkleind. Ik heb dus Chrome Web Inspector gebruikt en hiervan exemplaren gedownload en dienovereenkomstig geschaald.
• manifest.json - de manifest.json bestand, zoals hierboven uitgelegd, definiëren we veel eigenschappen over onze extensie. Het is verplicht, maar het is vrij eenvoudig om te maken.
• script.js - dit JavaScript-bestand is waar al onze jQuery wordt gehouden. We zullen ernaar verwijzen in de domainr.html bestand en bestuurt alle logica in onze extensie.
• style.css - eindelijk, hier is ons stylesheetbestand. We zullen dit natuurlijk ook in de domainr.html het dossier.

Ons manifest.json-bestand

Tijd om in onze code te graven en aan de slag te gaan! Onze manifest.json bestand is vrij eenvoudig. Zie dit voor een gedetailleerder overzicht van alle velden die worden ondersteund in een manifestbestand. U kunt alle code vinden die wordt gebruikt in ons manifest.json-bestand hieronder:

 "name": "Domai.nr Search", // de naam van de extensie "version": "1.0", // versienummer "description": "Geef uw domeinen een happy end.", // description used in de Chrome Webstore "browser_action": "default_icon": "icon.png", // geeft het standaardpictogram "popup": "domainr.html" // de pagina die moet worden weergegeven wanneer op het pictogram wordt geklikt, "permissies": ["http://domai.nr", // we geven de extensie toestemming om toegang te krijgen tot gegevens op deze sites. "http://domai.nr/*" // we voegen het toe met een *, dus / api is toegankelijk]

Zoals je aan de reacties kunt zien, is het redelijk eenvoudig. Het toestemmingsgedeelte is in ons geval uitermate belangrijk. Anders krijgen we een XHR-fout omdat de extensie geen toegang heeft tot domeinen waarvoor u geen toestemming hebt gegeven. Vandaar het belang van de sectie "permissies".

---

Stap 04: Aan de slag

Voor onze uitbreiding zullen er in principe drie delen zijn:

• De
  element, met een , Dit is waar de gebruiker de zoekopdracht invoert waarnaar ze op zoek zijn. Dit is waar deze stap van de tutorial zich op zal richten.
• EEN
  met meerdere
  • elementen erin, die wordt bevolkt op basis van hun verzoek in deel 1.
  • Informatie over de optie die zij selecteren, op basis van de lijstitems die ze in deel 2 hebben gepresenteerd.

  Dus, ik denk dat het redelijk is om te zeggen dat de extensie complexer wordt naarmate de gebruiker verder gaat in die delen of stadia die hierboven zijn beschreven. Met dat gezegd zijnde, laten we ingaan op de HTML die ik gebruikte om dit te structureren.

  Oke, dat is het, voor zover het de invoer van de gebruiker betreft (nou ja, aan de HTML-zijde, tenminste). Om een ​​beetje meer beschrijvend te zijn, is die code wat de gebruiker te zien krijgt wanneer ze op het pictogram klikken om de extensie te activeren. Het is gewoon een invoervak ​​dat we zullen stylen om er uit te zien als de site van domai.nr. Je zult merken dat ik alleen een

  element - er is geen methode of actie gedefinieerd. Ik hoefde die niet te gebruiken, zoals jQuery's $ .getJSON methode zorgt voor dat voor ons. Dit zou een goed moment zijn om de extensie uit te proberen, toch??

  Lokale extensies testen

  Als u een extensie in de ontwikkeling op uw lokale computer wilt testen, voert u eenvoudigweg deze stappen uit en bent u er binnen de kortste tijd mee aan de slag:

  1. Klik Venster en selecteer uitbreidingen.
  2. Aan de rechterkant, bovenaan de pagina, ziet u een link waarmee u de Ontwikkelaarsmodus. Klik dat.
  3. kiezen Laad onverpakte extensie? , en navigeer naar de map waarin de extensie zich bevindt. Selecteer die map en dat is alles!

  U wilt de extensiespagina echter op een tabblad houden, want elke keer dat u een wijziging aanbrengt in de extensie en deze wilt testen, klikt u op 'Opnieuw laden' op de extensiespagina voor die specifieke pagina..

  We hebben het lokaal geïnstalleerd, maar laten we eerlijk zijn - het ziet er nogal afschuwelijk uit. Laten we het op orde maken, dus de Domai.nr jongens zouden trots zijn om een ​​extensie als deze te hebben. Je zult de afbeeldingen die ik hier gebruik willen downloaden en ze in een / images-directory in je extensiemap plaatsen, omdat ik er later in de CSS (en ook in de bovenstaande HTML) naar verwijs..

   body overflow-x: hidden; font: normal 14px / 18px helvetica, arial, sans-serif; kleur: # 414240; .input-wrapper overflow: verborgen; weergave: blok; positie: relatief; #query height: 19px; float: left; weergave: inline-block; rand: 3px vast # A9ADA8; width: 220px; opvulling: 6px 12px 5px 12px; lettertype: normaal 14px / 18px helvetica, arial, sans-serif; kleur: # 414240; tekstweergave: optimaliseerbaarheid; -webkit-font-smoothing: antialiased; grensradius: 18px;  #query: focus outline: none; #loader width: 16px; hoogte: 16px; positie: absoluut; rechts: 18px; top: 10px; zichtbaarheid: verborgen; #knop display: none;

  

  Oké, we hebben het eerste deel volledig gecodeerd en zien er goed uit. In het volgende gedeelte zullen we ons richten op het nemen van de zoekopdracht van de gebruiker en het ophalen van gegevens uit de API van Domai.nr.

  ---

  Stap 05: Toon de gebruiker enkele domeinen!

  In dit gedeelte nemen we wat de gebruiker heeft getypt in de , en vraag het aan tegen de API van Domai.nr. Op basis van die resultaten geven we een lijst met alle geretourneerde resultaten weer, evenals een pictogram dat de status van dat domein aangeeft. Dus, laten we er meteen in springen!

  Voordat we ingaan op een aantal van de jQuery achter de extensie, denk ik dat dit een goed moment zou zijn om naar voren te brengen hoe je een extensie kunt inspecteren, net als bij een gewone website. In plaats van met de rechtermuisknop ergens op de pagina te klikken en "Inspect Element" te selecteren, zult u eenvoudigweg klik met de rechtermuisknop op de extensie en selecteer "Inspect popup". Dat is alles wat er is!

  Deze sectie is een beetje meer interactief, dus het is het startpunt voor onze Javascript. Ik zal jQuery omwille van de eenvoud gebruiken.

   $ (document) .ready (function () $ ("# query"). focus (); // stelt de invoer scherp wanneer de extensie wordt geactiveerd var url = "http://domai.nr/api/json/search ? q = ", // basis-URL voor zoekvraag infoURL =" http://domai.nr/api/json/info?q= ", // basis-URL voor info-aanvraagquery; // zal dit later $ (gebruiken "vorm"). submit (function () if ($ ("# query"). val ()! = "") // voer de onderstaande code uit als de gebruiker iets heeft getypt in? $ ("body"). width (250); $ ("# loader"). css ("visibility", "visible"); $ ("# results-list li"). remove (); // verwijdert eerdere resultaten, indien er enige zijn ? $ ("# search-query"). remove (); // meer hierover in enkele regels? $ (". extension a"). remove (); $ ("# results-info"). hide ( ); // verbergt het grotere paneel als het wordt getoond? query = $ ("# query"). val (); //? code hieronder? 

  In het gedeelte hierboven doen we een aantal dingen:

  • Eerst richten we het invoervak ​​standaard in
  • Vervolgens stellen we enkele variabelen in (volgens de Domai.nr API)
  • Vervolgens, op het formulier indienen, doen we het volgende:
    • Controleer of de query niet leeg is
    • Ervan uitgaande dat dit slaagt, stellen we vervolgens de bodembreedte in en tonen we een AJAX loaderpictogram
    • Vervolgens verwijderen we de vorige (als er een is) lijst met domeinen en verwijderen we de vorige zoekopdracht uit de weergave
    • Ten slotte verwijderen we enkele informatie waarvan we hieronder meer zullen zien

  Dus het is een goed begin. Sommige van de bovenstaande code is niet logisch, omdat deze nog niet in onze HTML staat. Binnenkort, ga er gewoon mee door.

   //? code hierboven? $ .getJSON (url + query, null, function (json) $ ('
  '+ json.query +'
  ') .InsertBefore ( "# resultaten"); $ .each (json.results, function (i, result) if (result.availability === "available") $ ("# results-list"). append ('
   '+ result.domain +''+ result.path +'
  '); else if (result.availability === "maybe") $ ("# results-list"). append ('
   '+ result.domain +''+ result.path +'
  '); else $ ("# resultatenlijst"). toevoegen ('
   '+ result.domain +''+ result.path +'
  '); ); // eind $ .each $ ("# loader"). css ('visibility', 'hidden'); ); // eind $ .getJSON $ (this) .find ('# query'). focus (); return false;  else // zullen deze later beschrijven? $ (".extensie a"). first (). remove (); $ (". registrars ul li"). remove (); . $ ( "Body") breedte (250); ); // end of .submit //? en meer om in de volgende sectie te komen! );

  Dat gedeelte hierboven, terwijl het maar een paar dozijn regels is, wordt nogal een beetje gedaan:

  • We gebruiken de getJSON-methode van jQuery en gebruiken deze tegen de API van de Domai.nr.
  • Binnen deze functie herhalen we eenvoudigweg alle resultaten die worden geretourneerd.
  • Op elk resultaat controleren we de beschikbaarheidsstatus en retourneren we het correcte resultaat
  • op basis van dat voorwaardelijke.
  • Zodra we alle resultaten hebben doorlopen, verbergen we de AJAX-lader.
  • Die andere verklaring daarbinnen - die wordt gebruikt als de query leeg is. Het herstelt gewoon een paar dingen die misschien niet leeg zijn, of die misschien teruggezet moeten worden naar hun standaard status.

  En we zijn nog niet helemaal klaar om het te testen. U ziet dat we in de bovenstaande jQuery-code een lijstelement targeten met een ID van resultaten-lijst dat is nog niet in de DOM. Dus laten we doorgaan en toevoegen dat net na de element in domainr.html.

 ul weergave: blok; beiden opschonen; margin: 0; opvulling: 0; ul li font-size: 15px; color: # 333333; weergave: blok; Breedte: 100%; line-height: 24px; margin-left: 10px; Breedte: 100%; positie: relative; ul li .bg width: 15px; hoogte: 15px; weergave: blok; float: left; ul .available .bg background: url ("images / available.png") 0 7px no-repeat; breedte: 15px; hoogte: 19px; weergave: blok; float: left; margin-left: 10px; ul .nothing .bg width: 15px; hoogte: 19px; weergave: blok; float: left; margin-left: 10px; ul .maybe .bg background: url ("images / maybe.png") 0 7px no-repeat; breedte: 15px; hoogte: 19px; weergave: blok; zweven: links; margin-left: 10px; ul li a color: # 2870B0; tekstdecoratie: geen; Breedte: 100%; weergave: block; .loader-sub position: absolute; rechts: 38px; top: 4px; ul li a: hover background: url ("images / grey.png") no-repeat links bovenaan; cursor: pointer; # resultaten-info a: hover background: none; tekstdecoratie: onderstrepen; cursor: pointer; # resultaten-info h3 margin-top: 11px; text-align: center; weergave: blok; 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 links bovenaan; color: #ffffff;

 
 
 
 
 
 
Aanmelden bij:
 
  
 
 
 
 TLD: 
 
  
Wikipedia
 
IANA
 
 
 
 
Hulpmiddelen:
 
  
Bezoek site (www)
 
WIE IS
 
 
 
 
 
 
 
Mogelijk gemaakt door Domai.nr.
 

 $ ("# resultatenlijst a"). live ('klik', functie () // 'live' is vereist, omdat de elementen de DOM vullen nadat de gebruiker naar iets zoekt, niet onLoad. $ (this). broers en zussen ('. loader-sub'). css ('visibility', 'visible'); // verberg de secundaire loader $ (". extension a"). first (). remove (); // verwijder de vorige extensie (link naast 'TLD'). $ (". registrars ul li"). remove (); // verberg de vorige egistrar's 
 elementen. $ .getJSON (infoURL + $ (this) .find ('. domain'). text (), null, function (json) //? doe weer wat JSON magic. // de $ .getJSON-regel hierboven zoekt naar de momenteel geselecteerd domein $ ("# wikipedia"). attr ('href', (json.tld ['wikipedia_url']); // voegt de juiste wikipedia link $ ("# iana") toe. attr ('href', (json.tld ['iana_url'])); // voegt de juiste iana link $ toe (". whois a"). attr ('href', (json.whois_url)); // voegt de juiste whois link $ toe ( ".www a"). attr ('href', 'http: //' + (json.domain)); // voegt de juiste URL $ (". extension"). append toe ('' + (json.domain .split ('.') [1]) + '') .show (); // deze regel voegt de juiste domeinextensie toe om naast het "TLD" -gedeelte te zijn. $ ('. loader-sub'). css ('visibility', 'hidden'); // verberg de domeinspecifieke loader, omdat alle informatie is geladen. // en de onderstaande code komt hier? 

 // de code hierboven? if (json.registrars.length < 1) // if there are no registrars available $(".registrars ul").append('
(niet beschikbaar)
'); $ ("# availability h3"). text ('Not Available. :('); // sad face. else // er zijn registrars beschikbaar voor (var i = 0; i <= 5; i++) // load the first five $(".registrars ul").append('
'+ json.registrars [i] .name +'
');  // toon de link "Meer?" $ (". registrars ul"). append ("
Meer? 
"); // wanneer de gebruiker op" more "klikt? $ (" # load-more "). click (function () $ (this) .remove (); for (var i = 6; i <= json.registrars.length - 1; i++) $(".registrars ul").append('
'+ json.registrars [i] .name +'
'); ); return false; ); . $ ( 'Body') breedte (800); // maak de vervolgkeuzelijst groter. $ ('# resultaten-lijst a'). removeClass ('active'); // verwijder de mogelijkheid van de broers of zussen om .active $ (this) .addClass ('active') te zijn; // geef het aangeklikte item .active $ ("# results-info"). show (); / / toon de coole resultaten stuff if ($ (this) .parent (). hasClass ('available')) //? en enkele conditionals, op basis van beschikbaarheid $ ("# availability"). html ("
Beschikbaar!
"); else if ($ (this) .parent (). hasClass ('maybe')) $ (" # availability "). html ("
Mogelijk beschikbaar
"); else $ (" # availability "). html ("
Dit domein is ingenomen.
"); // vul het register in bij link $ (" # resultaten-info "). show (); return false; // niet linken naar iets in de vervolgkeuzelijst);

 #left float: left; Breedte: 250 pixels; padding-bottom: 10px; # results-info float: right; width: 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; # resultaten-info h4 margin-bottom: 9px; lettergrootte: 16px; lettertype: vet; vertical-align: top; margin-top: 0; # resultaten-info .secties> li positie: relatief; zweven: links; breedte: 140 px; border-left: 1px solid # A9ADA8; padding-links: 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; weergeven: inline; #footer overflow: hidden; font-size: 11px; kleur: # 666; hoogte: 20px; beiden opschonen; margin-right: 15px; #footer p margin: 0; padding: 0; text-align: right; #footer p a color: # 666; #footer p a: hover color: # 333333;