Komme i gang

Extensions er laget av forskjellige, men felles, komponenter. Komponenter kan inkludere bakgrunn skript, innhold skript, en alternativer-side, UI-elementer og ulike logikk filer. Extension komponenter er laget med web-utvikling teknologier: HTML, CSS og JavaScript. En utvidelse»s komponenter vil avhenge av dens funksjonalitet, og kan ikke kreve at hvert valg.,

Denne opplæringen vil bygge en forlengelse som gir brukeren mulighet til å endre bakgrunnsfargen på en hvilken som helst side på developer.chrome.com. Det vil bruke mange core komponenter for å gi en innledende demonstrasjon av sine relasjoner.

for Å starte, kan du opprette en ny mappe for å holde extension»s-filer.

fullført utvidelsen kan lastes ned her.

Opprett manifest #

Utvidelser start med sitt manifest. Opprette en fil som heter manifest.json og inkluderer følgende: – koden eller last ned filen her.,

katalogen holde manifest-filen kan bli lagt til som en utvidelse i utviklermodus i sin nåværende tilstand.

1. Åpne Extension Management side ved å navigere til chrome://extensions.
   • Extension Management side kan også åpnes ved å klikke på Chrome-menyen, svever over Flere Verktøy og deretter velge Utvidelser.
2. Aktiver Utvikler Modus ved å klikke på-bryteren ved siden av utviklermodus.
3. Klikk på LEGG PAKKET ut-knappen, og velg filtypen katalogen.

Ta-da!, Utvidelsen har blitt installert riktig. Fordi ingen ikoner ble inkludert i manifest, en generisk toolbar ikon vil bli opprettet for forlengelse.

Legg til instruksjon #

Selv om utvidelsen er installert, det har ingen instruksjon. Innføre en bakgrunn script ved å opprette en fil med tittelen background.js, eller du kan laste det ned her, og plassere det inn extension katalogen.

Bakgrunn skript, og mange andre viktige komponenter, må være registrert i manifest., Registrere en bakgrunn skript i manifest forteller extension som fil til referanse, og hvordan denne filen bør oppføre seg.

utvidelsen er nå klar over at det inkluderer et ikke-vedvarende bakgrunn skript og vil skanne registrert fil for viktige hendelser det er behov for å høre til.

Denne utvidelsen vil ha behov for informasjon fra et vedvarende variabel så snart den er installert. Start ved å inkludere en lytter arrangement for runtime.onInstalled i bakgrunnen script. Inni onInstalled lytteren, utvidelse vil angi en verdi ved hjelp av storage API., Dette vil tillate flere extension komponenter for å få tilgang til denne verdien, og oppdatere den.

de Fleste Api-er, inkludert storage API, må være registrert under "permissions" – feltet i manifest for utvidelse for å bruke dem.

gå tilbake til forlengelse management-siden og klikk på Reload-koblingen. Et nytt felt, Kontroller utsikt, blir tilgjengelig med en blå link, bakgrunn side.,

Klikk på linken for å se bakgrunnen script»s-konsoll logg, «The color is green.«

Innføre et brukergrensesnitt #

Utvidelser kan ha mange former av et brukergrensesnitt, men dette vil man bruke et popup-vindu. Opprette og legge til en fil med tittelen popup.html til katalogen, eller laste det ned her. Denne utvidelsen bruker a-knappen for å endre bakgrunnsfargen.

Som bakgrunn script, denne filen behov for å bli utpekt som en popup i manifest under page_action.,

Betegnelse for verktøylinjen ikoner er også inkludert under page_action i default_icons – feltet. Last ned bilder-mappen her, pakk det, og plasser den i extension»s katalogen. Oppdatering manifest så extension vet hvordan å bruke bildene.

Utvidelser også vise bilder på forlengelse management side, tillatelser advarsel, og favicon. Disse bildene er utpekt i manifest under icons.,

Hvis utvidelsen er lastet inn på dette stadiet, vil det inkludere en grå-skala-ikonet, men vil ikke inneholde funksjonalitet forskjeller. Fordi page_action er deklarert i manifestet, det er opp til extension for å fortelle nettleseren når brukeren kan samhandle med popup.html.

Legg til erklært regler på bakgrunn script med declarativeContent API innenfor runtime.onInstalled lytteren event.

utvidelsen vil ha tillatelse til å få tilgang til declarativeContent API i sitt manifest.,

leseren vil nå vise en full-farge side action-ikonet på verktøylinjen i nettleseren når brukere prøver å gå til en NETTADRESSE som inneholder "developer.chrome.com". Når ikonet er full-farge, – brukere kan klikke på den for å vise popup.HTML.

Den siste trinn for popup-UI er å legge til farge til-knappen. Opprette og legge til en fil som heter https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js med følgende kode til forlengelse katalogen, eller lastes ned her.

Denne koden griper knappen popup.html og forespørsler fargen verdi fra lagring., Det så gjelder den farge som bakgrunnen på på-knappen. Inkluderer en script-tag https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js i popup.html.

last inn på nytt for at utvidelsen skal vise den grønne knappen.

Lag logikk #

utvidelsen nå vet popup bør være tilgjengelig for brukere på developer.chrome.com og viser en farget knapp, men trenger logikk for mer brukermedvirkning. Oppdater https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js for å inkludere følgende kode.,

Den oppdaterte koden legger en onclick event på-knappen, som utløser en programatically injisert innhold script. Dette gjør at bakgrunnsfargen på siden samme farge som på knappen. Ved hjelp av programmatiske injeksjon gir mulighet for brukeren-ikke påberopt innhold skript, i stedet for automatisk å sette inn uønskede koden til web-sider.

manifest trenger activeTab tillatelse til å tillate utvidelse midlertidig tilgang til tabs API. Dette gjør at utvidelsen du å ringe tabs.executeScript.,

utvidelsen er nå fullt funksjonell! Legg extension, oppdater denne siden, åpner popup-menyen, og klikk på knappen for å slå det grønne! Imidlertid, noen brukere kan det være lurt å endre bakgrunnen til en annen farge.

Gi brukerne alternativer #

utvidelsen foreløpig bare tillater brukere å endre bakgrunnen til grønt. Inkludert en til alternativer-siden gir brukerne mer kontroll over extension»s-funksjonalitet, kan ytterligere tilpasse sine leseopplevelsen.,

Start med å opprette en fil i katalogen options.html og inkluderer følgende kode, eller laste det ned her.

Deretter registrere valg side i manifestet,

last inn på nytt filtypen, og klikk på DETALJER.

Bla ned detaljer-siden, og velg Filtypen du valg for å vise alternativene side, selv om det vil for tiden være tom.

Siste trinnet er å legge til alternativer logikk., Opprette en fil som heter options.js i extension katalog med følgende kode, eller laste det ned her.

Fire alternativer er gitt så genereres som knappene på siden alternativer med onclick-eventen lyttere. Når brukeren klikker på en knapp, det oppdateringer fargen verdi i extension»s global storage. Siden alle extension»s-filer trekk color informasjon fra global storage ingen andre verdier må være oppdatert.

Gratulerer! Katalogen har nå en fullt funksjonell, men enkle, Chrome-utvidelsen.

Hva»s next?,

• Chrome Extension Oversikt over ryggen opp litt, og fyller i en masse detaljer om Utvidelser arkitektur generelt, og noen spesifikke begreper utviklere vil ønske å bli kjent med.
• finn ut mer om alternativene som er tilgjengelig for debugging Utvidelser i debugging opplæringen.
• Chrome-Utvidelser ha tilgang til kraftige Api-utover hva som»s tilgjengelig på det åpne nettet. Chrome.* Api-dokumentasjon vil gå gjennom hvert API.
• developer ‘ s guide har dusinvis av ekstra koblinger til deler av dokumentasjonen som er relevant for avansert extension skapelsen.,

---