Architectuur overzicht

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

Extensies bieden een breed scala aan functionele mogelijkheden. Ze kunnen de webinhoud die gebruikers zien en waarmee ze interageren aanpassen, of het gedrag van de browser zelf uitbreiden en veranderen.

Beschouw extensies als de sleutel tot het personaliseren van de Chrome-browser.

Extensiebestanden

Extensies verschillen in het type bestanden en het aantal mappen, maar ze moeten allemaal een [manifest][docs-manifest] hebben. Sommige eenvoudige, maar nuttige extensies bestaan ​​mogelijk alleen uit het manifest en het bijbehorende pictogram in de werkbalk.

Het manifestbestand, genaamd manifest.json , geeft de browser informatie over de extensie, zoals de belangrijkste bestanden en de mogelijkheden die de extensie kan 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. Pictogrammen in de werkbalk maken het gemakkelijk om extensies te openen en laten gebruikers weten welke extensies geïnstalleerd zijn. De meeste gebruikers zullen een extensie die een pop-upvenster gebruikt, openen door op het pictogram te klikken.

Deze Google Mail Checker-extensie maakt gebruik van een browseractie :

Een schermafbeelding van de Google Mail Checker-extensie.

Deze Mappy-extensie maakt gebruik van een pagina-actie en een contentscript :

Een schermafbeelding van de Mappy-extensie.

Verwijzen naar bestanden

De bestanden van een extensie kunnen, net als bestanden in een gewone HTML-pagina, worden benaderd met behulp van een relatieve URL.

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

Daarnaast 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 identificatiecode die het extensiesysteem voor elke extensie genereert. De ID's van alle geladen extensies kunnen worden bekeken via de URL chrome://extensions . De PATH_TO_FILE is de locatie van het bestand in de hoofdmap van de extensie; deze komt overeen met de relatieve URL.

Tijdens het werken aan een niet-ingepakte extensie kan de extensie-ID veranderen. De ID van een niet-ingepakte extensie verandert met name als de extensie vanuit een andere map wordt geladen; de ID verandert opnieuw wanneer de extensie wordt ingepakt. Als de code van een extensie afhankelijk is van een absolute URL, kan de methode ` chrome.runtime.getURL() worden gebruikt om te voorkomen dat de ID tijdens de ontwikkeling hardcoded moet worden.

Architectuur

De architectuur van een extensie hangt af van de functionaliteit ervan, maar veel robuuste extensies bevatten meerdere componenten:

Achtergrondscript

Het achtergrondscript is de gebeurtenisafhandelaar van de extensie; het bevat listeners voor browsergebeurtenissen die belangrijk zijn voor de extensie. Het blijft inactief totdat een gebeurtenis plaatsvindt, waarna het de voorgeschreven logica uitvoert. Een effectief achtergrondscript wordt alleen geladen wanneer het nodig is en weer ontladen wanneer het niet meer actief is.

UI-elementen

De gebruikersinterface van een extensie moet doelgericht en minimalistisch zijn. De UI moet de browse-ervaring aanpassen of verbeteren zonder deze te verstoren. De meeste extensies hebben een browseractie of pagina-actie , maar kunnen ook andere vormen van UI bevatten, zoals contextmenu's , het gebruik van de omnibox of het aanmaken van een sneltoets .

Gebruikersinterfacepagina's van extensies, 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 gebruikmaakt van een pagina-actie en een pop-up kan de declaratieve content- 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 ervan klikbaar te maken voor gebruikers.

Een browservenster met een pagina-actie dat een pop-upvenster weergeeft.

Inhoudscripts

Extensies die webpagina's lezen of ernaar schrijven, gebruiken een contentscript . Het contentscript bevat JavaScript dat wordt uitgevoerd in de context van een pagina die in de browser is geladen. Contentscripts lezen en wijzigen het DOM van webpagina's die de browser bezoekt.

Een browservenster met een pagina-actie en een inhoudsscript.

Contentscripts kunnen met hun bovenliggende extensie communiceren 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.

Optiespagina

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

Chrome API's gebruiken

Naast toegang tot dezelfde API's als webpagina's, kunnen extensies ook gebruikmaken van extensiespecifieke API's die een nauwe integratie met de browser mogelijk maken. Zowel extensies als webpagina's kunnen de standaardmethode window.open() gebruiken om een ​​URL te openen, maar extensies kunnen specificeren in welk venster die URL moet worden weergegeven door in plaats daarvan de `tabs.create` -methode van de Chrome API te gebruiken.

Asynchrone versus synchrone methoden

De meeste Chrome API-methoden zijn asynchroon: ze retourneren direct, 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 de momenteel geselecteerde tab van de gebruiker naar een nieuwe URL moest navigeren, moest deze de ID van de huidige tab ophalen en vervolgens het adres van die tab bijwerken naar de nieuwe URL.

Als de tabs.query- methode synchroon zou zijn, zou deze er ongeveer zo uitzien als hieronder.

//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. De methode retourneert zonder te wachten tot het werk is voltooid en geeft geen waarde terug. Een methode is asynchroon wanneer de callback-parameter in de methodehandtekening aanwezig is.

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

Om een ​​tabblad correct op te vragen 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 callbackfunctie die is opgegeven voor query() wordt aangeroepen en voert vervolgens regel 2 uit, maar pas nadat informatie over het momenteel geselecteerde tabblad beschikbaar is. Dit gebeurt enige tijd nadat query() is teruggekeerd. Hoewel update() asynchroon is, gebruikt de code geen callbackparameter, 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 synchroon de URL als een string en voert verder geen asynchroon werk uit.

Meer details

Raadpleeg voor meer informatie de referentiedocumentatie van de Chrome API 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 via de chrome.extension methoden, zoals getViews() en getBackgroundPage() . Zodra een pagina een verwijzing heeft naar andere extensiepagina's, kan de eerste pagina functies op de andere pagina's aanroepen en hun DOM manipuleren. Bovendien hebben alle componenten van de extensie toegang tot waarden die zijn opgeslagen via de `storage`- API en kunnen ze communiceren via berichtuitwisseling .

Gegevens opslaan en incognito-modus

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, moet eerst worden nagegaan of dit vanuit een incognito-venster gebeurt. Standaard werken extensies niet in incognito-vensters.

De incognitomodus belooft dat het venster geen sporen achterlaat. Bij het verwerken van gegevens uit incognitovensters moeten extensies deze belofte nakomen. Als een extensie normaal gesproken de browsegeschiedenis opslaat, sla dan geen geschiedenis op uit incognitovensters. Extensies kunnen echter wel instellingen van elk venster opslaan, incognito of niet.

Om te detecteren of een venster in de incognitomodus staat, controleert u de eigenschap incognito van het betreffende 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' , zijn ontwikkelaars klaar om hun eigen extensies te schrijven! Duik dieper in de wereld van aangepaste Chrome met de volgende bronnen.