Programmer og opret udvidelser til Chrome

Denne tutorial vil blive opdelt i 3 sektioner: Et første afsnit, hvor vi vil forklare forskellige begreber vedrørende udvidelser i Chrome, deres struktur og den grundlæggende oprettelse af en udvidelse. I det andet afsnit vil vi fokusere på at oprette udvidelser til denne fantastiske browser, f.eks. Google Chrome, og lave flere praktiske eksempler. Endelig vil vi i det tredje afsnit forklare avancerede muligheder, når du opretter udvidelser, og hvordan du offentliggør dem i Google Chrome -webbutikken, så den er tilgængelig for offentligheden.

Hvad er udvidelser i Google Chrome?Udvidelser er små programmer, der kan ændre og forbedre browserens funktionalitet, i dette tilfælde Chrome. Disse er udviklet ved hjælp af webteknologier som HTML, Javascript og CSS.

Udvidelserne har lidt eller ingen brugergrænseflade. For eksempel viser billedet herunder et ikon for en hængelås, der åbnes en lille grænseflade, når der klikkes på den.

Denne særlige udvidelse bruges til at kryptere og dekryptere dine e -mails med en PGP -nøgle. Udvidelser er filer, der er pakket i en, som brugeren downloader og installerer. Denne emballage behøver i modsætning til normale webapplikationer ikke at være afhængig af webindhold.

Som diskuteret ovenfor giver udvidelser dig mulighed for at tilføje funktionalitet til Chrome uden at dykke dybt ned i native kode. Nye udvidelser kan oprettes med grundlæggende teknologier, som de fleste webudviklingsprogrammerere arbejder med: HTML, CSS og Javascript.

1. Sådan oprettes og programmeres Chrome -udvidelse

Til at begynde med laver vi en simpel udvidelse, der henter et billede fra Google ved hjælp af URL'en på den aktuelle side som et søgeudtryk. Vi gør dette ved at implementere et brugergrænsefladeelement, som vi kalder chrome.browserAction, som giver os mulighed for at placere et ikon lige ved siden af ​​Chrome -menuen, som du kan klikke på for hurtig adgang. Hvis du klikker på det ikon, åbnes et pop-up-vindue, der indeholder et billede hentet fra den aktuelle side, og som vil se sådan ud:

For at starte vores praksis opretter vi et bibliotek kaldet Image_Viewer, inden for dette vil vi inkludere alle de filer, som vi skal arbejde med. Som udviklingsredaktør kan du bruge den, du foretrækker, i mit tilfælde vil jeg bruge Chrome Dev Editor, som du kan downloade på følgende adresse:

Chrome Dev Editor

Den første ting vi skal bruge er at oprette en manifestfil kaldet manifest.json. Dette manifest er ikke andet end en metadatafil i JSON -format, der indeholder egenskaber som navn, beskrivelse, versionsnummer for dets udvidelse og så videre. På et avanceret niveau vil vi bruge det til at erklære over for Chrome, hvad udvidelsen skal gøre og de tilladelser, der er nødvendige for at kunne gøre visse ting.

Manifestfilformatet er som følger:

 {// Påkrævet "manifest_version": 2, "name": "My Extension", "version": "versionString", // Recommended "default_locale": "es", "description": "A plain text description", " ikoner ": {…}, // Vælg en (eller ingen)" browser_action ": {…}," page_action ": {…}, // Valgfri" author ":…," automation ":…," background ": {// Anbefalet "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": {"konfigurerbar": true, "multiple_mounts": true, "source": "network"}, " homepage_url ":" http: // path / to / homepage "," import ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaa "}]," incognito ":" spænder eller splittes "," 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"], " platforme ":…," plugins ": […]," krav ": {…}," sandbox ": […]," short_name ":" Kort navn "," signatur ": …," stavekontrol ":…, "storage": {"managed_schema": "schema.json"}, "system_indicator":…, "tts_engine": {…}, "update_url": "http: //path/to/updateInfo.xml", "version_name ":" aString "," web_accessible_resources ": […]} 

Dernæst vil jeg beskrive den funktion, der opfylder de vigtigste etiketter:

I påkrævet:

• manifest_version: Det er manifestversionen, den repræsenteres af et helt tal, der angiver versionen af ​​filformatet. Fra og med Chrome 18 skal udviklere angive nummer 2.

• jam: Det er det navn, din udvidelse vil have. Dette må maksimalt bestå af 45 tegn, navn er hoveddefinitionselementet i udvidelsen, og det er et obligatorisk felt. Det vises følgende steder:

a) I installationsboksen.
b) I brugergrænsefladen, hvor udvidelsen administreres.
c) I den virtuelle Chrome -butik.

• version: Det skal bestå af et til fire hele tal adskilt af punktum, der identificerer versionen af ​​udvidelsen. Her er nogle eksempler på gyldige versioner:

"Version 1"
"Version": "1.0"
"Version": "2.10.2"
"Version": "3.1.2.4567"

Anbefalede:

• default_locale: Angiver underkataloget for _locales (sprog), der indeholder standardstrenge for denne udvidelse. Du skal sætte alle de strenge, der er synlige for brugeren, i en fil kaldet messages.json. Hver gang du inkluderer et nyt sprog, skal du tilføje en ny fil messages.json under biblioteket _locales / localecode, hvor localecode er sprogkoden, ligesom en er engelsk og er for det spanske sprog.

Et eksempel på en internationaliseret udvidelse med støtte til engelsk (en), spansk (r) og koreansk (ko) ville være følgende:

• beskrivelse: Den består af en streng i ren tekst (uden HTML eller andet format) med maksimalt 132 tegn, der beskriver funktionaliteten af ​​udvidelsen.

• Ikoner: Giver dig mulighed for at tilføje et eller flere ikoner, der repræsenterer udvidelsen. Et ikon på 128x128px bør altid angives. Dette vil blive brugt under installationen og i Chrome Webshop. Udvidelser skal også indeholde et ikon på 48 x 48, som bruges på siden Administrering af udvidelser i Chrome (krom: // udvidelser). Du kan også angive et ikon på 16 x 16, der skal bruges som favikon for en udvidelses sider.

Ikoner skal generelt være i PNG -format, fordi det har den bedste understøttelse af gennemsigtighed. De kan dog være i ethvert format, som WebKit understøtter, herunder BMP.webp, GIF.webp, ICO og JPEG.webp. Her er et eksempel på ikonspecifikationen:

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

Eksempel

Vælg en (eller ingen):

• browser_action: Brug browser_action til at sætte ikoner på hovedværktøjslinjen øverst i Google Chrome -browseren til højre for adresselinjen. Derudover kan du tilføje værktøjstip (flydende meddelelse), badge (flydende tekst på ikonet) og popup (flydende vindue).

Eksempel på brug browser_action:

 {"name": "My extension", … "browser_action": {"default_icon": {// optional "19": "images / icon19.png.webp", // optional "38": "images / icon38.png.webp" // valgfri}, "default_title": "Google Mail", // valgfrit; viser et "default_popup" værktøjstip: "popup.html" // valgfrit}, …}

• side_handling: Brug denne API til at placere dit ikon inde i adresselinjen.

Eksempel på brug:

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

Eks

Valgfri:

• Baggrund: Et almindeligt behov i udvidelser er at have en enkelt side til udførelse af lange sekvenser for at styre en opgave eller status. Dette er en HTML -side, der kører i forbindelse med udvidelsen. Det starter, når udvidelsen begynder at køre og aktiverer kun én forekomst af det ad gangen. I stedet for at bruge baggrund anbefales det at bruge en hændelsesside.

I en typisk udvidelse med en side i baggrunden fungerer brugergrænsefladen, f.eks. Browser_action eller page_action, og nogle sideindstillinger som udvidelsens visning. Når visningen skal kende en tilstand (lukker vinduet, opdaterer siden …), sender den anmodningen om staten til den side, der findes som baggrund. Når baggrundssiden underretter om, at der er sket en ændring i tilstanden, informerer den visningen om at blive opdateret eller foretage en handling.

Dens format er som følger:

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

Format

• Begivenheds sider: Inden du definerer følgende attribut, er det nødvendigt at forklare, hvad hændelsessiderne handler om. Et almindeligt behov for applikationer og udvidelser er at have et enkelt, langvarigt script til at håndtere en opgave eller tilstand. Dette er målet med begivenhedssider. Begivenheds sider indlæses kun når det er nødvendigt. Når det ikke aktivt laver noget, bliver det aflæst fra cachen og frigør hukommelse og andre systemressourcer.

Ydelsesfordelene er betydelige, især på enheder med lav effekt. Derfor anbefales det at bruge flere hændelsessider end baggrund.

Erklæringen om en hændelsesside i manifestfilen ville være følgende:

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

Som du kan se forskellen med baggrund er den vedvarende attribut, som vil have falsk status.

• chrome_settings_overrides: Det bruges til at overskrive nogle udvalgte konfigurationer i Chrome. Denne API er kun tilgængelig til Windows.

Nogle af disse konfigurationer kan være startsiden (browserens hjemmeside, søgeudbyder (søgeudbyderen) osv.

Konfigurationseksempel:

 {"name": "My extension", … "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "keyword ":" søgeord .__ 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_dom_ MSG_url_domain = "instant_url_params_url_domain" __MSG_url_domain__ "," image_url_post_params ":" image_lang = __ MSG_url_domain__ "," alternative_urls ": [" http: //www.moo.__MSG_url_domain__/? .noo .__ MSG_url_url_? q = {searchTerms} "]," encoding ":" UTF-8 "," is_default ": true}," start_pages ": [" http://www.st artup.com "]}," default_locale ":" de ", …} 

• chrome_ui_overrides: Denne egenskab af udvidelsen bruges til at overskrive nogle indstillinger i Chrome -brugergrænsefladen. Som for eksempel markørerne. Dens konfiguration er som følger:

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

I dette tilfælde elimineres den stjerne, som browseren har til favoritter.

• chrome_url_overrides: Dette er en måde at erstatte HTML -filen fra udvidelsen til en side, som Google Chrome -browseren normalt leverer. Derudover kan du også overskrive dens CSS- og JavaScript -kode.

En udvidelse med denne konfiguration kan erstatte en af ​​følgende Chrome -sider:

• Bogmærkehåndtering: Det er den side, der vises, når brugeren vælger indstillingen fra menuen Bogmærkeadministrator i Chrome -menuen eller for Mac, elementet Bogmærkehåndtering i menuen Bogmærker.

FORSTØRRE

• Historie (historie): Det er den side, der vises, når brugeren vælger historikken fra Chrome -menuen, eller på Mac'en viser elementet fuld historik fra menuen, der findes i historikindstillingen.

FORSTØRRE

• Ny fane (ny fane): Det er den side, der vises, når brugeren opretter en ny fane eller et vindue fra browseren. Du kan også få adgang til denne side ved at placere følgende adresse i adresselinjen: chrome: // newtab

FORSTØRRE

BemærkEn enkelt udvidelse kan kun overskrive én side. For eksempel kan en udvidelse ikke overskrive bogmærkerne og til gengæld historiksiden.

 {"name": "My extension", … "chrome_url_overrides": {"newtab": "mypage.html" // mulighederne er newtab, historik, bogmærker},…}

• kommandoer: Denne kommando -API bruges til at tilføje tastaturgenveje, der udløser en handling i din udvidelse. For eksempel en handling for at åbne browserhandlingen eller sende en kommando til udvidelsen.

 {"name": "Min udvidelse", … "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å din baggrundsside kan du binde en controller til hver af kommandoerne defineret i manifest.js (undtagen '_execute_browser_action'Y'_execute_page_action') via onCommand.addListener.

For eksempel:

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

• content_scripts: De er javascript -filer, der udføres i forbindelse med websider. Ved at bruge standard Document Object Model (DOM) kan de læse detaljerne på websiderne i browserbesøgene eller foretage ændringer af dem.

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

• content_scripts: For at gøre vores udvidelser mere sikre og undgå potentielle cross-site scripting-problemer har Chrome-udvidelsessystemet indarbejdet det generelle koncept for Indholdssikkerhedspolitik (CSP). Dette indfører meget strenge politikker, der vil gøre udvidelser mere sikre som standard. Generelt fungerer CSP som en sort / hvid liste -mekanisme for de ressourcer, der indlæses eller udføres af dens udvidelser.

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

Disse var nogle af de vigtigste egenskaber. Til vores indledende praksis vil vi definere vores manifest.json -fil som følger:

 {"manifest_version": 2, "name": "Eksempel ved opstart", "description": "Denne udvidelse viser et billede fra Google -billeder af den aktuelle side", "version": "1.0", "browser_action": {"default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," permissions ": [" activeTab "," https://www.googleapis.com/ "]}

Som du kan se i vores eksempelmanifest, erklærede vi en browser_action, den aktive tabs tilladelse til at se webadressen til den aktuelle fane, og værten fik tilladelse, på denne måde kan du få adgang til Google API til at udføre søgningen eksterne billeder.

Til gengæld findes 2 ressourcefiler ved definition af browser_action: icon.png.webp og popup.html. Begge ressourcer skal eksistere i udvidelsespakken, så lad os oprette dem nu:

• ikon.png.webp Det vises ved siden af ​​multifunktionsboksen og venter på brugerinteraktion. Det er bare en 19px x 19px PNG -fil.

• popup.html vises i pop op-vinduet, der oprettes som svar på brugerens klik på ikonet. Det er en standard HTML -fil og dens indhold er som følger:

 Kom godt i gang Udvidelsens popupFORSTØRRE
2. Sørg for, at afkrydsningsfeltet til udviklertilstand i øverste højre hjørne er markeret.

3. Klik på Upload udpakket (udpakket) udvidelse for at få vist en filvalgsdialog.
FORSTØRRE
4. Naviger til det bibliotek, hvor dine udvidelsesfiler er placeret, og vælg det.
Alternativt kan du trække biblioteket, der indeholder dit projekt, og slippe det i vinduet Chrome -udvidelser. Dette indlæser udvidelsen i din browser.

På denne måde vil vi have lavet en simpel udvidelse til Google Chrome. I vores næste rate vil vi fordybe os i konstruktionen af ​​udvidelser i forbindelse med udviklingsrammer som jquery og Bootstrap, som giver os mulighed for at strømline vores udvikling.

2. Eksempel på udvidelser til Chrome

I dette afsnit vil vi udføre flere eksempler, som giver os mulighed for fuldt ud at forstå mange af de funktioner, der findes, når vi bygger en udvidelse til Google Chrome.

Øvelse 1 - Blå baggrund
I dette eksempel laver vi en simpel udvidelse, hvor vi lærer, hvordan vi kan ændre indholdet på de sider, vi indlæser i vores browser. I dette tilfælde ændrer vi baggrundsfarven på den indlæste side og ændrer den til blå.
Som jeg forklarede i den første del af denne vejledning, kan du bruge enhver udviklings -IDE, i mit tilfælde vil jeg bruge Chrome Dev Editor.
FORSTØRRE
For at starte vil vi oprette en ny mappe med navnet Blå baggrund og vi opretter et projekt med samme navn.
FORSTØRRE
FORSTØRRE
Inde vil vi oprette vores første fil manifest.json som vil indeholde definitionerne af vores udvidelse.
FORSTØRRE
Vores arkiv manifest.json skal indeholde følgende kode:
 {"manifest_version": 2, "name": "Blue Background", "description": "Denne udvidelse ændrede baggrundsfarven på den aktuelle side", "version": "1.0", "browser_action": {"default_icon": "icon.png.webp", "default_title": "Gør denne side blå"}, "permissions": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false }} 
Fordi vores udvidelse er enkel, vil den kun indeholde et ikon, der når der trykkes på den udfører en handling. Som du kan se i filen manifest.json vi definerer et navn og dets beskrivelse i browser_action Vi definerer det ikon, der skal vises i linjen i vores Google Chrome -browser, og en titel, der vises, når musemarkøren er placeret over ikonet. Med hensyn til tilladelserne vil vi definere, at det kun vil blive gjort i den aktive fane. Filen, der kører i baggrunden, er vores fil baggrund.js hvilket ikke vil være vedholdende, da det kun vil blive udført, når vi klikker på udvidelsen.

Vi opretter vores ikon og gemmer det inde i projektmappen som defineret i manifest.json. I dette tilfælde i roden af ​​projektet.
Derefter opretter vi en JavaScript -fil kaldet baggrund.js i samme bibliotek med følgende kode:
 // kaldes når bruger klikker på udvidelsen chrome.browserAction.onClicked.addListener (funktion (fane) {console.log ('Ændrer' + tab.url + 'til blå!'); chrome.tabs.executeScript ({kode: ' document.body.style.backgroundColor = "blå" '});}); 
Forlader hele projektet som følger:

FORSTØRRE
For at køre vores udvidelse skal du bare trykke på afspilningsknappen i øverste bjælke i Chrome Dev Editor.
FORSTØRRE
Ved at trykke på den indlæses udvidelsen automatisk i Google Chrome -browseren.

Lad os se vores udvidelse i aktion ved at klikke på det ikon, jeg lavede (blå baggrund med bogstavet A i hvidt), den side, jeg har indlæst i den aktuelle fane, i mit tilfælde min brugerkonto i Solvetic (http: // www .solvetic… .berth-ramncgev /) ændrer sin baggrund til blå. Det skal bemærkes, at kun farven på BODY -elementet vil ændre sig, og ikke de DIV'er, det indeholder, da det er sådan, jeg definerede det i min baggrund.js.
FORSTØRRE
Øvelse 2 - MultipleColor
I dette eksempel vil jeg vise, hvordan vi kan effektivisere vores arbejde fra udviklings -IDE og fra koden. I Chrome Dev Editor, klikker vi på knappen +, for at oprette et nyt projekt, denne gang ændrer vi projekttype og vælger indstillingen JavaScript Chrome App.
FORSTØRRE
Som du kan se, genererer det automatisk hele vores projekts struktur. Med vores fil manifest.json med de mest almindelige definitioner.
FORSTØRRE
Til denne fil tilføjer vi en kort beskrivelse på etiketten beskrivelse placere den tekst, du ønsker, i mit tilfælde "Udvidelse, der tillader ændring af baggrundsfarve". Til dette projekt vil vi oprette 2 ikoner, et med 16x16 pixels og det andet på 128x128 pixels, som du kan se i strukturen, disse vil blive gemt i biblioteket aktiver.
Vi tilføjer følgende kode under mærket minimum_chrome_version:
 "permissions": ["faner", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Skift siden til flere farver.", " default_popup ":" popup.html "}, 
Som du kan se, definerer vi en popup eller visning, der indeholder al den html, som brugeren vil se, når han klikker på vores udvidelse. Derefter tilføjer vi 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- Indeholder de JavaScript (js) og style sheet (css) filer, der vil blive eksekveret i forbindelse med websiden. Det kan indeholde følgende egenskaber:


Tændstikker: Obligatorisk. Specifik til hvilken side scriptet vil blive injiceret.


exclude_matches: Valgfrit. Sider, der udelukkes, så scriptet ikke injiceres.


match_about_blank: Valgfri. Denne værdi er boolesk og angiver, om scriptet vil blive indsat i den tomme side (om: blank og om: srcdoc).


css: Valgfri. Det er et arrangement, der angiver listen over css -filer, der vil blive indsat på den side, der anmodes om i browseren.


js: Valgfrit. Det er et arrangement med listen over JavaScript -filer, der vil blive indsat på den side, der anmodes om i browseren.


run_at: Valgfrit. Det er en tekststreng, der styrer, hvornår js -filerne indlæses. Dens værdi kan være:
document_start: Filer injiceres efter en css -fil, men inden en DOM bygges eller et andet script udføres.


document_end: Filer injiceres umiddelbart efter DOM'en er fuldført, men inden der læses ressourcer som f.eks. Billeder og rammer.


document_idle: Browseren vælger tid til at injicere scripts mellem document_end, og umiddelbart efter at window.onload udløser hændelsen. Denne indstilling er den, der er konfigureret som standard.

I slutningen af ​​vores fil manifest.json Det skal være som følger:
FORSTØRRE
Som du kan se, har vi tilføjet et par nye ting i ejendommen css Vi har defineret Bootstrap -rammerne, som ikke vil gøre udviklingen på stilniveau lettere. Følges på ejendommen js Vi definerer JQUERY JavaScript -biblioteket, som ikke tillader os at arbejde hurtigere og lettere på alt, hvad der har med JavaScript at gøre. Vores index.html -fil skal se sådan ud:
 Popup MultipleColorRødBlåGrønGul
I filen index.html laver vi simpelthen referencer til vores Bootstrap-, Jquery- og main.js -filer. I kroppen definerer vi en bootstrap -beholder med dens divs, der fungerer som knapper til de forskellige farveindstillinger.

Til main.js-filen vil vi bruge klikhændelsen, der udføres, når der trykkes på museknappen på hver klasse "col-md-12", idet baggrundsfarven på det element, der blev valgt, tildeles det til hoveddelen af side. er blevet åbnet. Herefter vil window.close () hændelsen blive udført; som lukker vinduet i vores udvidelse. Koden defineret for main.js er som følger:
 $ (dokument) .ready (funktion () {$ (". col-md-12"). klik (funktion () {var color = $ (dette) .css ("baggrundsfarve"); chrome.tabs. executeScript (null, {code: "$ ('body'). css ('background-color', '" + color + "')"}); window.close ();});}); 
Resultatet, når vi udfører vores udvidelse, vil vi være i stand til at visualisere det ikon, som vi har oprettet til det i den øverste bjælke.


Ved at klikke på vores udvidelse vises følgende popup:

Og når du vælger en af ​​mulighederne, bliver resultatet følgende:
FORSTØRRE
Øvelse 3 - Tophistorie
I dette eksempel vil vi anvende alt set ovenfor, vi vil oprette en udvidelse, at når vi klikker på det, viser det os en popup med listen over de mest besøgte sider fra vores browser, der giver direkte adgang til disse sider. Det eneste anderledes i dette eksempel er, at vi vil anmode om tilladelse fra en af ​​Chrome -programmerne til at få adgang til de mest sete sider fra Chrome. Navnet på denne api er chrome.topSites.
Til at begynde med skal vi Chrome Dev Editor og vi skabte vores projekt med navnet TopHistorial og i projekttype vælger vi JavaScript Chrome App -indstillingen.

Så vores fil manifest.json Det skal være som følger:
 {"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Vis liste over de mest sete sider i vores browser", "version": "0.0.1", " minimum_chrome_version ":" 38 "," permissions ": [" topSites "]," browser_action ": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," content_scripts ": [{" matcher ": [" "]," css ": [" assets / bootstrap / css / bootstrap.min.css "]," js ": [" assets / jquery.min.js "," main.js "], "run_at": "document_start"}]} 
Som du kan se, tilføjer vi en ny attribut til manifestet for at kunne få tilladelse til Chrome api: Angiv tilladelser, bruges i de fleste Chrome API'er i din udvidelse, skal du først erklære det ved at placere feltet tilladelser i dit manifest. Hver tilladelse kan være en tekststreng, der tilhører følgende liste (opdelt i 3 billeder):




Angående vores fil popup.html Det skal være som følger:
 Popup MultipleColor
Vores arkiv main.js der vil indeholde api -forespørgslen og håndteringen af ​​klikhændelsen, vil den blive repræsenteret som følger:
 $ (dokument) .ready (funktion () {funktion openpage () {chrome.tabs.create ({url: $ (dette) .attr ("href")});} funktion buildPopupDom (mostVisitedURLs) {for (var i = 0; i <mostVisitedURLs.length; i ++) {$ ("# top_list"). Tilføj ('
' + mostVisitedURLs [i] .title +'
'); } $ (". links"). bind ("klik", openpage); } chrome.topSites.get (buildPopupDom); }); 
På det strukturelle plan skulle vores projekt have været som følger:


Når vi udfører vores udvidelse, vil vi være i stand til at se et ikon øverst i browseren, som i mit tilfælde designer den med blå, når du klikker på den, åbner den en popup med listen over sider, som jeg har haft mest adgang til fra min browser sorteret efter det antal besøg, jeg har foretaget.
FORSTØRRE
Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt