Hvordan gjorde jeg Domai.nr Chrome Extension

Å skrive en kjekk Chrome Extension er ærlig ikke så vanskelig som du kanskje tror. I denne opplæringen skal jeg gå gjennom hvordan jeg tok en API som tilbys av et flott domenenavnssøk, Domai.nr, og opprettet en Chrome-utvidelse for dem, bare ved hjelp av API.


Trinn 00: Hva skal vi skape i dag

I denne veiledningen vil jeg gå gjennom hvordan jeg laget Domai.nr Chrome Extension, ved hjelp av enkel HTML, CSS og jQuery. Den typiske arbeidsflyten i denne utvidelsen kan brytes ned slik:

  1. Klikk på ikonet
  2. Søk etter et domene
  3. Finn en som er tilgjengelig, og klikk den
  4. Kjøp det ved hjelp av en av koblingene på utvidelsen

Så det er ikke revolusjonerende eller banebrytende, men når du leter etter domener ganske ofte (som jeg er sikker på at mange av dere er), tjener det faktisk et formål. Jeg ville benytte anledningen til ikke bare å vise deg hvordan jeg laget denne spesifikke utvidelsen, men også, generelt sett, hvordan du lager en utvidelse for Chrome-nettleseren.


Trinn 01: Hva er i en Chrome Extension

Det finnes noen forskjellige typer kromutvidelser, men vi vil lage en nettleserhandlingsutvidelse som viser en popup når den klikkes. Google har en flott oversikt over hva som er i hver utvidelse. I hovedsak er det du trenger å vite at hver utvidelse er en katalog med filer, som et nettsted. Jeg diskuterer mer om hver av disse filene senere i opplæringen, men hver utvidelses katalog inneholder følgende filer, og dette hentes direkte fra Google:

  • EN manifest.json-fil
  • En eller fler HTML-filer (med mindre utvidelsen er et tema)
  • Valgfritt: En eller flere Javascript-filer
  • Valgfritt: Eventuelle andre filer du trenger, det vil si bildefiler

Mer på JSON-filen

Manifestfilen gir for det meste meta-informasjon om utvidelsen. Her definerer du ting som navn, versjon, ikon og til og med tillatelser.


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

Domai.nrs API finner du her. Vi bruker JSON API, som har to metoder: Søk og Info. Det kalles JSON API fordi det returnerer JSON. Begge metodene svarer på en GET-forespørsel, så vi kan bare sammenkalle det vi trenger i vår forespørselsadresse, og resten vil falle på plass.


Trinn 03: Graver inn i manifest.json Fil

Som du ser, er en Chrome-utvidelse egentlig ikke mye mer enn et grunnleggende nettsted. Strukturen vi skal bruke er som følger:

  • domainr.html - dette tilsvarer index.html side på de fleste nettsteder. Jeg foretrekker å gi den viktigste HTML-filen det samme som selve utvidelsen - det er bare en personlig preferanse.
  • icon.png - dette 128px ved 128px ikonet er hva brukeren ser på verktøylinjen. Når de klikker på dette ikonet, vil det brann utvidelsen vår.
  • Bilder/ - Denne katalogen inneholder alle bildene vi skal bruke, akkurat som et tradisjonelt nettsted. Jeg kontaktet skaperne av Domai.nr og fikk tillatelse til å bruke alle bildene de har på deres nettside, bare nedskalert. Så jeg brukte nettopp Chrome's Web Inspector og lastet ned kopier av dem, og skalerte dem tilsvarende.
  • manifest.json - de manifest.json fil, som forklart ovenfor, er hvor vi definerer mange egenskaper om utvidelsen vår. Det er påkrevd, men det er ganske enkelt å lage.
  • script.js - Denne JavaScript-filen er der alle våre jQuery holdes. Vi vil referere det i domainr.html fil, og det vil kontrollere all logikken i utvidelsen vår.
  • style.css - Til slutt, her er vår stilarkfil. Vi vil åpenbart også referere til dette i domainr.html fil.

Vår manifest.json-fil

Tid til å grave inn i vår kode og komme i gang! Våre manifest.json filen er ganske enkel. For å se en mer detaljert oppsummering av alle feltene som støttes i en manifestfil, sjekk dette ut. Du kan finne all koden som brukes i vår manifest.json-fil nedenfor:

 "navn": "Domai.nr Søk", // navnet på utvidelsen "versjon": "1.0", // versionsnummer "beskrivelse": "Gi domenene en god slutt.", // beskrivelse brukt i Chrome Webstore "browser_action": "default_icon": "icon.png", // angir standardikonet "popup": "domainr.html" // siden som skal vises når ikonet klikkes, "tillatelser": ["http://domai.nr", // vi gir tillatelsen tillatelse til å få tilgang til data på disse nettstedene. "http://domai.nr/*" // vi suffiks det med en *, så / api er tilgjengelig]

Som du kan fortelle av kommentarene, er det ganske grei. Tillatelsesdelen er ekstremt viktig i vårt tilfelle. Ellers får vi en XHR-feil fordi utvidelsen ikke har tilgang til domener du ikke gir tillatelse til. Derfor er betydningen av "tillatelser" -delen.


Trinn 04: Komme i gang

For utvidelsen vil det i utgangspunktet være tre deler:

  • De
    element, med en , som er der brukeren skriver i spørringen de leter etter. Dette er hva dette trinnet i opplæringen vil fokusere på.
  • EN
      med flere
    • elementer inne i det, som blir befolket basert på deres forespørsel i del 1.
    • Informasjon om alternativet de velger, basert på listepostene presentert for dem i del 2.

    Så, jeg synes det er rimelig å si at utvidelsen gir kompleksitet når brukeren utvikler seg gjennom de delene eller trinnene som er beskrevet ovenfor. Med det sagt, la oss grave inn i HTML-en som jeg pleide å strukturere dette.

         Domai.nr Chrome Extension    

    OK, det er det, så langt som å få innspill fra brukeren, er det bekymret (vel, på HTML-siden, minst). For å være litt mer beskrivende, er koden det brukeren vil se når de klikker på ikonet for å utløse utvidelsen. Det er bare en innspillingsboks som vi skal stile for å se ut som domai.nrs nettsted har det. Du vil legge merke til at jeg bare har en

    element - ingen metode eller handling er definert. Jeg trengte ikke å bruke dem, som jQuery's $ .getJson Metoden tar vare på det for oss. Dette ville være en flott tid å teste ut forlengelsen, ville det ikke?

    Slik tester du lokale utvidelser

    For å teste en utvidelse i utviklingen som er på din lokale maskin, følg bare disse trinnene, og så blir du oppe med det på kort tid:

    1. Klikk Vindu og velg utvidelser.
    2. Til høyre, mot toppen av siden, ser du en lenke som bytter til Utviklermodus. Klikk det.
    3. Å velge Legg utpakket forlengelse? , og naviger til katalogen som utvidelsen er i. Velg den katalogen, og det er alt!

    Du vil imidlertid beholde utvidelsessiden opp i en kategori, fordi hver gang du endrer utvidelsen og ønsker å teste den, må du klikke på "Oppdater" på utvidelsessiden for den aktuelle.

    Vi har installert det lokalt, men la oss være ærlige - det ser ganske skjult ut. La oss ganske bra, så Domai.nr-gutta ville være stolte av å ha en forlengelse som dette. Du vil laste ned bildene jeg bruker her, og plassere dem i en / bilder-mappe inne i utvidelsesmappen din, fordi jeg refererer til noen av dem til slutt i CSS (og i HTML-koden ovenfor).

     kropp overflow-x: hidden; font: normal 14px / 18px helvetica, arial, sans-serif; farge: # 414240; .input-wrapper overflow: hidden; skjerm: blokk; posisjon: relativ; #query høyde: 19px; float: venstre; display: inline-block; grense: 3px solid # A9ADA8; bredde: 220px; polstring: 6px 12px 5px 12px; font: normal 14px / 18px helvetica, arial, sans-serif; farge: # 414240; tekstgjenvinning: optimizeLegibility; -webkit-font-utjevning: antialiased; border-radius: 18px;  #query: fokus disposisjon: none; #loader width: 16px; høyde: 16px; posisjon: absolutt; høyre: 18px; topp: 10px; synlighet: skjult; #button display: none;

    Okay - vi har den første delen alle kodet opp og ser bra ut. I neste avsnitt fokuserer vi på å ta brukerens spørring og trekke noen data fra Domai.nrs API.


    Trinn 05: Vis brukeren noen domener!

    I denne delen tar vi hva brukeren skrev inn i , og spør det mot Domai.nrs API. Basert på disse resultatene, viser vi en liste over alle de returnerte resultatene, samt et ikon som angir status for det domenet. Så, la oss hoppe rett inn!

    Før vi kommer inn i noen av jQuery bak utvidelsen, tror jeg det ville være en god tid å få opp hvordan du inspiserer en utvidelse, akkurat som en vanlig nettside. I stedet for å høyreklikke et sted på siden og velge "Inspiser element", vil du ganske enkelt høyreklikk på utvidelsen, og velg "Inspiser popup". Det er alt der er til det!

    Denne delen er litt mer interaktiv, så det er utgangspunktet for Javascript. Jeg bruker jQuery for enkelhets skyld.

     $ (dokument) .ready (funksjon () $ ("# spørring") .fokus (); // fokuserer inngangen når utvidelsen utløses var url = "http://domai.nr/api/json/search ? q = ", // base URL for søknadsforespørsel infoURL =" http://domai.nr/api/json/info?q= ", // base URL for forespørsel om forespørsel; // vil bruke dette senere $ ( form  if $ ("# query"). val ()! = "") // kjør koden under hvis brukeren skrev noe i? $ ("kropp"). bredde (250); $ ("# loader"). css ("synlighet", "synlig"); $ ("# resultater-liste li"). fjern (); // fjerner eventuelle tidligere resultater, hvis det er noen ? $ ("# søk-spørring"). fjern (); // mer på dette i noen få linjer? $ (". forlengelse a"). fjern (); $ ("# resultater-info"). ); // skjuler det større panelet hvis det vises? query = $ ("# query") .val (); //? kode nedenfor? 

    I klumpen over, gjør vi en rekke ting:

    • Først fokuserer vi innboksen som standard
    • Deretter angir vi noen variabler (ifølge Domai.nr API)
    • Deretter gjør vi på skjemaet følgende:
      • Kontroller at søket ikke er tomt
      • Forutsatt at det går, setter vi deretter inn kroppsbredden, og viser et AJAX-loader-ikon
      • Vi fjerner deretter forrige (hvis det er en) liste over domener, og fjerner forrige søk fra visningen
      • Til slutt fjerner vi litt informasjon som vi kommer til å komme nærmere nedenfor

    Så det er en god start. Noen av koden ovenfor gir ikke mening fordi det ikke er i vår HTML ennå. Det kommer snart, bare gå med det for nå.

     //? kode ovenfor? $ .getJSON (url + spørring, null, funksjon (json) $ ('

    '+ json.query +'

    ') .InsertBefore ( "# resultater"); $ .each (json.results, funksjon (jeg, resultat) if (result.availability === "available") $ ("# resultater-liste").
  • '+ result.domain +''+ result.path +'
  • '); ellers hvis (result.availability === "maybe") $ ("# results-list"). append ('
  • '+ result.domain +''+ result.path +'
  • '); ellers $ ("# results-list"). append ('
  • '+ result.domain +''+ result.path +'
  • '); ); // slutt $ .each $ ("# loader"). css ('synlighet', 'skjult'); ); // slutt $ .getJSON $ (dette) .find ('# query'). fokus (); returner falsk; annet // vil beskrive disse senere? $ (". forlengelse a"). første (). fjern (); $ (".registratorer ul li"). fjern (); . $ ( "Body") bredde (250); ); // slutten av .submit //? og mer til å komme i neste avsnitt! );

    Den delen over, mens bare noen få dusin linjer, blir ganske ferdig:

    • Vi benytter jQuery's getJSON-metode, og bruker den mot Domai.nrs API.
    • Innenfor den funksjonen gjenkjenner vi bare over alle resultatene den returnerer.
    • På hvert resultat sjekker vi tilgjengelighetsstatusen og returnerer det riktige
    • basert på det betingede.
    • Når vi har gått gjennom alle resultatene, skjuler vi AJAX-lasteren.
    • Det andre erklæringen der inne - det brukes når spørringen er tom. Den tilbakestiller bare noen få ting som kanskje ikke er tomme, eller må kanskje tilbakestilles til standardstandarden.

    Og vi er ikke helt klar til å teste det enda. Du vil se at i jQuery-koden ovenfor, målretter vi mot et listeelement med et ID-nummer Resultatene-liste Det er ennå ikke i DOM. Så, la oss gå videre og legge til det like etter element i domainr.html.

      

Og nå er det på tide å teste. Ikke få håpene dine skjønt, fordi det kommer til å se ganske stygg ut?

Forutsatt at alt er bra, bør du nå se en liste over alle domener relatert til et spørsmål brukeren skriver inn (som ovenfor). Selv om det faktisk er ganske styggt utseende, har vi vår utvidelse nå riktig hekta inn i Domai.nr APIs søkemetode, og tilbakestiller resultatene riktig. Gratulerer!

Før vi går videre til den endelige delen av opplæringen, har vi imidlertid noe å gjøre. Vi må vise ikonet som viser om domenet er tilgjengelig, kanskje tilgjengelig eller tatt, og også bare rydde utseendet til listen. Noen enkle CSS vil ta vare på det uten problem.

 ul display: block; klar: begge; margin: 0; polstring: 0; ul li font-size: 15px; color: # 333333; skjerm: blokk; bredde: 100%; linje-høyde: 24 piksler; margin-left: 10px; bredde: 100%; posisjon: relativ; ul li .bg bredde: 15px; høyde: 15px; skjerm: blokk; flyte: venstre; ul. tilgjengelig .bg bakgrunn: url ("images / available.png") 0 7px no-repeat; bredde: 15px; høyde: 19px; skjerm: blokk; float: venstre; margin-left: 10px; ul. nothing .bg width: 15px; høyde: 19px; skjerm: blokk; float: venstre; margin-left: 10px; ul .maybe .bg bakgrunn: url ("images / maybe.png") 0 7px no-repeat; bredde: 15px; høyde: 19px; skjerm: blokk; flyte: venstre; margin-left: 10px; ul li a color: # 2870B0; tekst-dekorasjon: ingen; bredde: 100%; display: blokk; .loader-sub posisjon: absolutt; høyre: 38px; topp: 4px; ul li a: svever bakgrunn: url ("images / gray.png") no-repeat venstre topp; markør: peker; # resultater-info a: svever bakgrunn: ingen; tekst-dekorasjon: understreke; markør: pointer; # results-info h3 margin-top: 11px; tekst-align: center; skjerm: blokk; bredde: 340px; # resultater-info. tilgjengelig farge: # 23B000! viktig; tekstskygge: rgba (100%, 100%, 100%, 1,0) 0 1px 2px; fontstørrelse: 24px; ul li a.active bakgrunn: url ("images / blue.png") ikke gjenta venstre topp; farge: #ffffff;

Flott - nå ser det ut alt fint og rent - akkurat som det ekte Domai.nr-nettstedet! Til slutt er det på tide å komme seg til de gode greiene.


Trinn 06: De har valgt et domene

Denne siste delen endrer utvidelsens brukergrensesnitt mest, men hvis vi bryter det ned i trinn, er det egentlig ikke så ille i det hele tatt.

Ok, la oss tenke dette gjennom. Først når brukeren klikker på et dokument, vil vi at popupen skal bli bredere, og vise informasjon om det bestemte domenet. Ikke noe problem i det hele tatt. Vi må imidlertid legge til litt mer struktur til koden vår for å få det akkurat.

 

  • Registrer deg på:

  • TLD:

    • Wikipedia
    • IANA
  • Verktøy:

    • Besøk nettsted (www)
    • HVEM ER

Drevet av Domai.nr.

Så, kommentarene skal være forklarende nok for den HTML-strukturen, men vi vil ikke legge merke til mye før vi gir utvidelsen noe mer interaktivitet. Nå som vi har strukturen nede, la oss gå videre og gjøre det ved å legge til noe jQuery.

 $ ("# results-list a"). Live ('klikk', funksjon () // 'live' kreves, fordi elementene fyller DOM etter at brukeren har søkt etter noe, ikke påLad. $ (dette). css ('synlighet', 'synlig'); // skjul sekundærlasteren $ (". forlengelse a"). første (). fjern (); // fjerne forrige utvidelse (link ved siden av "TLD"). $ (".registratorer ul li"). fjern (); // skjul den tidligere egistørens 
  • elementer. $ .getJSON (infoURL + $ (dette) .find ('.domain'). tekst (), null, funksjon (json) //? gjør noe JSON magi igjen. // $ .getJSON linjen over søker etter forr ("# wikipedia"). Attr ('href', (json.tld ['wikipedia_url']); // legger til den riktige wikipedia-lenken $ ("# iana"). Attr ('href' (json.tld ['iana_url']); // legger til rette iana-lenken $ ("whois a"). attr ('href', (json.whois_url)); // legger til den korrekte whois-lenken $ ".www a"). attr ('href', 'http: //' + (json.domain)); // legger til riktig URL $ (". extension"). .split ('.') [1]) + '') .show (); // denne linjen legger til riktig domeneutvidelse for å være ved siden av "TLD" -delen. $ ('.loader-sub'). ('synlighet', 'skjult'); // skjul den domenespesifikke lasteren, fordi all informasjonen er lastet inn. // og koden nedenfor går her?
  • Den koden ovenfor lastet inn all informasjon vi trenger for Wikipedia-URL, IANA-URL, Whois-informasjon, nettstedslink og utvidelsesinformasjon. Nedenfor vil vi se på hvordan jeg blant annet lagde inn registrarinformasjonen!

     // koden ovenfor? hvis (json.registrars.length < 1) // if there are no registrars available $(".registrars ul").append('
  • (ikke tilgjengelig)
  • '); $ ("# tilgjengelighet h3"). tekst ('Ikke tilgjengelig. :('); // trist ansikt. annet // det er registrarer tilgjengelig for (var i = 0; i <= 5; i++) // load the first five $(".registrars ul").append('
  • '+ json.registrars [i] .name +'
  • '); // vis linken "Mer?" $ (".registratorer ul"). legg til ("
  • Mer?
  • "); // når brukeren klikker på" mer "? $ (" # load-more "). klikk (funksjon () $ (dette) .remove (); for (var i = 6; <= json.registrars.length - 1; i++) $(".registrars ul").append('
  • '+ json.registrars [i] .name +'
  • '); ); returner falsk; ); . $ ( 'Body') bredde (800); // gjør dropdownen større. $ ('# results-list a'). removeClass ('aktiv'); // fjern søskenes mulighet til å være .aktiv $ (dette) .addClass ('aktiv'); // gi det klikket elementet .active $ ("# results-info"). show (); // vis de kule resultatene hvis ($ (dette) .parent (). hasClass ('tilgjengelig')) //? og noen betingelser, basert på tilgjengelighet $ ("# tilgjengelighet"). html ("

    Tilgjengelig!

    "); annet hvis ($ (dette) .parent (). hasClass ('kanskje')) $ (" # tilgjengelighet "). html

    Muligens tilgjengelig

    "); else $ (" # availability "). html ("

    Dette domenet er tatt.

    "); // fylle registeret ved link $ (" # results-info "). show (); return false; // ikke knytte til noe i rullegardinlisten);

    Fantastisk! Informasjonen er nå lastet, men det ser ganske ryddig ut. Ingen bekymringer, bare legg til følgende CSS for å få det til å se alt pen og få slutt på dagens øvelse.

     #left float: venstre; bredde: 250px; polstring-bunn: 10px; # resultater-info float: right; bredde: 510px; display: none; .register-stuff overflow: hidden; .right float: right;. extension float: right; font-size: 13 piksler; margin-høyre: 70px; # load-more color: # 6C9DC9; font-size: 12 piksler; linjehøyde: 18px; abbr float: left; # resultater-info h4 margin-bottom: 9px; skriftstørrelse: 16px; font-weight: bold; vertikaljustering: topp; margin-top: 0; # results-info .sections> li posisjon: relative; flyte: venstre; bredde: 140px; border-left: 1px solid # A9ADA8; padding-left: 9px; margin-høyre: 10px; # resultater-info .sections li ul li margin-left: 0; linjehøyde: 20px; # resultater-info .sections li ul li a font-size: 13px; skjerm: inline; #footer overflow: hidden; skriftstørrelse: 11px; farge: # 666; høyde: 20 piksler; klar: begge; margin-høyre: 15px; #footer p margin: 0; padding: 0; tekst-justere: høyre; #footer p a color: # 666; #footer p a: hover color: # 333333;

    Ferdig!

    Og der har du det! Gratulerer, du har nettopp laget en fin Chrome-utvidelse ved hjelp av en god service API! Jeg bygget dette ut mens jeg var i en flyplass og ventet på en overgang som bidrar til å bevise hvor enkelt og raskt det kan være en av disse. Ærlig, en Chrome-utvidelse er ikke vanskeligere enn en vanlig nettside. Hvis du har noen spørsmål, vennligst legg dem i kommentarene nedenfor!