✅ Programmera och skapa tillägg för Chrome

Innehållsförteckning

1. Hur man skapar och programmerar Chrome -tillägg
2. Exempel på tillägg för Chrome

Denna handledning kommer att delas in i tre avsnitt: Ett första avsnitt där vi kommer att förklara olika begrepp angående tillägg i Chrome, deras struktur och grundläggande skapande av ett tillägg. I det andra avsnittet kommer vi att fokusera på att skapa tillägg för den här fantastiska webbläsaren, till exempel Google Chrome, med flera praktiska exempel. Slutligen kommer vi i det tredje avsnittet att förklara avancerade alternativ när du skapar tillägg och hur du publicerar dem i Google Chrome webbutik så att det är tillgängligt för allmänheten.

Vad är tillägg i Google Chrome?Tillägg är små program som kan ändra och förbättra webbläsarens funktionalitet, i det här fallet Chrome. Dessa utvecklas med webbteknik som HTML, Javascript och CSS.

Tilläggen har lite eller inget användargränssnitt. Till exempel visar bilden nedan en ikon för ett hänglås som öppnas ett litet gränssnitt när du klickar på det.

Denna speciella tillägg används för att kryptera och dekryptera dina e -postmeddelanden med en PGP -nyckel. Tillägg är filer som är förpackade i ett, som användaren laddar ner och installerar. Denna förpackning behöver, till skillnad från vanliga webbapplikationer, inte vara beroende av webbinnehåll.

Som diskuterats ovan tillåter tillägg dig att lägga till funktionalitet i Chrome utan att dyka djupt ner i inbyggd kod. Nya tillägg kan skapas med grundläggande teknik som de flesta webbutvecklingsprogrammerare arbetar med: HTML, CSS och Javascript.

1. Hur man skapar och programmerar Chrome -tillägg

Till att börja med kommer vi att göra ett enkelt tillägg som hämtar en bild från Google med webbadressen till den aktuella sidan som en sökterm. Vi kommer att göra detta genom att implementera ett användargränssnittselement som vi kallar chrome.browserAction, som gör att vi kan placera en ikon bredvid krommenyn, som du kan klicka på för snabb åtkomst. Om du klickar på den ikonen öppnas ett popup-fönster med en bild från den aktuella sidan, som kommer att se ut så här:

För att starta vår träning skapar vi en katalog som heter Image_Viewer, inom detta kommer vi att inkludera alla filer som vi ska arbeta med. Som utvecklingsredigerare kan du använda en av dina preferenser, i mitt fall kommer jag att använda Chrome Dev Editor, som du kan ladda ner på följande adress:

Chrome Dev Editor

Det första vi kommer att behöva är att skapa en manifestfil som heter manifest.json. Detta manifest är inget annat än en metadatafil i JSON -format som innehåller egenskaper som namn, beskrivning, versionsnummer för dess tillägg och så vidare. På avancerad nivå kommer vi att använda den för att förklara för Chrome vad tillägget ska göra och vilka behörigheter som krävs för att göra vissa saker.

Manifestfilformatet är följande:

 {// Required "manifest_version": 2, "name": "My Extension", "version": "versionString", // Recommended "default_locale": "es", "description": "A plain text description", " ikoner ": {…}, // Välj en (eller ingen)" browser_action ": {…}," page_action ": {…}, // Valfri" author ": …," automation ": …," background ": {// Rekommenderad "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 ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaa "}]," incognito ":" spänna eller dela "," 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"], " plattformar ": …," plugins ": […]," krav ": {…}," sandlåda ": […]," short_name ":" Kort namn "," signatur ": …," stavningskontroll ": …, "lagring": {"managed_schema": "schema.json"}, "system_indicator":…, "tts_engine": {…}, "update_url": "http: //path/to/updateInfo.xml", "version_name ":" aString "," web_accessible_resources ": […]}

Därefter kommer jag att beskriva funktionen som uppfyller de viktigaste etiketterna:

I obligatorisk:

manifest_version: Det är manifestversionen, den representeras av ett heltal som anger versionen av filformatet. Från och med Chrome 18 måste utvecklare ange nummer 2.

jams: Det är namnet som din tillägg kommer att ha. Detta måste bestå av högst 45 tecken, namnet är huvuddefinitionselementet i tillägget och det är ett obligatoriskt fält. Den visas på följande platser:

a) I installationsboxen.
b) I användargränssnittet där tillägget administreras.
c) I den virtuella Chrome -butiken.

version: Det måste bestå av ett till fyra hela tal åtskilda av punkter som identifierar tilläggets version. Här är några exempel på giltiga versioner:

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

Rekommenderad:

default_locale: Anger underkatalogen för _locales (språk) som innehåller standardsträngarna för detta tillägg. Du måste sätta alla strängar som är synliga för användaren i en fil som kallas messages.json. Varje gång du inkluderar ett nytt språk måste du lägga till en ny fil messages.json under katalogen _locales / localecode där localecode är språkkoden, precis som en är engelska och är för det spanska språket.

Ett exempel på en internationaliserad förlängning med stöd för engelska (en), spanska (r) och koreanska (ko), skulle vara följande:

beskrivning: Den består av en sträng i ren text (utan HTML eller annat format) med högst 132 tecken som beskriver tilläggets funktionalitet.

Ikoner: Låter dig lägga till en eller flera ikoner som representerar tillägget. En ikon på 128 x 128 pixlar ska alltid tillhandahållas. Detta kommer att användas under installationen och i Chrome Web Store. Tillägg måste också innehålla en ikon på 48 x 48, som används på Chrome -tilläggshanteringssidan (krom: // tillägg). Du kan också ange en 16 x 16 -ikon som ska användas som favoritikon för ett tilläggs sidor.

Ikoner bör i allmänhet vara i PNG -format, eftersom det har det bästa stödet för transparens. De kan dock vara i alla format som WebKit stöder, inklusive BMP.webp, GIF.webp, ICO och JPEG.webp. Här är ett exempel på ikonspecifikationen:

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

Exempel

Välj en (eller ingen):

browser_action: Använd browser_action för att placera ikoner i huvudverktygsfältet högst upp i Google Chrome -webbläsaren, till höger om adressfältet. Dessutom kan du lägga till verktygstips (flytande meddelande), märke (flytande text på ikonen) och popup (flytande fönster).

Användningsexempel browser_action:

 {"name": "My extension", … "browser_action": {"default_icon": {// optional "19": "images / icon19.png.webp", // optional "38": "images / icon38.png.webp" // optional}, "default_title": "Google Mail", // optional; visar ett "default_popup" verktygstips: "popup.html" // valfritt}, …}

page_action: Använd detta API för att placera din ikon i adressfältet.

Exempel på användning:

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

Frivillig:

Bakgrund: Ett vanligt behov i tillägg är att ha en enda sida för körning av långa sekvenser för att hantera en uppgif.webpt eller status. Detta är en HTML -sida som körs i samband med tillägget. Det startar när tillägget börjar köra och aktiverar bara en instans av det i taget. Istället för att använda bakgrund rekommenderas att du använder en händelsessida.

I ett typiskt tillägg med en sida i bakgrunden fungerar användargränssnittet, till exempel browser_action eller page_action, och vissa sidalternativ som tilläggets vy. När vyn behöver veta något tillstånd (stängde fönstret, uppdaterade sidan …), skickar det begäran om staten till sidan som finns som bakgrund. När bakgrundssidan meddelar att det har skett en förändring i tillståndet, informerar den vyn som ska uppdateras eller vidta åtgärder.

Dess format är följande:

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

Formatera

Evenemangssidor: Innan du definierar följande attribut är det nödvändigt att förklara vad händelsessidorna handlar om. Ett vanligt behov av applikationer och tillägg är att ha ett enda, långvarigt skript för att hantera någon uppgif.webpt eller stat. Detta är målet med evenemangssidor. Händelsessidor laddas bara vid behov. När det inte aktivt gör något, laddas det ur cacheminnet och frigör minne och andra systemresurser.

Prestandafördelarna är betydande, särskilt på enheter med låg effekt. Det är därför det rekommenderas att använda fler evenemangssidor än bakgrund.

Deklarationen av en händelsessida i manifestfilen skulle vara följande:

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

Som du kan se är skillnaden med bakgrunden det persistenta attributet som kommer att ha falsk status.

chrome_settings_overrides: Det används för att skriva över vissa utvalda konfigurationer i Chrome. Detta API är endast tillgängligt för Windows.

Några av dessa konfigurationer kan vara hemsidan (webbläsarens hemsida, sökleverantör (sökleverantören), etc.

Konfigurationsexempel:

 {"name": "My extension", … "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "keyword ":" sökord .__ MSG_url_domän__ "," search_url ":" http: //www.foo.__MSG_url_domän__/s? q = {searchTerms} "," favicon_url ":" http: //www.foo.__MSG_url_domän__/favicon. ico "," suggest_url ":" http: //www.foo.__MSG_url_domain__/suggest? q = {searchTerms} "," instant_url ":" http: //www.foo.__MSG_url_domän__/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_urldom 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: Den här egenskapen för tillägget används för att skriva över vissa inställningar i Chrome -användargränssnittet. Som till exempel markörerna. Dess konfiguration är följande:

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

I detta fall elimineras stjärnan som webbläsaren har för favoriter.

chrome_url_overrides: Detta är ett sätt att ersätta HTML -filen från tillägget för en sida som Google Chrome -webbläsaren normalt tillhandahåller. Dessutom kan du också skriva över dess CSS- och JavaScript -kod.

Ett tillägg med denna konfiguration kan ersätta en av följande Chrome -sidor:

Bokmärkehanterare: Det är sidan som visas när användaren väljer alternativet från bokmärkeshanteringsmenyn i Chrome -menyn eller för Mac, bokmärkeshanteraren i bokmärkesmenyn.

FÖRSTORA

Historia (historia): Det är sidan som visas när användaren väljer historik från Chrome -menyn eller på Mac visar objektet fullständig historik från menyn som finns i historikalternativet.

FÖRSTORA

Ny flik (ny flik): Det är sidan som visas när användaren skapar en ny flik eller ett fönster från webbläsaren. Du kan också komma åt den här sidan genom att placera följande adress i adressfältet: chrome: // newtab

FÖRSTORA

NoteraEtt enda tillägg kan bara skriva över en sida. Ett tillägg kan till exempel inte skriva över bokmärkena och i sin tur historiksidan.

 {"name": "My extension", … "chrome_url_overrides": {"newtab": "mypage.html" // alternativen är newtab, history, bookmarks},…}

kommandon: Detta kommando -API används för att lägga till kortkommandon som utlöser en åtgärd i ditt tillägg. Till exempel en åtgärd för att öppna webbläsaråtgärden eller skicka ett kommando till tillägget.

 {"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 + Skift + P "," mac ":" Alt + Skift + P "}}},…}

På din bakgrundssida kan du binda en kontroller för vart och ett av kommandona som definieras i manifest.js (förutom '_execute_browser_action'Y'_execute_page_action') via onCommand.addListener.

Till exempel:

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

content_scripts: De är javascript -filer som körs i samband med webbsidor. Genom att använda standard Document Object Model (DOM) kan de läsa informationen om webbsidorna för webbläsarbesöken eller göra ändringar i dem.

 {"name": "Mitt tillägg", … "content_scripts": [{"matches": ["http://www.google.com/*"], "css": ["mystyles.css"], " js ": [" jquery.js "," myscript.js "]}],…}

content_scripts: För att göra våra tillägg säkrare och undvika potentiella skriptproblem på flera platser har Chrome-tilläggssystemet införlivat det allmänna konceptet Content Security Policy (CSP). Detta inför mycket strikta policyer som gör tillägg säkrare som standard. I allmänhet fungerar CSP som en svartvit lista för de resurser som laddas eller körs av dess tillägg.

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

Dessa var några av de viktigaste egenskaperna. För vår första praxis kommer vi att definiera vår manifest.json -fil enligt följande:

 {"manifest_version": 2, "name": "Startexempel", "description": "Detta tillägg visar en bild från Google -bilder av den aktuella sidan", "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 vårt exempelmanifest, deklarerade vi en browser_action, ActiveTab -behörigheten för att se webbadressen till den aktuella fliken och värden fick tillstånd, på så sätt kan du komma åt Googles API för att utföra sökningens externa bilder.

I sin tur hittas två resursfiler när du definierar browser_action: icon.png.webp och popup.html. Båda resurserna måste finnas i tilläggspaketet, så låt oss skapa dem nu:

icon.png.webp Den kommer att visas bredvid multifunktionsboxen och väntar på användarinteraktion. Det är bara en 19px x 19px PNG -fil.

popup.html visas i popup-fönstret som skapas som svar på användarens klick på ikonen. Det är en standard HTML -fil och dess innehåll är enligt följande:

Komma igång Tilläggets popup

FÖRSTORA

2. Se till att kryssrutan för utvecklarläge i det övre högra hörnet är markerad.

3. Klicka på Upload Unzipped (Unpacked) Extension för att öppna en dialogruta för filval.

FÖRSTORA

4. Navigera till katalogen där dina tilläggsfiler finns och välj den.

Alternativt kan du dra katalogen som innehåller ditt projekt och släppa den i fönstret Chrome -tillägg. Detta kommer att ladda tillägget i din webbläsare.

På detta sätt kommer vi att ha gjort en enkel tillägg för Google Chrome. I vår nästa del kommer vi att fördjupa oss i konstruktionen av tillägg i kombination med utvecklingsramar som jquery och Bootstrap, vilket gör att vi kan effektivisera vår utveckling.

2. Exempel på tillägg för Chrome

I det här avsnittet kommer vi att genomföra flera exempel som gör att vi fullt ut kan förstå många av de funktioner som finns när vi bygger ett tillägg för Google Chrome.

Övning 1 - Blå bakgrund
I det här exemplet kommer vi att göra en enkel förlängning där vi lär oss hur vi kan ändra innehållet på sidorna som vi läser in i vår webbläsare. I det här fallet kommer vi att ändra bakgrundsfärgen på den laddade sidan och ändra den till blå.

Som jag förklarade i den första delen av denna handledning kan du använda vilken utvecklings -IDE som helst, i mitt fall kommer jag att använda Chrome Dev Editor.

FÖRSTORA

Till att börja med skapar vi en ny katalog med namnet Blå bakgrund och vi kommer att skapa ett projekt med samma namn.

FÖRSTORA

Inuti kommer vi att skapa vår första fil manifest.json som kommer att innehålla definitionerna av vårt tillägg.

FÖRSTORA

Vårt arkiv manifest.json måste innehålla följande kod:

 {"manifest_version": 2, "name": "Blue Background", "description": "Detta tillägg ändrade bakgrundsfärgen för den aktuella sidan", "version": "1.0", "browser_action": {"default_icon": "icon.png.webp", "default_title": "Gör den här sidan blå"}, "permissions": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false }}

Eftersom vårt tillägg är enkelt kommer det bara att innehålla en ikon som vid tryckning kommer att utföra en åtgärd. Som du kan se i filen manifest.json vi definierar ett namn och dess beskrivning i browser_action Vi definierar ikonen som ska visas i fältet i vår Google Chrome -webbläsare och en titel som visas när muspekaren är placerad över ikonen. När det gäller behörigheter kommer vi att definiera att det bara kommer att göras på den aktiva fliken. Filen som körs i bakgrunden är vår fil bakgrund.js vilket inte kommer att vara beständigt, eftersom det kommer att köras bara när vi klickar på tillägget.

Vi skapar vår ikon och sparar den i projektkatalogen enligt definitionen i manifest.json. I det här fallet i roten till projektet.

Sedan skapar vi en JavaScript -fil som heter bakgrund.js i samma katalog med följande kod:

 // uppringd när användaren klickar på tillägget chrome.browserAction.onClicked.addListener (funktion (flik) {console.log ('Ändrar' + tab.url + 'till blått!'); chrome.tabs.executeScript ({code: ' document.body.style.backgroundColor = "blå" '});});

Lämnar hela projektet enligt följande:

FÖRSTORA

Allt du behöver göra är att trycka på uppspelningsknappen som finns i den övre fältet i Chrome Dev Editor för att köra vårt tillägg.

FÖRSTORA

Genom att trycka på den laddas tillägget automatiskt i webbläsaren Google Chrome.

Låt oss se vår förlängning i aktion, genom att klicka på ikonen jag gjorde (blå bakgrund med bokstaven A i vitt), sidan som jag har laddat i den aktuella fliken, i mitt fall mitt användarkonto i Solvetic (http: // www .solvetic… .berth-ramncgev /) ändrar sin bakgrund till blå. Det bör noteras att endast färgen på BODY -elementet kommer att förändras, och inte DIV: erna, eftersom det är så jag definierade det i min bakgrund.js.

FÖRSTORA

Övning 2 - MultipleColor
I det här exemplet kommer jag att visa hur vi kan effektivisera vårt arbete från utvecklings -IDE och från koden. I Chrome Dev Editor, vi klickar på + -knappen, för att skapa ett nytt projekt, den här gången kommer vi att ändra typ av projekt, välja alternativet JavaScript Chrome App.

FÖRSTORA

Som du ser genererar det automatiskt hela strukturen i vårt projekt. Med vår fil manifest.json med de vanligaste definitionerna.

FÖRSTORA

Till den här filen kommer vi att lägga till en kort beskrivning på etiketten beskrivning placera den text du vill ha, i mitt fall "Tillägg som gör det möjligt att ändra bakgrundsfärg". För detta projekt kommer vi att skapa 2 ikoner, en med 16x16 pixlar och den andra med 128x128 pixlar, som du kan se i strukturen, dessa kommer att sparas i katalogen tillgångar.

Vi kommer att lägga till följande kod under taggen minimum_chrome_version:

 "permissions": ["tabs", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Ändra sidan till flera färger.", " default_popup ":" popup.html "},

Som du ser definierar vi en popup eller vy som innehåller all html som användaren kommer att se när han klickar på vårt tillägg. Sedan lägger vi till följande kod:

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

content_scripts- Innehåller JavaScript (js) och stilark (css) -filer som kommer att köras i samband med webbsidan. Den kan innehålla följande egenskaper:

tändstickor: Obligatoriskt. Specifikt till vilken sida manuset ska injiceras.

exclude_matches: Valfritt. Sidor som kommer att uteslutas så att manuset inte injiceras.

match_about_blank: Valfritt. Det här värdet är booleskt och anger om skriptet kommer att infogas i den tomma sidan (om: tomt och om: srcdoc).

css: Valfritt. Det är ett arrangemang som anger listan över css -filer som kommer att infogas på sidan som begärs i webbläsaren.

js: Valfritt. Det är ett arrangemang med listan över JavaScript -filer som kommer att infogas på den sida som begärs i webbläsaren.

Spring till: Valfritt. Det är en textsträng som styr när js -filerna ska laddas. Dess värde kan vara:
document_start: Filer injiceras efter någon css -fil, men innan någon DOM byggs eller något annat skript körs.

document_end: Filer injiceras omedelbart efter att DOM är klar, men innan några resurser som bilder och ramar laddas.

document_idle: Webbläsaren väljer tid att injicera skript mellan document_end och omedelbart efter att fönstret. Ladda utlöser händelsen. Detta alternativ är det som är konfigurerat som standard.

I slutet av vår fil manifest.json Det ska vara följande:

FÖRSTORA

Som du kan se har vi lagt till ett par nya saker i fastigheten css Vi har definierat Bootstrap -ramverket som inte kommer att göra utvecklingen på stilnivå enklare. Följt på fastigheten js Vi definierar JQUERY JavaScript -biblioteket, vilket inte tillåter oss att på ett snabbare och enklare sätt arbeta allt som har med JavaScript att göra. Vår index.html -fil ska se ut så här:

 Popup MultipleColorRödBlåGrönGul

I index.html -filen gör vi helt enkelt referenser till våra Bootstrap-, Jquery- och main.js -filer. I kroppen definierar vi en bootstrap -behållare med dess divs som kommer att fungera som knappar för de olika färgalternativen.

För main.js-filen använder vi klickhändelsen som kommer att utföras när du trycker på musknappen på varje klass "col-md-12", tar bakgrundsfärgen för det valda elementet och tilldelar det till kroppens kropp sidan. har öppnats. Då kommer händelsen window.close () att köras; som stänger fönstret på vår tillägg. Koden som definieras för main.js är följande:

 $ (dokument) .ready (funktion () {$ (". col-md-12"). klicka (funktion () {var color = $ (detta) .css ("bakgrundsfärg"); chrome.tabs. executeScript (null, {code: "$ ('body'). css ('background-color', '" + color + "')"}); window.close ();});});

Resultatet när vi kör vår tillägg kommer vi att kunna visualisera ikonen som vi har skapat för den i det övre fältet.

Genom att klicka på vårt tillägg visas följande popup:

Och när du väljer ett av alternativen blir resultatet följande:

FÖRSTORA

Övning 3 - Top History
I det här exemplet kommer vi att tillämpa allt som visas ovan, vi kommer att skapa ett tillägg som när vi klickar på det visar det oss en popup med listan över de mest besökta sidorna från vår webbläsare, vilket ger direkt åtkomst till dessa sidor. Det enda annorlunda i det här exemplet är att vi kommer att begära tillstånd från en av Chrome -API: erna för att komma åt de mest visade sidorna från Chrome. Namnet på denna api är chrome.topSites.

Till att börja ska vi Chrome Dev Editor och vi skapade vårt projekt med namnet TopHistorial och i projekttyp väljer vi alternativet JavaScript Chrome App.

Sedan vår fil manifest.json Det ska vara följande:

 {"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Visa lista över de mest visade sidorna i vår webbläsare", "version": "0.0.1", " minimum_chrome_version ":" 38 "," permissions ": [" topSites "]," browser_action ": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," content_scripts ": [{" matchar ": [" "]," css ": [" assets / bootstrap / css / bootstrap.min.css "]," js ": [" assets / jquery.min.js "," main.js "], "run_at": "document_start"}]}

Som du ser lägger vi till ett nytt attribut i manifestet för att kunna få behörighet på Chrome -API: et: Deklarera behörigheter, används i de flesta Chrome API: er i din tillägg, måste du först deklarera det genom att placera fältet behörigheter i ditt manifest. Varje behörighet kan vara en textsträng som tillhör följande lista (indelad i 3 bilder):

Angående vår fil popup.html Det ska vara följande:

 Popup MultipleColor

Vårt arkiv main.js som kommer att innehålla api -frågan och hanteringen av klickhändelsen kommer den att representeras enligt följande:

 $ (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"). Lägg till ('
' + mostVisitedURLs [i] .title +'
'); } $ (". länkar"). bind ("klicka", öppen sida); } chrome.topSites.get (buildPopupDom); });

På strukturell nivå borde vårt projekt ha varit följande:

När vi kör vår tillägg kommer vi att kunna se en ikon högst upp i webbläsaren, som i mitt fall utformar den i blått, när du klickar på den öppnas en popup med listan över sidor som jag har fått mest åtkomst från min webbläsare sorterad efter antalet besök jag har gjort.

FÖRSTORA