Introduktion

udvidelser er lavet af forskellige, men sammenhængende komponenter. Komponenter kan omfatte baggrund scripts, indhold scripts, en Indstillinger side, UI elementer og forskellige logiske filer. Udvidelse komponenter er skabt med technologiesebudvikling teknologier: HTML, CSS og JavaScript. En udvidelse ” S komponenter vil afhænge af dens funktionalitet og kan ikke kræve alle muligheder.,

Denne tutorial vil bygge en udvidelse, der giver brugeren mulighed for at ændre baggrundsfarven på en side på developer.chrome.com. Det vil bruge mange af de centrale komponenter for at give et indledende demonstration af deres relationer.

for at starte, skal du oprette en ny mappe til at holde Udvidelsen”s filer.

den færdige udvidelse kan do .nloades her.

Opret manifestet #

udvidelser starter med deres manifest. Opret en fil kaldet manifest.json og Medtag følgende kode, eller Do .nload filen her.,

den mappe, der indeholder manifestfilen, kan tilføjes som en udvidelse i udviklertilstand i dens nuværende tilstand.

1. Åbn siden med Udvidelsesadministration ved at navigere tilchrome://extensions.
   • Udvidelsesadministrationssiden kan også åbnes ved at klikke på Chrome-menuen, holde musen over flere værktøjer og derefter vælge Udvidelser.
2. Aktiv Developerr udviklertilstand ved at klikke på vippekontakten ved siden af udviklertilstand.
3. Klik på knappen Indlæs udpakket, og vælg udvidelsesmappen.

Ta-da!, Udvidelsen er blevet installeret. Da ingen ikoner blev inkluderet i manifestet, oprettes et generisk værktøjslinjeikon til udvidelsen.

Tilføj instruktion #

selvom udvidelsen er installeret, har den ingen instruktion. Indføre en baggrund script ved at oprette en fil med titlen background.js, eller download det her og placere den inde i extension directory.

baggrund scripts, og mange andre vigtige komponenter, skal registreres i manifestet., Registrering af et baggrundsscript i manifestet fortæller udvidelsen, hvilken fil der skal henvises til, og hvordan den fil skal opføre sig.

udvidelsen er nu klar over, at det indeholder en ikke-vedvarende baggrund script og vil scanne den registrerede fil for vigtige begivenheder, den har brug for at lytte til.

denne udvidelse skal bruge oplysninger fra en vedvarende variabel, så snart den er installeret. Start med at inkludere en lyttebegivenhed for runtime.onInstalled i baggrundsskriptet. Inde ionInstalled lytteren indstiller udvidelsen en værdi ved hjælp af storage API., Dette giver flere udvidelseskomponenter adgang til denne værdi og opdaterer den.

de fleste API ‘ er, herunder storage API, skal registreres under "permissions" feltet i manifestet for udvidelsen for at bruge dem.

Naviger tilbage til siden med Udvidelsesadministration, og klik på linket Genindlæs. Et nyt felt, inspicere visninger, bliver tilgængelig med et blåt link, baggrundsside.,

Klik på linket for at se den baggrund script”s konsol log “The color is green.“

Indføre en brugergrænseflade #

Udvidelser kan have mange former, der af en brugergrænseflade, men dette vil man bruge en popup. Opret og tilføj en fil med titlen popup.html til mappen, eller Do .nload den her. Denne udvidelse bruger en knap til at ændre baggrundsfarven.som baggrundsskriptet skal denne fil betegnes som en popup i manifestet under page_action.,

betegnelse for Værktøjslinjeikoner er også inkluderet underpage_actioni feltetdefault_icons. Do .nload mappen billeder her, pak den ud, og læg den i Udvidelsen”s-mappen. Opdater manifestet, så udvidelsen ved, hvordan man bruger billederne.

udvidelser viser også billeder på udvidelsesadministrationssiden, tilladelsesadvarslen og favicon. Disse billeder er angivet i manifestet under icons.,

hvis udvidelsen genindlæses på dette tidspunkt, vil den indeholde et gråt ikon, men vil ikke indeholde funktionalitetsforskelle. Fordi page_action er erklæret i manifestet, er det op til udvidelsen at fortælle bro .seren, når brugeren kan interagere medpopup.html.

Tilføj deklarerede regler til baggrundsskriptet med declarativeContentAPI inden for runtime.onInstalled lytterbegivenheden.

udvidelsen skal have tilladelse til at få adgang tildeclarativeContent API i dets manifest.,

i browseren vil nu vise en fuld-farve side-ikon i browserens værktøjslinje, når brugerne navigerer hen til en WEBADRESSE, der indeholder "developer.chrome.com". Når ikonet er fuldfarve, kan brugerne klikke på det for at se popup.HTML.

det sidste trin for popup-brugergrænsefladen er at tilføje farve til knappen. Opret og tilføj en fil kaldet https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js med følgende kode til udvidelsesmappen eller Do .nloades her.

denne kode griber knappen fra popup.html og anmoder om farveværdien fra opbevaring., Den anvender derefter farven som baggrund for knappen. Medtag et script tag til https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js ipopup.html.

Genindlæs udvidelsen for at se den grønne knap.

Laglogik #

udvidelsen ved nu, at popup skal være tilgængelig for brugere på developer.chrome.com og viser en farvet knap, men har brug for logik for yderligere brugerinteraktion. Opdater https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js for at inkludere følgende kode.,

den opdaterede kode tilføjer en onclick begivenhed på knappen, som udløser et programatically injiceret indhold script. Dette gør baggrundsfarven på siden i samme farve som knappen. Brug af programmatisk injektion giver mulighed for brugeropkaldte indholdsscripts, i stedet for automatisk at indsætte uønsket kode på .ebsider.

manifestet skal brugeactiveTabtilladelse til at tillade udvidelsen midlertidig adgang tiltabs API. Dette gør det muligt for udvidelsen at kalde tabs.executeScript.,

udvidelsen er nu fuldt funktionel! Genindlæs udvidelsen, Opdater denne side, åbn popup og klik på knappen for at gøre den grøn! Nogle brugere kan dog ændre baggrunden til en anden farve.

Giv brugere muligheder #

udvidelsen giver i øjeblikket kun brugere mulighed for at ændre baggrunden til grøn. Herunder en Indstillinger side giver brugerne mere kontrol over udvidelsen”s funktionalitet, yderligere at tilpasse deres søgeoplevelse.,

Start med at oprette en fil i mappen kaldet options.html og Medtag følgende kode, eller Do .nload den her.

registrer derefter indstillingssiden i manifestet,

Genindlæs udvidelsen, og klik på detaljer.

Rul ned på detaljesiden, og vælg udvidelsesindstillinger for at se indstillingssiden, selvom den i øjeblikket vises tom.

sidste trin er at tilføje indstillingslogikken., Opret en fil kaldet options.js i udvidelsesmappen med følgende kode, eller Do .nload den her.

fire farveindstillinger leveres derefter genereres som knapper på siden Indstillinger med onclick event lyttere. Når brugeren klikker på en knap, det opdaterer farveværdien i Udvidelsen ” s global storage. Da alle de udvidelse ” s filer trække farven oplysninger fra global storage ingen andre værdier behøver at blive opdateret.

Tillykke! Mappen har nu en fuldt funktionel, omend forenklet, Chrome-udvidelse.

Hvad ” s næste?,

• Chrome-Udvidelsesoversigten sikkerhedskopierer lidt og udfylder en masse detaljer om Udvidelsesarkitekturen generelt, og nogle specifikke koncepter udviklere vil gerne være bekendt med.
• Lær om de tilgængelige muligheder for fejlfinding e .tensions i debugging tutorial.
• Chrome-udvidelser har adgang til kraftfulde API ‘er ud over, hvad”s tilgængelige på det åbne webeb. Krom.* API ‘ er dokumentation vil gå gennem hver API.
• udvikleren ” s guide har snesevis af yderligere links til stykker af dokumentation, der er relevante for avanceret udvidelse skabelse.,

---