Denna tutorial kommer att delas in i tre avsnitt: Ett första avsnitt där vi kommer att förklara flera koncept relaterade till tillägg i Chrome, dess struktur och grundläggande skapandet av en 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, i det tredje avsnittet, förklarar vi avancerade alternativ när du skapar tillägg och hur du publicerar dem i Google Chrome webbshop så att det är tillgängligt för allmänheten.
Vad är tillägg i Google Chrome?
Tillägg är små program som kan modifiera och förbättra webbläsarfunktionen, i detta fall Chrome. Dessa är utvecklade med hjälp av webbtekniker som HTML, Javascript och CSS.
Utvidgningarna har lite eller inget användargränssnitt. Till exempel visar bilden nedan en ikon för ett lås som, när du klickar på, öppnar ett litet gränssnitt.
Det här tillägget används för att kryptera och dekryptera dina e-postmeddelanden med PGP-nyckeln. Tillägg är filer som är paketerade i en, som användaren laddar ner och installerar. Denna förpackning, till skillnad från vanliga webbapplikationer, behöver inte bero på webbinnehåll.
Som tidigare nämnts tillåter tillägg dig att lägga till funktionalitet i Chrome utan att fördjupa dig djupt i inbyggd kod. Du kan skapa nya tillägg med basteknologier som vi mest arbetar med i webbutvecklingsprogrammerare: 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 Google-bild med URL-adressen för den aktuella sidan som en sökterm. Vi gör detta genom att implementera ett användargränssnittselement som vi kallar chrome.browserAction, som gör att vi kan placera en ikon bredvid chrome-menyn, som du kan klicka på för snabb åtkomst. När du klickar på den ikonen öppnas ett popup-fönster som kommer att innehålla en bild erhållen från den aktuella sidan som kommer att se ut så här:
För att börja vår övning kommer vi att skapa en katalog som heter Image_Viewer, inom detta kommer vi att inkludera alla filer som vi kommer att arbeta med. Som utvecklingsredaktör kan du använda den du väljer, 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, versionnummer för dess tillägg och så vidare. På en avancerad nivå kommer vi att använda den för att berätta för Chrome vad tillägget kommer att göra och vilka behörigheter som krävs för att göra vissa saker.
Manifestfilformatet är som följer:
{// Obligatorisk "manifest_version": 2, "name": "Min tillägg", "version": "versionString", // Rekommenderad "default_locale": "är", "description": "En enkel textbeskrivning", " ikoner ": {...}, // Välj en (eller ingen)" browser_action ": {...}, " page_action ": {...}, // Valfri" författare ": ..., " automatisering ": ..., " background ": {// Rekommenderas" persistent ": false}, " background_page ": ..., " chrome_settings_overrides ": {...}, " chrome_ui_overrides ": {" bookmarks_ui ": {" remove_bookmark_shortcut ": true, " remove_button ": true}}, " chrome_url_overrides ": {...}, " kommandon ": {...}, " 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, " källa ":" nätverk "}, " homepage_url ":" http: // sökväg / till / hemsida ", " import ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa "}], " incognito ":" spanning eller split ", "input_components": ..., "key": "publicKey", "minimum_chrome_version": "versionString", "nacl_modules": [...], "oauth2": ..., "offline_enabled": true, "omnibox ": {" nyckelord ":" aString "}, " optional_permissions ": [" flikar "], " options_page ":" option.html ", " options_ui ": {" chrome_style ": true, " page ":" alternativ. html "}, " permissions ": [" flikar "], " plattformar ": ..., " plugins ": [...], " krav ": {...}, " sandlåda ": [... ], "short_name": "Short Name", "signatur": ..., "spellcheck": ..., "storage": {"managed_schema": "schema.json"}, "system_indicator": ..., "tts_engine": {...}, "update_url": "http: //path/to/updateInfo.xml", "version_name": "aString", "web_accessible_resources": [...]} Nästa kommer jag att beskriva funktionen som uppfyller de viktigaste etiketterna:På begäran:
- manifest_version: Det är manifestversionen, det representeras av ett heltal som anger versionen av filformatet. Från Chrome 18 måste utvecklare ange nummer 2.
- namn: Det är namnet som din tillägg kommer att ha. Detta måste vara högst 45 tecken, namn är huvudelementet i definitionen av tillägget och är ett obligatoriskt fält. Det visas på följande platser:
a) I installationsrutan.
b) I användargränssnittet där tillägget hanteras.
c) I den virtuella Chrome-butiken.
- version: Det måste bestå av ett till fyra hela siffror separerade med perioder som identifierar versionen av tillägget. Detta är några av exemplen på giltiga versioner:
"version 1"
"Version": "1.0"
"Version": "2.10.2"
"Version": "3.1.2.4567"
rekommenderat:
- default_locale: Anger underkatalogen för _local (språk) som innehåller standardsträngarna för detta tillägg. Du måste placera alla strängar som är synliga för användaren i en fil som heter meddelanden.json. Varje gång du inkluderar ett nytt språk måste du lägga till en ny meddelanden.json- fil under katalogen _locales / localecode där localecode är språkkoden, som på engelska och är för det spanska språket.
Ett exempel på en internationaliserad förlängning med stöd för engelska (sv), spanska (es) och koreanska (ko) skulle vara följande:
- beskrivning: Inkluderar en vanlig textsträng (inget HTML eller annat format) med högst 132 tecken som beskriver tilläggets funktionalitet.
- Ikoner: Lägg till en eller flera ikoner som representerar tillägget. Du bör alltid ange en 128x128px-ikon. Detta kommer att användas under installationen och i Chrome Web Store. Tillägg måste också innehålla en 48x48-ikon, som används på Chrome-tilläggshanteringssidan (chrome: // extensions). Du kan också ange en 16x16-ikon som ska användas som favicon för sidans tillägg.
Ikonerna bör i allmänhet vara i PNG-format, eftersom de har det bästa stödet för transparens. De kan dock vara i vilket format som helst som är kompatibla med WebKit, inklusive BMP, GIF, ICO och JPEG. Här är ett exempel på ikonspecifikationen:
"ikoner": {"16": "icon16.webp", "48": "icon48.webp", "128": "icon128.webp"}, exempelVälj en (eller ingen):
- browser_action: Använd browser_action för att sätta ikoner i huvudverktygsfältet högst upp i Google Chrome webbläsare, till höger om adressfältet. Dessutom kan du lägga till verktygstips (flytande meddelande), badge (flytande text på ikonen) och popup (flytande fönster).
Exempel på användning av browser_action:
{"name": "Min tillägg", ... "browser_action": {"default_icon": {// option "19": "images / icon19.webp", // optional "38": "images / icon38. png "// optional}, " default_title ":" Google Mail ", // optional; visa ett verktygstips "default_popup": "popup.html" // valfritt}, ...} - page_action: Använd detta API för att placera din ikon i adressfältet.
Exempel på användning:
{"name": "Min tillägg", ... "page_action": {"default_icon": {// option "19": "images / icon19.webp", // optional "38": "images / icon38. png "// optional}, " default_title ":" Google mail ", // optional; visas i beskrivningen "default_popup": "popup.html" // valfritt}, ...} t.ex.valfritt:
- Bakgrund: Ett vanligt behov i tillägg är att ha en enda sida för exekvering av långa sekvenser för att hantera någon uppgift eller tillstånd. Detta är en HTML-sida som körs i samband med tillägget. Det börjar i början av tilläggsutförandet och aktiverar bara en instans av den i taget. Det rekommenderas att använda en händelsessida istället för att använda bakgrund.
I ett typiskt tillägg med en sida i bakgrunden fungerar användargränssnittet till exempel, webbläsarens handling eller sida_aktion och vissa sidalternativ som vyn på tillägget. När vyn behöver känna till någon status (stängde fönstret, uppdaterade sidan
), detta gör statens begäran till den sida som finns som bakgrund. När bakgrundssidan meddelar att det skedde en förändring i statusen, informerar den vyn så att den uppdateras eller utför någon åtgärd.
Formatet är som följer:
{"name": "Min tillägg", ... "background": {"scripts": ["background.js"]}, ...} format - Händelsessidor: Innan du definierar följande attribut är det nödvändigt att förklara vad händelsessidorna handlar om. Ett vanligt behov för applikationer och tillägg är att ha ett enda, länge kört skript för att hantera någon uppgift eller tillstånd. Detta är syftet med evenemangssidorna. Händelsessidor laddas endast när de behövs. När den inte aktivt gör något laddas den ner från cachen, frigör minne och andra systemresurser.
Prestandafördelarna är betydande, särskilt i enheter med låg effekt. Det är därför det rekommenderas att använda fler sidor med händelser än bakgrund.
Förklaringen av en händelsessida i manifestfilen skulle vara följande:
{"name": "Min tillägg", ... "bakgrund": {"scripts": ["eventPage.js"], "persistent": false}, ...} Som du kan se skillnaden det har med bakgrund är det ihållande attributet, som kommer att ha som falsk status. - chrome_settings_overrides: Används för att skriva över alla inställningar som valts i Chrome. Detta API är bara tillgängligt för Windows.
Några av dessa inställningar kan vara hemsidan (webbläsarens hemsida, sökleverantör (sökleverantören) etc.
Konfigurationsexempel:
{"name": "Min tillägg", ... "chrome_settings_overrides": {"hemsida": "http://www.homepage.com", "search_provider": {"name": "namn .__ MSG_url_domain__", " nyckelord ":" sökord .__ 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_urt" instant_lang = __ MSG_url_domain__ ", " image_url_post_params ":" image_lang = __ MSG_url_domain__ ", " alternate_urls ": [" http: //www.moo.__MSG_url_domain__/s? q = {searchTerms} ", " http: //wwW.nm / s? q = {searchTerms} "], " koding ":" UTF-8 ", " is_default ": true}, " startup_pages ": [" http: // www .startup.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 för Chrome-användargränssnitt. Såsom markörer. Konfigurationen är som följer:
{"name": "Min tillägg", ... "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}}, ...} I detta fall skulle stjärnan som webbläsaren har för favoriterna tas bort. - chrome_url_overrides: Detta är ett sätt att ersätta HTML-filen från tillägget för en sida som normalt tillhandahålls av Google Chrome-webbläsaren. Dessutom kan du skriva över dess CSS- och JavaScript-kod.
Ett tillägg med den här inställningen kan ersätta en av följande Chrome-sidor:
- Bokmärkehanterare: Det här är den sida som visas när användaren väljer alternativet för menyn Bokmärkehanterare i Chrome-menyn eller för Mac, bokmärkehanteringsobjektet i menyn Bokmärken.
- Historik (historik): Det här är den sida som visas när användaren väljer historik från Chrome-menyn eller, på Mac, objektet visar fullständig historik från menyn som finns i historikalternativet.
- Ny flik (newtab): Det här är den sida 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
notera
En enda tillägg kan bara skriva över en sida. Tillägg kan till exempel inte skriva över bokmärken och i sin tur historiksidan.
{"name": "Min tillägg", ... "chrome_url_overrides": {"newtab": "mipagina.html" // alternativen är newtab, historik, bokmärken}, ...} - kommandon: Det här kommandot API används för att lägga till kortkommandon som utlöser en åtgärd på ditt tillägg. Till exempel en åtgärd för att öppna webbläsarhandlingen eller skicka ett kommando till tillägget.
{"name": "Min tillägg", ... "kommandon": {"toggle-feature-foo": {"suggest_key": {"default": "Ctrl + Shift + Y", "mac": "Kommando + Shift + Y "}, " description ":" Växla funktionen foo "}, " _execute_browser_action ": {" suggest_key ": {" windows ":" Ctrl + Shift + Y ", " mac ":" Kommando + Shift + Y ", " jokes ":" 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 bakgrundsida kan du länka en controller för vart och ett av de kommandon som definieras i manifest.js (med undantag för ' _execute_browser_action ' och ' _execute_page_action ') via onCommand.addListener .$config[ads_text5] not foundTill exempel:
chrome.commands.onCommand.addListener (funktion (kommando) {console.log ('Kommando tryckt:', kommando);}); - content_scripts: Det här är javascript-filer som körs i samband med webbsidor. Genom att använda standarden Document Object Model (DOM) kan de läsa detaljerna på webbsidorna i webbläsarens besök eller göra ändringar i dem.
{"name": "Min tillägg", ... "content_scripts": [{"matchar": ["http://www.google.com/*"], "css": ["mystyle.css"], "js": ["jquery.js", "myscript.js"]}], ...} - content_scripts: För att göra våra tillägg säkrare och undvika eventuella problem med skript på flera webbplatser har Chrome-förlängningssystemet införlivat det allmänna konceptet för Content Security Policy (CSP) . Detta introducerar mycket strikta policyer som gör tillägg säkrare som standard. I allmänhet fungerar CSP som en mekanism för svartvita listor för resurser som laddas eller körs av deras tillägg.
{..., "content_security_policy": "script-src 'self' https://example.com; object-src 'self'" ...} Dessa var några av de viktigaste attributen. För vår första praxis kommer vi att definiera vår manifest.json-fil enligt följande: {"manifest_version": 2, "name": "Exempel på start", "beskrivning": "Det här tillägget visar en Google-bild av den aktuella sidan", "version": "1.0", "browser_action": {" default_icon ":" icon.webp ", " default_popup ":" popup.html "}, " behörigheter ": [" activeTab ", " https://www.googleapis.com/ "]} Som du kan se i vårt provmanifest förklarar vi en browser_action, den aktiva Tab-behörigheten för att se URL-adressen för den aktuella fliken och värden fick tillstånd, så du kan komma åt Google API för att utföra sökningen av externa bilder.$config[ads_text6] not foundI sin tur finns det två resursfiler när du definierar browser_action: icon.webp och popup.html. Båda resurserna måste finnas i tilläggspaketet, så låt oss skapa dem nu:
- icon.webp visas bredvid multifunktionsrutan, väntar på användarens interaktion. 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 som följer:
Komma igång Extensions pop-up-organ {font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif; typstorlek: 100%; } #status {/ * undvika en alltför bred statustext * / white-space: pre; text-overflow: ellipsis; översvämning: dold; maxbredd: 400 px; }![]()
Den verkliga logiken för att bygga popup-fönsterinnehåll implementeras av popup.js . Dess innehåll kommer att vara följande: / ** * Hämta den aktuella URL: en. * @param {funktion (sträng)} återuppringning - kallas när URL för den aktuella fliken hittas * / funktion getCurrentTabUrl (återuppringning) {// Frågefilter som kommer att skickas till chrome.tabs.query - se: // https: //developer.chrome.com/extensions/tabs#method-query var queryInfo = {active: true, currentWindow: true}; chrome.tabs.query (queryInfo, funktion (flikar) är inte en tom matris. // Ett fönster kan bara ha en flik aktiv åt gången, så fixen är // exakt en flik. var tab = tabs [0] ; // En flik är ett platt objekt som innehåller information om fliken. // Se https://developer.chrome.com/extensions/tabs#type-Tab var url = tab.url; console.assert (typof url = = 'string', 'tab.url ska vara en sträng'); callback (url);); // De flesta API-metoder för Chrome-förlängning är asynkrona. Det betyder att // du inte kan göra något så här: // // var url; // chrome.tabs.query (frågaInfo, funktion (flikar) {// url = flikar [0] .url; //}); // varning (url); // Den visar "odefinierad", eftersom chrome.tabs.query är asynkron. } / ** * @param {string} searchTerm - Söktermer för Google Bildsökning. * @param {funktion (sträng, nummer, nummer)} återuppringning - Ring när en bild hittades. Återuppringningen får URL: en, bildens bredd och höjd. * @param {function (string)} errorCallback - Ring när bilden inte hittas. * Återuppringningen får en sträng med orsakerna till att den misslyckades. * / Funktion getImageUrl (SEARCH, återuppringning, errorCallback) {var searchUrl = '' https://www.googleapis.com/customsearch/v1?cx=017923793791201738471%3A4nh2tpzikma&imgColorType=color&imgSize=medium&num=1&searchType=image&start=1&key=AIzaSyDcNC3g_HDSY8rHhBLFuqXbqqslQyjSgW4&q= ' + kodURURIComponent (searchTerm); var x = new XMLHttpRequest (); x.open ('GET', searchUrl); x.responseType = 'json'; x.onload = funktion () {var response = x.response; if (! svar ||! respons.items || response.items.length === 0) {errorCallback ('Inget svar från Google Image search!'); återvända; } var firstResult = response.items [0] .image; var imageUrl = firstResult.tattnailLink; var bredd = parseInt (firstResult.tattnailWidth); var höjd = parseInt (firstResult.tattnailHeight); console.assert (typeof imageUrl == 'string' &&! isNaN (bredd) &&! isNaN (höjd), 'Oväntad respos från Google Image Search API!'); återuppringning (imageUrl, bredd, höjd); }; x.onerror = funktion () {errorCallback ('Network error.'); }; x.send (); } funktion renderStatus (statusText) {document.getElementById ('status'). textContent = statusText; } document.addEventListener ('DOMContentLoaded', funktion () {getCurrentTabUrl (funktion (url) {// Sätter URL-bilden i Google-sökning. renderStatus ('Utför Google Image-sökning efter' + url); getImageUrl (url, funktion (imageUrl, bredd, höjd) {renderStatus ('Söktermin:' + url + '\ n' + 'Google-bildresultat:' + imageUrl); var imageResult = document.getElementById ('image-result'); imageResult. bredd = bredd; imageResult.height = höjd; imageResult.src = imageUrl; imageResult.hidden = false;}, funktion (errorMessage) {renderStatus ('Kan inte visa bild.' + errorMessage);});});}); De borde nu ha fyra filer i arbetskatalogen: Icon.webp, manifest.json, popup.html och popup.js. Nästa steg är att ladda upp filerna till Chrome.Ladda Chrome-tillägget
Tillägg som laddas ner från Chrome Web Store paketeras som .crx-filer . Vilket är perfekt för distribution, men inte för utveckling. Genom att erkänna detta ger Chrome dig ett snabbt sätt att ladda din arbetskatalog för testning. Detta görs enligt följande:
1. Besök chrome: // extensions i din webbläsare eller öppna Chrome-menyn genom att klicka på ikonen till höger om Omnibox: Menyikonen är tre horisontella staplar. Och välj Tillägg i alternativet Mina verktyg för att komma till samma plats.
2. Se till att kryssrutan för utvecklarläget i det övre högra hörnet är markerat.
$config[ads_text5] not found
3. Klicka på Load unzipped extension (unpackaged) för att visa en dialogbok för filval.
4. Bläddra till katalogen där dina förlängningsfiler finns och välj den.
Alternativt kan du dra katalogen som innehåller ditt projekt och släppa det över Chrome-tilläggsfönstret. Detta kommer att ladda tillägget i din webbläsare.
På detta sätt kommer vi att ha gjort en enkel förlängning för Google Chrome. I vår nästa del kommer vi att fördjupa konstruktionen av tillägg tillsammans med utvecklingsramar som jquery och Bootstrap, vilket gör att vi kan påskynda vår utveckling.
2. Exempeltillägg för Chrome
I det här avsnittet kommer vi att gö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 ett enkelt tillägg där vi kommer att lära oss hur vi kan ändra innehållet på sidorna som vi laddar i vår webbläsare. I detta fall kommer vi att ändra bakgrundsfärgen på den laddade sidan och ändra den till den blå färgen.
Som jag förklarade i den första delen av denna självstudie kan du använda valfri utvecklings-IDE, i mitt fall kommer jag att använda Chrome Dev Editor.
För att starta kommer vi att skapa en ny katalog med namnet Blå bakgrund och skapa ett projekt med samma namn.
Inuti skapar vi vår första manifest.json- fil som kommer att innehålla definitionerna av vårt tillägg.
Vår manifest.json- fil måste innehålla följande kod:
{"manifest_version": 2, "name": "Blå bakgrund", "beskrivning": "Det här tillägget ändrade bakgrundsfärgen på den aktuella sidan", "version": "1.0", "browser_action": {"default_icon" : "icon.webp", "default_title": "Gör denna sida blå"}, "behörigheter": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false}} Eftersom vårt tillägg är enkelt kommer det bara att innehålla en ikon som när du trycker på den kommer att utföra en åtgärd. Som du kan se i manifest.json- filen definierar vi ett namn och dess beskrivning, i webbläsarens handling definierar vi ikonen som kommer att visas i fältet i vår Google Chrome-webbläsare och en titel som kommer att visas när muspekaren placeras på den ikonen. När det gäller behörigheter kommer vi att definiera vad som bara kommer att göras på den aktiva fliken. Filen som kommer att köras i bakgrunden är vår fil background.js som inte kommer att vara bestående, eftersom den kommer att köras endast när vi klickar på tillägget.$config[ads_text5] not foundVi 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 background.js i samma katalog med följande kod:
// kallas när användaren klickar på chrome.browserAction.onClicked.addListener (funktion (flik) {console.log ('Ändra' + tab.url + 'till blått!') förlängning; chrome.tabs.executeScript ({ kod: 'document.body.style.backgroundColor = "blå"'});}); Återstod hela projektet enligt följande:
För att köra vårt tillägg trycker du bara på uppspelningsknappen i översta fältet i Chrome Dev Editor.
När du trycker på den laddas tillägget automatiskt i Google Chrome-webbläsaren.
Låt oss se vårt tillägg i aktion, genom att klicka på ikonen jag skapade (blå bakgrund med tom bokstav A), den sida jag har laddat i den nuvarande fliken, i mitt fall mitt användarkonto i Solvetic (//www.solvetic .... kaj-ramncgev /) kommer att ändra bakgrunden till blå. Det bör noteras att endast färgen på BODY-elementet kommer att förändras och inte DIV: erna som det innehåller, eftersom det på det här sättet var att jag definierade det i min background.js .
Övning 2 - MultipleColor
I det här exemplet kommer jag att visa hur vi effektiviserar vårt arbete från utvecklings-IDE och från koden. I Chrome Dev Editor klickar vi på + -knappen för att skapa ett nytt projekt, den här gången kommer vi att ändra typ av projekt genom att välja JavaScript Chrome App- alternativet.
Som ni ser genererar det automatiskt hela projektets struktur. Med vår filmanifest.json med de vanligaste definitionerna.
Till den här filen lägger vi till en kort beskrivning i beskrivningstaggen genom att placera den text du vill ha, i mitt fall "Tillägg som låter dig ändra bakgrundsfärgen". För detta projekt kommer vi att skapa två ikoner, en av 16x16 pixlar och en annan på 128x128 pixlar, som du kan se i strukturen kommer dessa att sparas i tillgångskatalogen .
$config[ads_text5] not foundVi lägger till följande kod under taggen minimum_chrome_version :
"permissions": ["flikar", "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 kommer att innehålla 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": ["tillgångar / bootstrap / css / bootstrap.min.css"], "js": ["tillgångar / jquery.min.js", "main.js"], "run_at": "document_start"}] content_scripts : innehåller JavaScript-filer (js) och stilark (css) som kommer att köras i samband med webbsidan. Detta kan innehålla följande egenskaper: - matchningar : Krävs. Ange till vilken sida skriptet kommer att injiceras.
- exclude_matches : Valfritt. Sidor som kommer att uteslutas så att manuset inte injiceras.
- match_about_blank : Valfritt. Detta värde är booleskt och indikerar om skriptet ska infogas på 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å den begärda sidan 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.
- run_at : 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 resurser som bilder och ramar laddas.
- document_idle : Webbläsaren väljer tid att injicera skript mellan document_end och omedelbart efter att windows.onload utlöser händelsen. Detta alternativ är det som är inställt som standard.
I slutet av vårt filmanifest bör.json vara följande:
Som ni ser har vi lagt till ett par nya saker, i css- egenskapen har vi definierat Bootstrap-ramverket som inte kommer att underlätta utvecklingen på stilnivå. Fortsätter vi i egenskapen js, definierar vi JQUERY JavaScript-biblioteket som inte tillåter att allt som har med JavaScript att arbeta på ett snabbare och enklare sätt. Vår index.html-fil ska vara följande:
Popup MultipleColor body {overflow: dold; marginal: 0px; stoppning: 0px; bakgrund: vit; } div: första barn {margin-top: 0px; } div {markör: pekare; text-align: center; typstorlek: 1em; bredd: 100px; margin-top: 1px; bakgrund: #cccccc; färg: #fff; } # röd {bakgrund-färg: röd; } #blå {bakgrundsfärg: blå; } #verde {bakgrund-färg: grön; } #amarillo {bakgrundsfärg: gul; färg: # 000; }röd
blå
grön
gul
För main.js-filen kommer vi att använda klickhändelsen som kommer att exekveras vid tidpunkten för att trycka på musknappen på varje klass “col-md-12” med bakgrundsfärgen på det element som valts och tilldela det till sidan på sidan som Det har varit öppet. Sedan körs händelsen windows.close (); som stänger fönstret i vår tillägg. Koden som definieras för main.js är följande:
$ (dokument). redan (funktion () {$ (". col-md-12"). klicka (funktion () {var color = $ (detta) .css ("bakgrund-färg"); chrome.tabs. executeScript (null, {kod: "$ ('body'). css ('bakgrund-färg', '" + färg + "')"}); windows.close ();});}); Resultatet när vi kör vårt tillägg kan vi visualisera ikonen som vi har skapat för den i den övre fältet.
Om du klickar på vårt tillägg visas följande popup:
Och när du väljer ett av alternativen blir resultatet följande:
Övning 3 - Topphistoria
I det här exemplet kommer vi att tillämpa allt sett ovan, vi kommer att skapa en tillägg som när vi klickar på den visar oss en popup med listan över de mest besökta sidorna från vår webbläsare, vilket ger direkt tillgång till dessa sidor. Det enda som skiljer sig i det här exemplet är att vi kommer att begära tillåtelse från en av Chrome-apisna för att få tillgång till de mest visade sidorna från Chrome. Namnet på denna api är chrome.topSites .
$config[ads_text5] not foundFör att börja går vi till Chrome Dev Editor och skapar vårt projekt med namnet TopHistorial och i den typ av projekt väljer vi alternativet JavaScript Chrome App.
Då ska vår manifest.json- fil vara följande:
{"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Visa lista med mest visade sidor i vår webbläsare", "version": "0.0.1", " minimum_chrome_version": "38", "permissions": ["topSites"], "browser_action": { "default_icon": "icon.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" } ] } Como pueden ver agregamos una nueva atributo al manifiesto para poder obtener permiso sobre el api de Chrome: Declarar Permisos, se utiliza en la mayoría de las API de Chrome en tu extensión, previamente debes declararla colocando el campo permissions en tu manifiesto. Cada permiso puede ser una cadena de texto perteneciente a la siguiente lista (Dividido en 3 imágenes):
Con respecto a nuestro archivo popup.html deberá de quedar de la siguiente manera:
Popup MultipleColor body{ overflow: hidden; marginal: 0px; stoppning: 0px; background:#000; färg: #fff; font-family: 'Lato', sans-serif; } .container{ width:400px; background-color:#000; färg: #fff; line-height: 25px; } .container a{ color:#fff; } .container a:hover{ color:yellow; text-decoration: overline underline; }Mas vistas:
Nuestro archivo main.js que contendrá la consulta del api y el manejo del evento clic, se representara de la siguiente manera: $(document).ready(function(){ function abrirpagina() { chrome.tabs.create({ url: $(this).attr("href") }); } function buildPopupDom(mostVisitedURLs) { for (var i = 0; i < mostVisitedURLs.length; i++) { $("#lista_top").append(' 
Al ejecutar nuestra extensión podremos ver un icono en la parte superior del navegador, que en mi caso lo diseñe de color azul, al hacer clic sobre él, me abre un popup con el listado de las paginas a la que más he accedido desde mi navegador ordenados por el número de visitas que he hecho.
- 0
Artikel