✅ Programmer og opprett utvidelser for Chrome

Innholdsfortegnelse

1. Hvordan lage og programmere Chrome -utvidelse
2. Eksempel på utvidelser for Chrome

Denne opplæringen vil bli delt inn i tre seksjoner: En første seksjon der vi vil forklare ulike konsepter angående utvidelser i Chrome, strukturen deres og den grunnleggende opprettelsen av en utvidelse. I den andre delen vil vi fokusere på å lage utvidelser for denne flotte nettleseren, for eksempel Google Chrome, og gjøre flere praktiske eksempler. Til slutt, i den tredje delen, vil vi forklare avanserte alternativer når du oppretter utvidelser og hvordan du publiserer dem i Google Chrome nettbutikk, slik at det er tilgjengelig for allmennheten.

Hva er utvidelser i Google Chrome?Utvidelser er små programmer som kan endre og forbedre funksjonaliteten til nettleseren, i dette tilfellet Chrome. Disse er utviklet ved hjelp av webteknologier som HTML, Javascript og CSS.

Utvidelsene har lite eller ingen brukergrensesnitt. For eksempel viser bildet nedenfor et ikon for en hengelås som åpnes et lite grensesnitt når du klikker på det.

Denne spesielle utvidelsen brukes til å kryptere og dekryptere e -postene dine med en PGP -nøkkel. Utvidelser er filer som er pakket i én, som brukeren laster ned og installerer. Denne emballasjen trenger, i motsetning til vanlige webapplikasjoner, ikke være avhengig av webinnhold.

Som diskutert ovenfor lar utvidelser deg legge til funksjonalitet i Chrome uten å dykke dypt ned i opprinnelig kode. Nye utvidelser kan opprettes med grunnleggende teknologier som de fleste webutviklingsprogrammerere jobber med: HTML, CSS og Javascript.

1. Hvordan lage og programmere Chrome -utvidelse

Til å begynne med vil vi lage en enkel utvidelse som henter et bilde fra Google ved hjelp av nettadressen til den nåværende siden som et søkeord. Vi vil gjøre dette ved å implementere et brukergrensesnittelement som vi kaller chrome.browserAction, som lar oss plassere et ikon rett ved siden av Chrome -menyen, som du kan klikke for å få rask tilgang. Hvis du klikker på det ikonet, åpnes et popup-vindu som inneholder et bilde hentet fra den gjeldende siden, som vil se slik ut:

For å starte vår praksis, vil vi lage en katalog kalt Image_Viewer, i dette vil vi inkludere alle filene vi skal jobbe med. Som utviklingsredaktør kan du bruke den du foretrekker, i mitt tilfelle vil jeg bruke Chrome Dev Editor, som du kan laste ned på følgende adresse:

Chrome Dev Editor

Det første vi kommer til å trenge er å lage en manifestfil som heter manifest.json. Dette manifestet er ikke annet enn en metadatafil i JSON -format som inneholder egenskaper som navn, beskrivelse, versjonsnummer for utvidelsen og så videre. På et avansert nivå skal vi bruke det til å erklære for Chrome hva utvidelsen skal gjøre og tillatelsene som kreves for å gjøre visse ting.

Manifestfilformatet er som følger:

 {// Obligatorisk "manifest_version": 2, "name": "My Extension", "version": "versionString", // Recommended "default_locale": "es", "description": "En ren tekstbeskrivelse", " ikoner ": {…}, // Velg en (eller ingen)" browser_action ": {…}," page_action ": {…}, // Valgfri" forfatter ": …," automatisering ": …," bakgrunn ": {// Anbefalt "persistent": false}, "background_page":…, "chrome_settings_overrides": {…}, "chrome_ui_overrides": {"bookmarks_ui": {"remove_bookmark_shortcut": true, "remove_button": true}}, " chrome_url_overrides ": {…}," commands ": {…}," content_capabilities ":…," content_scripts ": [{…}]," content_security_policy ":" policyString "," convert_from_user_script ":…," copresence ":… , "current_locale":…, "devtools_page": "devtools.html", "event_rules": [{…}], "extern_connectable": {"matches": ["*: //*.example.com/*" ]}, "file_browser_handlers": […], "file_system_provider_capabilities": {"configable": true, "multiple_mounts": true, "source": "network"}, " homepage_url ":" http: // path / to / homepage "," import ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaa "}]," incognito ":" spenner eller deler "," input_components ":…," key " : "publicKey", "minimum_chrome_version": "versionString", "nacl_modules": […], "oauth2":…, "offline_enabled": true, "omnibox": {"keyword": "aString"}, "optional_permissions" : ["tabs"], "options_page": "options.html", "options_ui": {"chrome_style": true, "page": "options.html"}, "permissions": ["tabs"], " plattformer ":…," plugins ": […]," requirements ": {…}," sandbox ": […]," short_name ":" Short Name "," signature ":…," stavekontroll ":…, "storage": {"managed_schema": "schema.json"}, "system_indicator":…, "tts_engine": {…}, "update_url": "http: //path/to/updateInfo.xml", "version_name ":" aString "," web_accessible_resources ": […]}

Deretter vil jeg beskrive funksjonen som oppfyller de viktigste etikettene:

Påkrevd:

manifest_version: Det er manifestversjonen, den er representert med et heltall som spesifiserer versjonen av filformatet. Fra og med Chrome 18 må utviklere spesifisere nummer 2.

jamm: Det er navnet som utvidelsen din vil ha. Dette må bestå av maksimalt 45 tegn, navn er hoveddefinisjonselementet i utvidelsen og det er et obligatorisk felt. Den vises på følgende steder:

a) I installasjonsboksen.
b) I brukergrensesnittet der utvidelsen administreres.
c) I den virtuelle Chrome -butikken.

versjon: Det må bestå av ett til fire hele tall atskilt med punktum som identifiserer versjonen av utvidelsen. Her er noen eksempler på gyldige versjoner:

"Versjon 1"
"Versjon": "1.0"
"Versjon": "2.10.2"
"Versjon": "3.1.2.4567"

Anbefalt:

default_locale: Spesifiserer underkatalogen til _locales (språk) som inneholder standardstrenger for denne utvidelsen. Du må sette alle strengene som er synlige for brukeren i en fil som heter messages.json. Hver gang du inkluderer et nytt språk, må du legge til en ny fil messages.json under katalogen _locales / localecode der localecode er språkkoden, akkurat som en er engelsk og er for det spanske språket.

Et eksempel på en internasjonalisert utvidelse med støtte for engelsk (en), spansk (es) og koreansk (ko), ville være følgende:

beskrivelse: Den består av en streng i ren tekst (uten HTML eller annet format) med maksimalt 132 tegn som beskriver funksjonaliteten til utvidelsen.

Ikoner: Lar deg legge til ett eller flere ikoner som representerer utvidelsen. Et ikon på 128 x 128 piksler bør alltid vises. Dette vil bli brukt under installasjonen og i Chrome Nettmarked. Utvidelser må også inneholde et 48x48 -ikon som brukes på administrasjonssiden for Chrome -utvidelser (chrome: // extensions). Du kan også angi et 16x16 -ikon som skal brukes som favorittikon for en utvidelses sider.

Ikoner bør generelt være i PNG -format, fordi det har den beste støtten for åpenhet. Imidlertid kan de være i alle format som WebKit støtter, inkludert BMP.webp, GIF.webp, ICO og JPEG.webp. Her er et eksempel på ikonspesifikasjonen:

 "icons": {"16": "icon16.png.webp", "48": "icon48.png.webp", "128": "icon128.png.webp"},

Eksempel

Velg en (eller ingen):

browser_action: Bruk browser_action til å sette ikoner på hovedverktøylinjen øverst i Google Chrome -nettleseren, til høyre for adresselinjen. I tillegg kan du legge til verktøytips (flytende melding), merke (flytende tekst på ikonet) og popup (flytende vindu).

Eksempel på bruk browser_action:

 {"name": "My extension", … "browser_action": {"default_icon": {// optional "19": "images / icon19.png.webp", // optional "38": "images / icon38.png.webp" // valgfritt}, "default_title": "Google Mail", // valgfritt; viser et "default_popup" verktøytips: "popup.html" // valgfritt}, …}

side_handling: Bruk dette API -et til å plassere ikonet ditt i adresselinjen.

Eksempel på bruk:

 {"name": "My extension", … "page_action": {"default_icon": {// optional "19": "images / icon19.png.webp", // optional "38": "images / icon38. png" // valgfri}, "default_title": "Google mail", // valgfritt; vis i beskrivelsen "default_popup": "popup.html" // valgfritt},…}

Eks

Valgfri:

Bakgrunn: Et vanlig behov i utvidelser er å ha en enkelt side for utførelse av lange sekvenser for å administrere en oppgave eller status. Dette er en HTML -side som kjøres i forbindelse med utvidelsen. Den starter når utvidelsen begynner å kjøre og aktiverer bare en forekomst av den om gangen. I stedet for å bruke bakgrunn, anbefales det å bruke en hendelsesside.

I en typisk utvidelse med en side i bakgrunn fungerer brukergrensesnittet, for eksempel browser_action eller page_action, og noen sidealternativer som utvidelsen. Når visningen trenger å kjenne noen tilstand (lukket vinduet, oppdaterte siden …), sender den forespørsel om staten til siden som er funnet som bakgrunn. Når bakgrunnssiden varsler at det har skjedd en endring i tilstanden, informerer den visningen om å bli oppdatert eller iverksette tiltak.

Formatet er som følger:

 {"name": "My extension", … "background": {"scripts": ["background.js"]},…}

Format

Arrangementsider: Før du definerer følgende attributt, er det nødvendig å forklare hva hendelsessidene handler om. Et vanlig behov for applikasjoner og utvidelser er å ha et enkelt, langvarig skript for å håndtere en oppgave eller tilstand. Dette er målet med hendelsessider. Hendelsessider lastes bare inn når det er nødvendig. Når den ikke aktivt gjør noe, blir den lastet ut av hurtigbufferen, og frigjør minne og andre systemressurser.

Ytelsesfordelene er betydelige, spesielt på enheter med lav effekt. Det er derfor det anbefales å bruke flere hendelsessider enn bakgrunn.

Erklæringen om en hendelsesside i manifestfilen vil være følgende:

 {"name": "My extension", … "background": {"scripts": ["eventPage.js"], "persistent": false}, …}

Som du kan se er forskjellen den har med bakgrunn det vedvarende attributtet, som vil ha falsk status.

chrome_settings_overrides: Den brukes til å overskrive noen utvalgte konfigurasjoner i Chrome. Dette API er bare tilgjengelig for Windows.

Noen av disse konfigurasjonene kan være hjemmesiden (nettlesers hjemmeside, søkeleverandør (søkeleverandøren), etc.

Konfigurasjonseksempel:

 {"name": "My extension", … "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "keyword ":" søkeord .__ MSG_url_domain__ "," search_url ":" http: //www.foo.__MSG_url_domain__/s? q = {searchTerms} "," favicon_url ":" http: //www.foo.__MSG_url_domain__/favicon. ico "," suggest_url ":" http: //www.foo.__MSG_url_domain__/suggest? q = {searchTerms} "," instant_url ":" http: //www.foo.__MSG_url_domain__/instant? q = {searchTerms} " , "image_url": "http: //www.foo.__MSG_url_domain__/image? q = {searchTerms}", "search_url_post_params": "search_lang = __ MSG_url_domain__", "suggest_url_post_params": "suggest_lang = __ MSG_url_lang MSG_url_domain = "instant_url_params_url_domain" __MSG_url_domain__ "," image_url_post_params ":" image_lang = __ MSG_url_domain__ "," alternate_urls ": [" http: //www.moo.__MSG_url_domain__/ .noo .__ MSG_url_url_? q = {searchTerms} "]," encoding ":" UTF-8 "," is_default ": true}," startup_pages ": [" http://www.st artup.com "]}," default_locale ":" de ", …}

chrome_ui_overrides: Denne egenskapen til utvidelsen brukes til å overskrive noen innstillinger i brukergrensesnittet for Chrome. Som for eksempel markørene. Konfigurasjonen er som følger:

 {"name": "My extension", … "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}},…}

I dette tilfellet elimineres stjernen som nettleseren har for favoritter.

chrome_url_overrides: Dette er en måte å erstatte HTML -filen fra utvidelsen for en side som Google Chrome -nettleseren normalt gir. I tillegg kan du også overskrive CSS- og JavaScript -koden.

En utvidelse med denne konfigurasjonen kan erstatte en av følgende Chrome -sider:

Bokmerkerbehandling: Det er siden som vises når brukeren velger alternativet fra bokmerkerbehandlingsmenyen i Chrome -menyen eller for Mac, bokmerkebehandling -elementet i Bokmerker -menyen.

FORSTØRRE

Historie (historie): Det er siden som vises når brukeren velger historikken fra Chrome -menyen, eller på Mac viser elementet fullstendig historie fra menyen i historikkalternativet.

FORSTØRRE

Ny fane (ny fane): Det er siden som vises når brukeren oppretter en ny fane eller et vindu fra nettleseren. Du kan også få tilgang til denne siden ved å plassere følgende adresse i adressefeltet: chrome: // newtab

FORSTØRRE

MerkEn enkelt utvidelse kan bare overskrive én side. For eksempel kan en utvidelse ikke overskrive bokmerkene og på sin side historikksiden.

 {"name": "My extension", … "chrome_url_overrides": {"newtab": "mypage.html" // alternativene er newtab, history, bookmarks},…}

kommandoer: Denne kommandoen API brukes til å legge til hurtigtaster som utløser en handling i utvidelsen. For eksempel en handling for å åpne nettleserhandlingen eller sende en kommando til utvidelsen.

 {"name": "My extension", … "commands": {"toggle-feature-foo": {"suggest_key": {"default": "Ctrl + Shift + Y", "mac": "Command + Shift + Y "}," description ":" Toggle feature foo "}," _execute_browser_action ": {" suggest_key ": {" windows ":" Ctrl + Shift + Y "," mac ":" Command + Shift + Y ", "chromeos": "Ctrl + Shift + U", "linux": "Ctrl + Shift + J"}}, "_execute_page_action": {"suggest_key": {"default": "Ctrl + Shift + E", "windows ":" Alt + Shift + P "," mac ":" Alt + Shift + P "}}},…}

På bakgrunnssiden kan du binde en kontroller for hver av kommandoene som er definert i manifest.js (unntatt '_execute_browser_action'Y'_execute_page_action') via onCommand.addListener.

For eksempel:

 chrome.commands.onCommand.addListener (funksjon (kommando) {console.log ('Kommando trykket:', kommando);});

content_scripts: De er javascript -filer som kjøres i sammenheng med websider. Ved å bruke standard Document Object Model (DOM) kan de lese detaljene på nettsidene til nettleserbesøkene eller gjøre endringer i dem.

 {"name": "My extension", … "content_scripts": [{"matches": ["http://www.google.com/*"], "css": ["mystyles.css"], " js ": [" jquery.js "," myscript.js "]}],…}

content_scripts: For å gjøre utvidelsene våre sikrere og unngå potensielle skriptproblemer på tvers av nettsteder, har Chrome-utvidelsessystemet innarbeidet det generelle konseptet om Innholdssikkerhetspolicy (CSP). Dette introduserer svært strenge retningslinjer som vil gjøre utvidelser sikrere som standard. Generelt fungerer CSP som en svart -hvitt -liste -mekanisme for ressursene som er lastet inn eller utført av utvidelsene.

 {…, "Content_security_policy": "script-src 'self' https://example.com; object-src 'self'"…}

Dette var noen av de viktigste egenskapene. For vår første praksis vil vi definere manifest.json -filen vår som følger:

 {"manifest_version": 2, "name": "Oppstarteksempel", "description": "Denne utvidelsen viser et bilde fra Google -bilder av den nåværende siden", "versjon": "1.0", "browser_action": {"default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," permissions ": [" activeTab "," https://www.googleapis.com/ "]}

Som du kan se i vårt eksempelmanifest, erklærte vi en browser_action, activeTab -tillatelse til å se nettadressen til den nåværende kategorien, og verten ble gitt tillatelse. På denne måten kan du få tilgang til Google API for å utføre søkene eksterne bilder.

På sin side blir 2 ressursfiler funnet når du definerer browser_action: icon.png.webp og popup.html. Begge ressursene må finnes i utvidelsespakken, så la oss lage dem nå:

icon.png.webp Den vises ved siden av multifunksjonsboksen og venter på brukerinteraksjon. Det er bare en 19px x 19px PNG -fil.

popup.html vises i popup-vinduet som opprettes som svar på brukerens klikk på ikonet. Det er en standard HTML -fil og innholdet er som følger:

Komme i gang Utvidelsens popup

FORSTØRRE

2. Kontroller at avmerkingsboksen for utviklermodus i øvre høyre hjørne er merket av.

3. Klikk på Last opp utpakket (utpakket) utvidelse for å åpne en filvalg -dialog.

FORSTØRRE

4. Naviger til katalogen der utvidelsesfilene er plassert, og velg den.

Alternativt kan du dra katalogen som inneholder prosjektet og slippe den i Chrome -utvidelsesvinduet. Dette vil laste utvidelsen i nettleseren din.

På denne måten har vi laget en enkel utvidelse for Google Chrome. I vår neste del vil vi fordype oss i konstruksjonen av utvidelser i forbindelse med utviklingsrammer som jquery og Bootstrap, som vil tillate oss å effektivisere utviklingen.

2. Eksempel på utvidelser for Chrome

I denne delen vil vi utføre flere eksempler som lar oss fullt ut forstå mange av funksjonalitetene som finnes når vi bygger en utvidelse for Google Chrome.

Øvelse 1 - Blå bakgrunn
I dette eksemplet skal vi lage en enkel utvidelse der vi lærer hvordan vi kan endre innholdet på sidene vi laster inn i nettleseren vår. I dette tilfellet vil vi endre bakgrunnsfargen på den lastede siden og endre den til blå.

Som jeg forklarte i den første delen av denne opplæringen, kan du bruke hvilken som helst utviklings -IDE, i mitt tilfelle vil jeg bruke Chrome Dev Editor.

FORSTØRRE

For å begynne vil vi lage en ny katalog med navnet Blå bakgrunn og vi skal lage et prosjekt med samme navn.

FORSTØRRE

Inne vil vi lage vår første fil manifest.json som vil inneholde definisjonene av utvidelsen vår.

FORSTØRRE

Arkivet vårt manifest.json må inneholde følgende kode:

 {"manifest_version": 2, "name": "Blue Background", "description": "Denne utvidelsen endret bakgrunnsfargen på den gjeldende siden", "version": "1.0", "browser_action": {"default_icon": "icon.png.webp", "default_title": "Gjør denne siden blå"}, "permissions": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false }}

Fordi utvidelsen vår er enkel, vil den bare inneholde et ikon som når den trykkes utfører en handling. Som du kan se i filen manifest.json vi definerer et navn og beskrivelsen av det i browser_action Vi definerer ikonet som skal vises i linjen i vår Google Chrome -nettleser, og en tittel som vises når musepekeren er plassert over ikonet. Når det gjelder tillatelsene, vil vi definere at det bare vil bli gjort i den aktive fanen. Filen som vil kjøre i bakgrunnen vil være filen vår background.js som ikke vil være vedvarende, siden det bare vil bli utført når vi klikker på utvidelsen.

Vi lager vårt ikon og lagrer det inne i prosjektkatalogen som definert i manifest.json. I dette tilfellet i roten til prosjektet.

Deretter lager vi en JavaScript -fil kalt background.js i samme katalog med følgende kode:

 // ringes opp når brukeren klikker på utvidelsen chrome.browserAction.onClicked.addListener (funksjon (fane) {console.log ('Endrer' + tab.url + 'til blått!'); chrome.tabs.executeScript ({kode: ' document.body.style.backgroundColor = "blå" '});});

Etterlater hele prosjektet slik:

FORSTØRRE

For å kjøre utvidelsen vår er alt du trenger å gjøre å trykke på avspillingsknappen som finnes på den øverste linjen i Chrome Dev Editor.

FORSTØRRE

Ved å trykke på den blir utvidelsen lastet inn automatisk i Google Chrome -nettleseren.

La oss se utvidelsen vår i bruk ved å klikke på ikonet jeg laget (blå bakgrunn med bokstaven A i hvitt), siden jeg har lastet inn i den nåværende fanen, i mitt tilfelle brukerkontoen min i Solvetic (http: // www .solvetic… .berth-ramncgev /) endrer bakgrunnen til blå. Det skal bemerkes at bare fargen på BODY -elementet vil endre seg, og ikke DIV -ene som det inneholder, siden det var slik jeg definerte det i min background.js.

FORSTØRRE

Øvelse 2 - MultipleColor
I dette eksemplet vil jeg vise hvordan vi kan effektivisere arbeidet vårt fra utviklings -IDE og fra koden. I Chrome Dev Editor, klikker vi på + -knappen for å opprette et nytt prosjekt, denne gangen vil vi endre prosjekttype og velge alternativet JavaScript Chrome -app.

FORSTØRRE

Som du kan se, genererer det automatisk hele strukturen i prosjektet vårt. Med filen vår manifest.json med de vanligste definisjonene.

FORSTØRRE

Til denne filen vil vi legge til en kort beskrivelse på etiketten beskrivelse plassere teksten du vil ha, i mitt tilfelle "Utvidelse som tillater endring av bakgrunnsfarge". For dette prosjektet vil vi lage to ikoner, ett med 16x16 piksler og det andre på 128x128 piksler, som du kan se i strukturen, disse vil bli lagret i katalogen eiendeler.

Vi legger til følgende kode under koden minimum_chrome_version:

 "permissions": ["tabs", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Endre siden til flere farger.", " default_popup ":" popup.html "},

Som du kan se, definerer vi en popup eller visning som vil inneholde all html som brukeren vil se når han klikker på utvidelsen vår. Deretter legger vi til følgende kode:

 "content_scripts": [{"matches": [""], "css": ["assets / bootstrap / css / bootstrap.min.css"], "js": ["assets / jquery.min.js", "main.js"], "run_at": "document_start"}]

content_scripts- Inneholder JavaScript (js) og style sheet (css) filer som vil bli utført i sammenheng med websiden. Den kan inneholde følgende egenskaper:

fyrstikker: Påbudt, bindende. Spesifikk til hvilken side skriptet vil bli injisert.

exclude_matches: Valgfritt. Sider som blir ekskludert slik at skriptet ikke injiseres.

match_about_blank: Valgfritt. Denne verdien er boolsk, og angir om skriptet vil bli satt inn på den tomme siden (om: blank og om: srcdoc).

css: Valgfritt. Det er et arrangement som angir listen over css -filer som vil bli satt inn på siden som blir bedt om i nettleseren.

js: Valgfritt. Det er et arrangement med listen over JavaScript -filer som vil bli satt inn på siden som blir bedt om i nettleseren.

run_at: Valgfritt. Det er en tekststreng som kontrollerer når js -filene skal lastes inn. Verdien kan være:
document_start: Filer injiseres etter en css -fil, men før noen DOM bygges eller et annet skript utføres.

document_end: Filer injiseres umiddelbart etter at DOM er fullført, men før noen ressurser som bilder og rammer lastes inn.

document_idle: Nettleseren velger tid for å injisere skript mellom document_end, og umiddelbart etter at window.onload utløser hendelsen. Dette alternativet er det som er konfigurert som standard.

På slutten av filen vår manifest.json Det bør være som følger:

FORSTØRRE

Som du kan se, har vi lagt til et par nye ting i eiendommen css Vi har definert Bootstrap -rammeverket som ikke vil gjøre utvikling på stilnivå enklere. Etterfulgt på eiendommen js Vi definerer JQUERY JavaScript -biblioteket, som ikke tillater oss å jobbe på en raskere og enklere måte alt som har med JavaScript å gjøre. Vår index.html -fil skal se slik ut:

 Popup MultipleColorrødBlåGrønnGul

I index.html -filen refererer vi ganske enkelt til våre Bootstrap-, Jquery- og main.js -filer. I kroppen definerer vi en bootstrap -beholder med divene som vil fungere som knapper for de forskjellige fargevalgene.

For main.js-filen bruker vi klikkhendelsen som vil bli utført når du trykker på museknappen på hver klasse "col-md-12", og tar bakgrunnsfargen til elementet som ble valgt og tilordnet det til kroppen til siden. har blitt åpnet. Da vil hendelsen window.close () bli utført; som lukker vinduet til utvidelsen vår. Koden som er definert for main.js er som følger:

 $ (dokument) .ready (funksjon () {$ (". col-md-12"). klikk (funksjon () {var color = $ (dette) .css ("bakgrunnsfarge"); chrome.tabs. executeScript (null, {code: "$ ('body'). css ('background-color', '" + color + "')"}); window.close ();});});

Resultatet når vi kjører utvidelsen vår, vil vi kunne visualisere ikonet vi har laget for det i den øvre linjen.

Hvis du klikker på utvidelsen vår, vises følgende popup:

Og når du velger ett av alternativene, blir resultatet følgende:

FORSTØRRE

Øvelse 3 - Topphistorie
I dette eksemplet vil vi bruke alt som er sett ovenfor, vi vil lage en utvidelse som når vi klikker på den vil vise oss en popup med listen over de mest besøkte sidene fra nettleseren vår, som gir direkte tilgang til disse sidene. Det eneste annerledes i dette eksemplet er at vi vil be om tillatelse fra en av Chrome -appene for å få tilgang til de mest viste sidene fra Chrome. Navnet på denne api er chrome.topSites.

For å begynne skal vi Chrome Dev Editor og vi opprettet prosjektet vårt med navnet TopHistorial og i prosjekttype velger vi JavaScript Chrome App -alternativet.

Deretter filen vår manifest.json Det bør være som følger:

 {"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Vis liste over de mest viste sidene i nettleseren vår", "version": "0.0.1", " minimum_chrome_version ":" 38 "," permissions ": [" topSites "]," browser_action ": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," content_scripts ": [{" matches ": [" "]," css ": [" assets / bootstrap / css / bootstrap.min.css "]," js ": [" assets / jquery.min.js "," main.js "], "run_at": "document_start"}]}

Som du kan se, legger vi til et nytt attributt i manifestet for å kunne få tillatelse til Chrome API: Erklære tillatelser, brukes i de fleste Chrome API -er i utvidelsen din, må du først erklære det ved å plassere feltet tillatelser i manifestet ditt. Hver tillatelse kan være en tekststreng som tilhører følgende liste (delt inn i 3 bilder):

Når det gjelder filen vår popup.html Det bør være som følger:

 Popup MultipleColor

Arkivet vårt main.js som vil inneholde api -spørringen og håndteringen av klikkhendelsen, vil den bli representert som følger:

 $ (document) .ready (function () {function openpage () {chrome.tabs.create ({url: $ (this) .attr ("href")});} function buildPopupDom (mostVisitedURLs) {for (var i = 0; i <mostVisitedURLs.length; i ++) {$ ("# top_list"). Legg til ('
' + mostVisitedURLs [i] .title +'
'); } $ (". lenker"). bind ("klikk", åpen side); } chrome.topSites.get (buildPopupDom); });

På strukturelt nivå burde prosjektet vårt vært som følger:

Når vi kjører utvidelsen vår, vil vi kunne se et ikon øverst i nettleseren, som i mitt tilfelle designer den i blått. Når du klikker på den, åpnes en popup med listen over sider som jeg har fått mest tilgang til fra min nettleser sortert etter antall besøk jeg har gjort.

FORSTØRRE

Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng