Architectuur overzicht

Extensies zijn gecomprimeerde bundels HTML, CSS, JavaScript, afbeeldingen en andere bestanden die op het webplatform worden gebruikt en die de browse-ervaring van Google Chrome aanpassen. Extensies zijn gebouwd met behulp van webtechnologie en kunnen dezelfde API's gebruiken die de browser aan het open web levert.

Uitbreidingen hebben een breed scala aan functionele mogelijkheden. Ze kunnen de webinhoud wijzigen die gebruikers zien en ermee communiceren, of het gedrag van de browser zelf uitbreiden en wijzigen.

Beschouw extensies als de toegangspoort om van de Chrome-browser de meest gepersonaliseerde browser te maken.

Extensiebestanden

Extensies variëren in type bestanden en aantal mappen, maar ze moeten allemaal een [manifest][docs-manifest] hebben. Sommige eenvoudige, maar nuttige extensies kunnen alleen uit het manifest en het bijbehorende werkbalkpictogram bestaan.

Het manifestbestand, getiteld manifest.json , geeft de browser informatie over de extensie, zoals de belangrijkste bestanden en de mogelijkheden die de extensie zou kunnen gebruiken.

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

Extensies moeten een pictogram hebben dat in de browserwerkbalk staat. Werkbalkpictogrammen bieden gemakkelijke toegang en houden gebruikers op de hoogte van welke extensies zijn geïnstalleerd. De meeste gebruikers zullen communiceren met een extensie die een pop-up gebruikt door op het pictogram te klikken.

Deze Google Mail Checker-extensie gebruikt een browseractie :

Een screenshot van de Google Mail Checker-extensie

Deze Mappy-extensie gebruikt een paginaactie en inhoudsscript :

Een screenshot van de Mappy-extensie

Verwijzen naar bestanden

Er kan naar de bestanden van een extensie worden verwezen met behulp van een relatieve URL, net als naar bestanden op een gewone HTML-pagina.

<img src="images/my_image.png">

Bovendien is elk bestand ook toegankelijk via een absolute URL.

chrome-extension://EXTENSION_ID/PATH_TO_FILE

In de absolute URL is de EXTENSION_ID een unieke identificatie die het extensiesysteem voor elke extensie genereert. De ID's van alle geladen extensies kunnen worden bekeken door naar de URL chrome://extensions te gaan. Het PATH_TO_FILE is de locatie van het bestand onder de bovenste map van de extensie; het komt overeen met de relatieve URL.

Tijdens het werken aan een uitgepakte extensie kan het extensie-ID veranderen. Concreet zal de ID van een uitgepakte extensie veranderen als de extensie vanuit een andere map wordt geladen; de ID zal opnieuw veranderen wanneer de extensie wordt verpakt. Als de code van een extensie afhankelijk is van een absolute URL, kan deze de methode chrome.runtime.getURL() gebruiken om te voorkomen dat de ID tijdens de ontwikkeling hard wordt gecodeerd.

Architectuur

De architectuur van een extensie zal afhangen van de functionaliteit ervan, maar veel robuuste extensies zullen meerdere componenten bevatten:

Achtergrondscript

Het achtergrondscript is de gebeurtenishandler van de extensie; het bevat luisteraars voor browsergebeurtenissen die belangrijk zijn voor de extensie. Het blijft inactief totdat een gebeurtenis wordt geactiveerd en voert vervolgens de geïnstrueerde logica uit. Een effectief achtergrondscript wordt alleen geladen als het nodig is en wordt verwijderd als het inactief is.

UI-elementen

De gebruikersinterface van een extensie moet doelgericht en minimaal zijn. De gebruikersinterface moet de browse-ervaring aanpassen of verbeteren zonder hiervan af te leiden. De meeste extensies hebben een browseractie of paginaactie , maar kunnen ook andere vormen van gebruikersinterface bevatten, zoals contextmenu's , gebruik van de omnibox of het maken van een sneltoets .

Extensie-UI-pagina's, zoals een pop-up , kunnen gewone HTML-pagina's met JavaScript-logica bevatten. Extensies kunnen ook tabs.create of window.open() aanroepen om extra HTML-bestanden weer te geven die in de extensie aanwezig zijn.

Een extensie die een paginaactie en een pop-up gebruikt, kan de declaratieve inhoud- API gebruiken om regels in het achtergrondscript in te stellen voor wanneer de pop-up beschikbaar is voor gebruikers. Wanneer aan de voorwaarden is voldaan, communiceert het achtergrondscript met de pop-up om het pictogram klikbaar te maken voor gebruikers.

Een browservenster met een paginaactie waarin een pop-up wordt weergegeven

Inhoudsscripts

Extensies die webpagina's lezen of ernaar schrijven, maken gebruik van een inhoudsscript . Het inhoudsscript bevat JavaScript dat wordt uitgevoerd in de context van een pagina die in de browser is geladen. Inhoudsscripts lezen en wijzigen de DOM van webpagina's die de browser bezoekt.

Een browservenster met een paginaactie en een inhoudsscript

Inhoudsscripts kunnen communiceren met hun bovenliggende extensie door berichten uit te wisselen en waarden op te slaan met behulp van de opslag- API.

Toont een communicatiepad tussen het inhoudsscript en de bovenliggende extensie

Opties pagina

Net zoals extensies gebruikers in staat stellen de Chrome-browser aan te passen, maakt de optiepagina aanpassing van de extensie mogelijk. Opties kunnen worden gebruikt om functies in te schakelen en gebruikers in staat te stellen te kiezen welke functionaliteit relevant is voor hun behoeften.

Chrome-API's gebruiken

Naast dat ze toegang hebben tot dezelfde API's als webpagina's, kunnen extensies ook extensiespecifieke API's gebruiken die een nauwe integratie met de browser creëren. Extensies en webpagina's hebben beide toegang tot de standaard window.open() methode om een ​​URL te openen, maar extensies kunnen specificeren in welk venster die URL moet worden weergegeven door in plaats daarvan de Chrome API tabs.create -methode te gebruiken.

Asynchrone versus synchrone methoden

De meeste Chrome API-methoden zijn asynchroon: ze keren onmiddellijk terug zonder te wachten tot de bewerking is voltooid. Als een extensie de uitkomst van een asynchrone bewerking moet weten, kan deze een callback-functie aan de methode doorgeven. De callback wordt later uitgevoerd, mogelijk veel later, nadat de methode is geretourneerd.

Als de extensie het momenteel geselecteerde tabblad van de gebruiker naar een nieuwe URL zou moeten navigeren, zou deze de ID van het huidige tabblad moeten ophalen en vervolgens het adres van dat tabblad moeten bijwerken naar de nieuwe URL.

Als de methode tabs.query synchroon was, zou deze er ongeveer als volgt uit kunnen zien.

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

Deze aanpak zal mislukken omdat query() asynchroon is. Het keert terug zonder te wachten tot het werk is voltooid en retourneert geen waarde. Een methode is asynchroon wanneer de callback-parameter beschikbaar is in de handtekening ervan.

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

Om een ​​tabblad correct te doorzoeken en de URL ervan bij te werken, moet de extensie de callback-parameter gebruiken.

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

In de bovenstaande code worden de regels in de volgende volgorde uitgevoerd: 1, 4, 2. De callback-functie die is opgegeven voor query() wordt aangeroepen en voert vervolgens regel 2 uit, maar alleen nadat informatie over het momenteel geselecteerde tabblad beschikbaar is. Dit gebeurt ergens nadat query() is geretourneerd. Hoewel update() asynchroon is, gebruikt de code geen callback-parameter, omdat de extensie niets doet met de resultaten van de update.

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

Deze methode retourneert de URL synchroon als een string en voert geen ander asynchroon werk uit.

Meer details

Bekijk voor meer informatie de Chrome API-referentiedocumenten en bekijk de volgende video.

Communicatie tussen pagina's

Verschillende componenten in een extensie moeten vaak met elkaar communiceren. Verschillende HTML-pagina's kunnen elkaar vinden met behulp van de chrome.extension methoden, zoals getViews() en getBackgroundPage() . Zodra een pagina een verwijzing heeft naar andere extensiepagina's, kan de eerste functies op de andere pagina's aanroepen en hun DOM's manipuleren. Bovendien hebben alle componenten van de extensie toegang tot waarden die zijn opgeslagen met behulp van de opslag- API en kunnen ze communiceren via het doorgeven van berichten .

Gegevens opslaan en incognitomodus

Extensies kunnen gegevens opslaan met behulp van de opslag- API, de HTML5 -webopslag-API of door serververzoeken te doen die resulteren in het opslaan van gegevens. Wanneer de extensie iets moet opslaan, bedenk dan eerst of dit vanuit een incognitovenster komt. Extensies worden standaard niet uitgevoerd in incognitovensters.

De incognitomodus belooft dat het venster geen sporen achterlaat. Bij het omgaan met gegevens uit incognitovensters moeten extensies deze belofte waarmaken. Als een extensie normaal gesproken de browsegeschiedenis opslaat, sla dan geen geschiedenis op vanuit incognitovensters. Extensies kunnen echter instellingsvoorkeuren vanuit elk venster opslaan, incognito of niet.

Om te detecteren of een venster zich in de incognitomodus bevindt, controleert u de incognito eigenschap van het relevante tabs.Tab- of windows.Window- object.

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

Zet de volgende stap

Na het lezen van het overzicht en het voltooien van de handleiding Aan de slag , zouden ontwikkelaars klaar moeten zijn om hun eigen extensies te gaan schrijven! Duik dieper in de wereld van aangepast Chrome met de volgende bronnen.