Å 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.
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:
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.
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:
manifest.json-fil
HTML-filer
(med mindre utvidelsen er et tema)Javascript-filer
Manifestfilen gir for det meste meta-informasjon om utvidelsen. Her definerer du ting som navn, versjon, ikon og til og med tillatelser.
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.
manifest.json
FilSom 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.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.
For utvidelsen vil det i utgangspunktet være tre deler:
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å.
med flere
elementer inne i det, som blir befolket basert på deres forespørsel i del 1.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
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.
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
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('
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;
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!