Så här skapar du Chrome Extensions från början

Om du vill lägg till eller ändra vissa funktioner i Google Chrome måste du använda en tillägg. Även om du kan hämta en förlängning från Chrome Web Store, men ibland behöver du en specifik funktionalitet som du inte hittar i någon existerande fil.

Jo, den goda nyheten är att du kan skapa din egen förlängning för att lägga till eller ändra nödvändig funktionalitet eller skapa en ny tillägg eller app för Google Chrome, som du senare kan distribuera till andra användare använder Chrome Web Store.

I det följande ska jag visa dig enklaste sättet att skapa en förlängning. Om du har någon kunskap om webbutveckling (HTML, CSS och JS), kommer du att känna dig som hemma. Om inte, se först på dessa kanaler till lära grunderna i webbutveckling, fortsätt sedan nedan.

förutsättningar

Du måste ha följande krav klar innan du börjar med denna handledning.

1. Du måste vara bekant med HTML, CSS och JavaScript. [Kontrollera resurser]
2. Du måste ha en kodredigerare att skriva förlängningen. [Jämför redaktörer]
3. (Valfritt) Om du vill distribuera ditt tillägg till andra användare måste du ha en utvecklare konto på Chrome Web Store. [Skapa ett konto]

Notera: Google ber dig att betala en liten avgift för att skapa ett utvecklarkonto i Chrome Web Store.

Skapa en förlängning

I denna handledning kommer jag att dela processen med att skapa en till-förlängning för Google Chrome. Det kommer att vara ett verktyg (som visat nedan) för att visa väsentliga komponenter och förmågor som tillhandahålls till förlängningarna.

1. Hämta en mall

Google Chrome, som någon annan plattform, kräver det förlängningar för att ha en uppsättning struktur, vilket kan tyckas komplicerat för nybörjare. Det är därför det är bra att få en panna för en förlängning som ger alla nödvändigheter.

Extensionizr är den bästa boilerplattgeneratorn för kromförlängningar. Det låter dig välja en av de angivna filtyperna - webbläsaråtgärd (en åtgärd för alla sidor eller webbläsaren), sida åtgärd (en åtgärd för den aktuella sidan), eller dold förlängning (en bakgrundsaktivitet som vanligen är dold i frontgränssnittet).

Dessutom ger det olika finjusteringsalternativ till Inkludera / uteslut nödvändiga tillägg, behörigheter, etc. Du måste välja “Webbläsaråtgärd” som förlängningstyp och “Ingen bakgrund” som bakgrundssida för denna handledning.

När du är klar väljer du alternativen för att skapa ditt exempelförlängning, tryck på “Ladda ner det!” knappen i Extensionizr. Till sist, extrahera arkivet (.zip) till en katalog och öppna kodredigeraren för att börja skriva tillägget.

2. Koda förlängningen

När du har hämtat och extraherat mallen ser du en katalogstruktur enligt bilden nedan. Mallen är snyggt organiserad, och du måste veta att den viktigaste filen är “manifest.json“.

Låt oss lära känna andra filer och mappar i den här katalogen:

1. _locales: Det är vanligt lagra språkinformation för en flerspråkig app.
2. css: Den fungerar för att lagra tredje part-bibliotek som Bootstrap 4.
3. ikoner: Den är utformad för att ha ikoner för din förlängning i olika storlekar.
4. js: Det är praktiskt att spara tredjeparts back-end-bibliotek som jQuery 3.
5. src: Den lagrar den faktiska koden som du ska skriva för din förlängning.

manifest.json

Den innehåller grundläggande metadata om din app, som definierar din apps detaljer till webbläsaren. Du kan redigera det för att ange ditt anknytnings namn, beskrivning, webbplats, ikon, etc. tillsammans med detaljer som webbläsaråtgärder och behörigheter.

Till exempel i underkoden kommer du märka att jag ändrade namn, beskrivning och hemsida_url tillsammans med default_title under browser_action. Dessutom, jag Lagt till “lagring” under behörigheter eftersom vi behöver lagra data i vår förlängning.

 "name": "Todoizr - Förenklad", "version": "0.0.1", "manifest_version": 2, "beskrivning": "Enkel att göra app för alla.", "homepage_url": " https://go.aksingh.net/todoizr "," ikoner ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" ikoner / icon128 . "default_popup": "src / browser_action / browser_action.html "," behörigheter ": [" storage "] 

src \ browser_action

Den här katalogen kommer att hålla koden för webbläsaråtgärd. I vårt fall kommer vi att koda popup-fönstret visas genom att klicka på tilläggets ikon i webbläsaren. Vår förlängning tillåter användare att lägga till och visa att göra saker i popup-fönstret.

Notera: Du kan alltid hoppa med koden genom att klona det här förrådet.

Initial kod från mallen

Även om den här katalogen bara hade en HTML-fil med all kod, har jag bestämt mig för att dela upp den i tre separata filer för bättre klarhet. Det sagt, HTML-filen heter “browser_action.html” har nu följande kod:

Dessutom är stilfilen heter “browser_action.css” har nedanstående innehåll medan JavaScript-filen heter “browser_action.js” är tom för nu.

 #mainPopup padding: 10px; höjd: 200px; bredd: 400px; fontfamilj: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2em;  

Skapa popupens gränssnitt

Efter att ha inrättat det ursprungliga projektet, låt oss först designa gränssnittet för popupen. jag har konfigurera gränssnittet med en minimalistisk inställning, Visar namnet högst följt av ett formulär för att lägga till objekt och ett område nedan för att visa de tillagda objekten. Det är inspirerat av den enkla designen av “Form Style 5“.

I koden nedan har jag lagt till två divs - en för att visa formuläret för att lägga till en åtgärdsobjekt och den andra för att visa listan över redan tillagda objekt. Det sagt, den nya koden för “browser_action.html” enligt följande:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

Och stilfilen “browser_action.css” har nu följande kod:

 @import url ("./form_style_5.css"); #mainPopup höjd: 200px; bredd: 300px; fontfamilj: Helvetica, Ubuntu, Arial, sans-serif;  / * Åtgärdsformulär * / .form-style-5 margin: auto; vaddering: 0px 20px;  .form-style-5: första barnet background: none;  .form-style-5 h1 färg: # 308ce3; typsnittstorlek: 20px; text-align: center;  .form-style-5 input [typ = "text"] bredd: auto; flyta till vänster; margin-bottom: unset;  .form-style-5 input [typ = "knapp"] bakgrund: # 308ce3; bredd: auto; float: right; vaddering: 7px; gränsen: ingen; gränsstråle: 4px; typsnittstorlek: 14px;  .form-style-5 input [typ = "button"]: svävar bakgrund: # 3868d5;  / * Att göra objektlista * / .form-style-5: sista barnet höjd: ärv; marginal-botten: 5px;  .form-style-5 ul vaddering: 20px;  .form-style-5 ul li font-size: 14px;  

Slutligen, den tredje partens stilfil “form_style_5.css” har nedanstående innehåll. Det är helt enkelt taget från sin hemsida för att inspirera utformningen av vår förlängning.

 / * Form Style 5 av Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 maxbredd: 500px; vaddering: 10px 20px; bakgrund: # f4f7f8; marginal: 10px auto; vaddering: 20px; bakgrund: # f4f7f8; gränsstråle: 8px; font-family: Georgia, "Times New Roman", Times, Serif;  .form-style-5 fieldset border: none;  .form-style-5 legend font-size: 1.4em; marginal-botten: 10px;  .form-style-5 label display: block; marginalbotten: 8px;  .form-style-5 inmatning [typ = "text"], .form-style-5 inmatning [typ = "date"], .form-style-5 input [typ = "datetime"] -5 ingång [typ = "email"], .form-style-5 inmatning [typ = "number"], .form-style-5 inmatning [type = "search"], .form-style-5 inmatning = "time"], .form-style-5 input [typ = "url"], .form-style-5 textarea, .form-style-5 välj font-family: Georgia, Times New Roman ", Times , serif; bakgrund: rgba (255,255,255, .1); gränsen: ingen; gränsstråle: 4px; typsnittstorlek: 16px; marginal: 0; kontur: 0; vaddering: 7px; bredd: 100%; box-dimensionering: gränsvärde; -webkit-box-dimensionering: gränslåda; -moz-box-size: border-box; bakgrundsfärg: # e8eeef; color: # 8a97a0; -webkit-box-skugga: 0 1px 0 rgba (0,0,0,0,03) inset; boxskugga: 0 1px 0 rgba (0,0,0,0,03) inset; marginalbotten: 30px;  .form-style-5 input [typ = "text"]: fokus, .form-style-5 input [typ = "date"]: fokusera .form-style-5 input [typ = "datetime"]: fokusera .form-style-5 input [typ = "email"]: fokusera .form-style-5 input [typ = "number"]: fokusera .form-style-5 input [typ = "search"] : fokus, .form-style-5 input [typ = "time"]: fokusera .form-style-5 input [typ = "url"]: fokusera .form-style-5 textarea: fokusera. stil-5 välj: fokus bakgrund: # d2d9dd;  .form-style-5 välj -webkit-utseende: meny-knapp höjd: 35px;  .form-style-5. number (bakgrund: # 1abc9c; färg: #fff; höjd: 30px; bredd: 30px; display: inline-block; typsnittstorlek: 0,8em; marginal-höger: 4px; linjehöjd: 30px; text-align: center; textskugga: 0 1px 0 rgba (255,255,255,0,2); gränsstråle: 15px 15px 15px 0px;  .form-style-5 input [typ = "submit"], .form-style-5 input [typ = "knapp"] position: relativ; display: block; vaddering: 19px 39px 18px 39px; färg: #FFF; marginal: 0 auto; bakgrund: # 1abc9c; typsnittstorlek: 18px; text-align: center; typsnittstyp: normal; bredd: 100%; gräns: 1px fast # 16a085; kantbredd: 1px 1px 3px; marginal-botten: 10px;  .form-style-5 input [typ = "submit"]: svävare, .form-style-5 input [typ = "knapp"]: sväva bakgrund: # 109177;  

Skriv popupens logik

När vi är färdiga med förlängningens framkant, låt oss nu skriva logiken för dess arbete. Vi behöver vår förlängning för att kunna lägg till föremål och visa dem också i popup-fönstret. Så vi lägger till en knapp klicka på lyssnaren för att lägga till inmatningstexten som en åtgärdsobjekt och en sidladdningslyssnare för att visa de objekten.

I koden nedan kommer vi att använda två funktioner - sync.get () och sync.set (), som är en del av “chrome.storage“. Vi behöver den andra för att spara de åtgärda objekten i lagringsutrymmet och den första som hämtar dem och visar dem.

Som sagt, nedan är den sista koden för “browser_action.js” fil. Som du kan se nedan är koden mycket kommenterad för att hjälpa dig att förstå dess syfte.

 funktion loadItems () / * Först få () data från lagringen * / chrome.storage.sync.get (['todo'], funktion (resultat) var todo = [] om (resultat && result.todo && result.todo.trim ()! == ") / * Parsa och få arrayen som den sparas som en sträng * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) för (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Ladda förlängningen

När du är färdig med att skriva din förlängning är det dags att testa det via Google Chromes funktion som erbjuder att ladda upp utökningar som inte är lagrade, förpackade. Men först måste du aktivera utvecklarläget i din webbläsare: klicka på alternativ knapp > välja “Fler verktyg” > Extensions, och sedan växla på “utvecklarläge“.

Nu ser du fler knappar under sökfältet. Här klickar du på “Ladda upppackade” knapp. Det kommer att be om katalogen - bläddra och välj din anknytnings katalog, och det kommer att ladda tillägget. Om du redigerar eller uppdaterar koden för din förlängning kan du klicka på ladda om knappen för att ladda de senaste ändringarna.

I vårt exempel, Du kommer att se förlängningens ikon bredvid profilikonen eftersom vi lagt till en webbläsaråtgärd i vår provtillägg. Du kan klicka på den här ikonen till lägg till och visa att göra saker i vår förlängning eftersom det är den angivna åtgärden.

Distribuera ett tillägg

Även om det är lätt att ladda upp en förlängning till Chrome Web Store, är processen för lång för att täcka alla detaljer. Kort sagt, du skapar ett utvecklarkonto, paketerar din förlängning och skickar sedan in den tillsammans med innehållsinformationen (som namn, ikon, skärmdumpar, etc.); som anges i sin steg-för-steg guide.

Vad nästa? Läs och kod

Som du kanske har förväntat är syftet med denna handledning att komma igång med utvidgningsutvecklingen för Google Chrome. Jag har försökt att täcka de grundläggande begreppen; dock, du behöver veta mycket mer för att göra allvarlig utvidgningsutveckling.

Som sagt, nedan är några av mina favorit go-to resurser för att lära sig att utveckla tillägg för Google Chrome och andra Chrome-baserade webbläsare:

1. Alla förmågor, komponenter och funktioner i tillägg.
2. Provtillägg av teamet bakom Google Chrome.

Om du har gått igenom dessa resurser och är redo för en utmaning kan du försöka lägga till följande funktioner i den förlängning du just avslutat med att utveckla:

1. Ett alternativ för att ta bort de sparade att göra-objekten.
2. En funktion för att visa meddelanden när det är gjort att lägga till ett objekt.

Det handlar om att utveckla din första tillägg för den mest populära webbläsaren. Vilken förlängning skapade du? Fick du ett problem? Vänligen meddela din historia genom att skriva en kommentar nedan eller meddela mig på @aksinghnet.

Sist men inte minst, notera att du kan prova Todoizr (den förlängning vi skapade) på Chrome Web Store och kontrollera dess fullständiga kod i det här förvaret.