Hoe maak je Chrome-extensies van Scratch

Als je dat wilt Sommige functies toevoegen of wijzigen in Google Chrome moet u een extensie gebruiken. Hoewel u een extensie kunt downloaden via de Chrome Web Store, maar soms heeft u een specifieke functionaliteit nodig die u niet kunt vinden in een bestaande extensie.

Het goede nieuws is dat u uw eigen extensie kunt maken om de vereiste functionaliteit toe te voegen of te wijzigen of een nieuwe add-on of app voor Google Chrome kunt maken, die u later kunt gebruiken distribueren naar andere gebruikers via de Chrome Web Store.

In het volgende zal ik je de gemakkelijkste manier om een ​​extensie te maken. Als je enige kennis hebt van webontwikkeling (HTML, CSS en JS), zul je je meteen thuis voelen. Zo niet, bekijk dan eerst deze kanalen leer de basisprincipes van webontwikkeling, ga dan hieronder verder.

voorwaarden

Voordat u met deze zelfstudie begint, moet u aan de volgende vereisten voldoen.

1. Je moet bekend zijn met HTML, CSS en JavaScript. [Controleer bronnen]
2. Je moet een hebben codebewerker om de extensie te schrijven. [Vergelijk editors]
3. (Optioneel) Als u uw extensie wilt verspreiden onder andere gebruikers, moet u beschikken over een ontwikkelaarsaccount in de Chrome Web Store. [Account aanmaken]

Notitie: Google vraagt ​​u om een ​​kleine vergoeding te betalen voor het maken van een ontwikkelaarsaccount in de Chrome Web Store.

Maak een extensie

In deze tutorial ga ik het proces van het maken van een delen to-do extensie voor Google Chrome. Het wordt een hulpprogramma (zoals hieronder weergegeven) om essentiële onderdelen en de mogelijkheden voor de extensies aan te tonen.

1. Koop een sjabloon

Google Chrome vereist, net als elk ander platform, zijn uitbreidingen om een ​​vaste structuur te hebben, wat voor beginners misschien complex lijkt. Daarom is het goed om een ​​boilerplate-sjabloon te krijgen voor een uitbreiding die voor alle benodigdheden zorgt.

Extensionizr is de beste boilerplate-generator voor Chrome-extensies. Hiermee kunt u een van de gegeven extensietypen kiezen - browser actie (een actie voor alle pagina's of de browser), pagina actie (een actie voor de huidige pagina), of verborgen extensie (een achtergrondactie die meestal verborgen is in de interface aan de voorkant).

Bovendien biedt het verschillende afstemmingsopties voor opnemen / uitsluiten van noodzakelijke invoegtoepassingen, machtigingen, etc. U moet selecteren “Browseractie” als het uitbreidingstype en “Geen achtergrond” als de achtergrondpagina voor deze zelfstudie.

Wanneer u klaar bent met het kiezen van de opties voor het maken van uw voorbeelduitbreiding, drukt u op “Download het!” knop in Extensionizr. Tenslotte, pak het archief (.zip) uit in een map en open je code-editor om te beginnen met het schrijven van de extensie.

2. Codeer de extensie

Nadat u de sjabloon hebt gedownload en uitgepakt, ziet u een directorystructuur zoals weergegeven in de onderstaande schermafbeelding. De sjabloon is netjes geordend en je moet weten dat het belangrijkste bestand is “manifest.json“.

Laten we ook andere bestanden en mappen in deze map leren kennen:

1. _locales: Het is gewend om bewaar taalinformatie voor een meertalige app.
2. css: Het functioneert voor het opslaan van front-endbibliotheken van derden zoals Bootstrap 4.
3. pictogrammen: Het is ontworpen om pictogrammen voor uw extensie in verschillende grootten te hebben.
4. js: Het komt handig om te redden back-endbibliotheken van derden zoals jQuery 3.
5. src: Het slaat de daadwerkelijke code op die u voor uw extensie gaat schrijven.

manifest.json

Het bevat de basismetagegevens over uw app, waarmee de details van uw app worden gedefinieerd voor de browser. U kunt het bewerken om de naam, beschrijving, website, pictogram, enz. Van uw extensie in te stellen, samen met details zoals browseracties en -rechten.

In de onderstaande code ziet u bijvoorbeeld dat ik de naam, beschrijving en homepage_url samen met default_title heb gewijzigd onder browser_action. Bovendien, ik toegevoegd “opslagruimte” onder machtigingen omdat we gegevens in onze extensie moeten opslaan.

 "name": "Todoizr - To-do Simplified", "version": "0.0.1", "manifest_version": 2, "description": "Simple to-do app for everyone.", "homepage_url": " https://go.aksingh.net/todoizr "," icons ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" icons / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - To-do Simplified "," default_popup ":" src / browser_action / browser_action.html "," permissies ": [" opslag "] 

src \ browser_action

Deze map bevat de code voor browseractie. In ons geval zullen we dat doen codeer het pop-upvenster getoond door te klikken op het pictogram van de extensie in de browser. Onze extensie stelt gebruikers in staat om actiepunten toe te voegen en te bekijken in de pop-up.

Notitie: Je kunt altijd beginnen met de code door deze repository te klonen.

Initiële code van de sjabloon

Hoewel deze map slechts een HTML-bestand had met alle code, heb ik besloten om het in drie afzonderlijke bestanden te verdelen voor een betere duidelijkheid. Dat gezegd hebbende, het HTML-bestand met de naam “browser_action.html” heeft nu de volgende code:

Bovendien heet het stijlbestand “browser_action.css” heeft de onderstaande inhoud terwijl het JavaScript-bestand is genoemd “browser_action.js” is voorlopig leeg.

 #mainPopup opvulling: 10px; hoogte: 200 px; breedte: 400 px; font-family: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2em;  

Ontwerp de popup-interface

Na het opzetten van het eerste project, laten we eerst de interface van de pop-up ontwerpen. ik heb stel de interface in met een minimalistische benadering, het tonen van de naam bovenaan, gevolgd door een formulier om actiepunten toe te voegen en een gebied eronder om de toegevoegde items te bekijken. Het is geïnspireerd door het simplistische ontwerp van “Formulierstijl 5“.

In de onderstaande code heb ik twee div's toegevoegd: een voor het weergeven van het formulier om een ​​actiepunt toe te voegen en het andere voor het weergeven van de lijst met reeds toegevoegde taken. Dat gezegd hebbende, de nieuwe code voor “browser_action.html” is als volgt:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

En het stijlbestand “browser_action.css” heeft nu de volgende code:

 @import url ("./ form_style_5.css"); #mainPopup height: 200px; breedte: 300 px; font-family: Helvetica, Ubuntu, Arial, sans-serif;  / * Takenformulier * / .form-style-5 margin: auto; opvulling: 0px 20px;  .form-style-5: first-child background: none;  .form-style-5 h1 color: # 308ce3; lettertypegrootte: 20px; text-align: center;  .form-style-5 input [type = "text"] width: auto; zweven: links; margin-bottom: niet ingesteld;  .form-style-5 input [type = "button"] background: # 308ce3; breedte: auto; zweven: rechts; opvulling: 7px; grens: geen; grensradius: 4px; lettertypegrootte: 14px;  .form-style-5 input [type = "button"]: hover background: # 3868d5;  / * Takenlijst * /. Form-style-5: last-child height: inherit; margin-bottom: 5px;  .form-style-5 ul opvulling: 20px;  .form-style-5 ul li font-size: 14px;  

Ten slotte het bestand met de stijl van derden “form_style_5.css” heeft de onderstaande inhoud. Het wordt eenvoudigweg van zijn website gehaald om het ontwerp van onze extensie te inspireren.

 / * Form Style 5 by Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; opvulling: 10px 20px; achtergrond: # f4f7f8; marge: 10 px automatisch; opvulling: 20px; achtergrond: # f4f7f8; grensradius: 8px; font-family: Georgia, "Times New Roman", Times, serif;  .form-style-5 fieldset border: none;  .form-style-5 legend font-size: 1.4em; margin-bottom: 10px;  .form-style-5 label weergave: blok; margin-bottom: 8px;  .form-style-5 input [type = "text"], .form-style-5 input [type = "date"], .form-style-5 input [type = "datetime"], .form-style -5 invoer [type = "email"], .form-style-5 invoer [type = "nummer"], .form-style-5 invoer [type = "zoeken"], .form-style-5 invoer [type] = "tijd"], .form-style-5 invoer [type = "url"], .form-style-5 textarea, .form-style-5 select font-family: Georgia, "Times New Roman", Times , serif; achtergrond: rgba (255,255,255, .1); grens: geen; grensradius: 4px; lettergrootte: 16px; marge: 0; omtrek: 0; opvulling: 7px; breedte: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; achtergrondkleur: # e8eeef; color: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) inzet; vakschaduw: 0 1px 0 rgba (0,0,0,0.03) inzet; margin-bottom: 30px;  .form-style-5 input [type = "text"]: focus, .form-style-5 input [type = "date"]: focus, .form-style-5 input [type = "datetime"]: focus, .form-style-5 input [type = "email"]: focus, .form-style-5 input [type = "number"]: focus, .form-style-5 input [type = "search"] : focus, .form-style-5 input [type = "time"]: focus, .form-style-5 input [type = "url"]: focus, .form-style-5 textarea: focus, .form- style-5 select: focus background: # d2d9dd;  .form-style-5 select -webkit-appearance: menulist-button; hoogte: 35px;  .form-style-5 .nummer background: # 1abc9c; kleur: #fff; hoogte: 30 px; breedte: 30px; weergave: inline-block; font-size: 0.8em; margin-right: 4px; regelhoogte: 30px; text-align: center; tekstschaduw: 0 1px 0 rgba (255,255,255,0,2); grensradius: 15px 15px 15px 0px;  .form-style-5 input [type = "submit"], .form-style-5 input [type = "button"] position: relative; weergave: blok; opvulling: 19px 39px 18px 39px; kleur: #FFF; marge: 0 auto; achtergrond: # 1abc9c; lettergrootte: 18px; text-align: center; lettertype: normaal; breedte: 100%; rand: 1px vast # 16a085; grensbreedte: 1px 1px 3px; margin-bottom: 10px;  .form-style-5 input [type = "submit"]: hover, .form-style-5 input [type = "button"]: hover background: # 109177;  

Schrijf de logica van de pop-up

Zodra we klaar zijn met de front-end van de extensie, laten we nu de logica schrijven voor zijn werking. We hebben onze extensie nodig om te kunnen voeg actiepunten toe en toon ze ook in het pop-upvenster. Dus we zullen een knopklikkende luisteraar toevoegen om de invoertekst toe te voegen als een taak en een luisteraar om de pagina te laden om die items te tonen.

In de onderstaande code gaan we twee functies gebruiken - sync.get () en sync.set (), die deel uitmaken van “chrome.storage“. We hebben de tweede nodig om de taken in de opslag op te slaan en de eerste om ze op te halen en te tonen.

Dat gezegd hebbende, hieronder is de definitieve code van de “browser_action.js” het dossier. Zoals u hieronder kunt zien, is de code zeer becommentarieerd om u te helpen het doel ervan te begrijpen.

 function loadItems () / * Eerste get () de gegevens uit de opslag * / chrome.storage.sync.get (['todo'], functie (resultaat) var todo = [] if (result && result.todo && result.todo.trim ()! == ") / * Ontleed en verkrijg de array zoals deze wordt opgeslagen als een string * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) voor (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. Laad de extensie

Nadat u klaar bent met het schrijven van uw extensie, is het de tijd om deze te testen via de functie van Google Chrome die biedt om niet-opgeslagen, uitgepakte extensies te laden. Maar eerst moet je dat doen schakel de ontwikkelaarsmodus in in uw browser: klik op de opties knop > Kiezen “Meer tools” > uitbreidingen, en schakel vervolgens in “Ontwikkelaarsmodus“.

Nu zie je meer knoppen onder de zoekbalk. Klik hier op “Laden onverpakt” knop. Het zal naar de map vragen - blader en selecteer de map van uw extensie, en het zal de extensie laden. Als u de code van uw extensie bewerkt of bijwerkt, kunt u op de knop klikken herlaadknop om de laatste wijzigingen te laden.

In ons voorbeeld, u ziet het pictogram van de extensie naast het profielpictogram omdat we een browseractie in onze voorbeelduitbreiding hebben toegevoegd. U kunt op dat pictogram klikken om taken toevoegen en bekijken in onze extensie omdat dat de opgegeven actie is.

Distribueer een extensie

Hoewel het is eenvoudig om een ​​extensie te uploaden bij Chrome Web Store is het proces te lang om alle details te behandelen. Kortom, u maakt een ontwikkelaarsaccount, pakt uw extensie in en verzendt deze vervolgens samen met de details van de inhoud (zoals naam, pictogram, schermafbeeldingen, enz.); zoals vermeld in de stapsgewijze handleiding.

Wat nu? Lezen en coderen

Zoals je misschien al verwachtte, is het doel van deze tutorial om je op weg te helpen met de extensie-ontwikkeling voor Google Chrome. Ik heb geprobeerd de basisbegrippen te behandelen; echter, je moet nog veel meer weten voor serieuze extensie-ontwikkeling.

Dat gezegd hebbende, hieronder zijn enkele van mijn favoriete go-to middelen voor het leren ontwikkelen van extensies voor Google Chrome en andere op Chromium gebaseerde browsers:

1. Alle mogelijkheden, componenten en functies van uitbreidingen.
2. Voorbeeldextensies door het team achter Google Chrome.

Als je deze bronnen hebt doorlopen en klaar bent voor een uitdaging, probeer onderstaande functies toe te voegen in de extensie die je zojuist hebt ontwikkeld:

1. Een optie om de opgeslagen actiepunten te verwijderen.
2. Een functie om meldingen te laten zien wanneer u klaar bent met het toevoegen van een item.

Dat is alles over het ontwikkelen van je eerste extensie voor de meest populaire browser. Welke extensie heb je gemaakt?? Ben je in een probleem geraakt? Laat me je verhaal weten door hieronder een reactie te schrijven of een bericht te sturen naar @aksinghnet.

Last but not least, houd er rekening mee dat je Todoizr (de extensie die we hebben gemaakt) in de Chrome Web Store kunt uitproberen en de volledige code in deze repository kunt controleren.