Architektur

Erweiterungen sind gezippte Pakete von HTML-, CSS-, JavaScript-, Bild- und anderen Dateien, die auf der Webplattform verwendet werden und die das Surfen mit Google Chrome anpassen. Erweiterungen werden mit Webtechnologie erstellt und können dieselben APIs verwenden, die der Browser für das offene Web bereitstellt.

Erweiterungen bieten viele funktionelle Möglichkeiten. Sie können Webinhalte ändern, die Nutzer sehen und mit denen sie interagieren, sowie das Verhalten des Browsers erweitern und ändern.

Mit Erweiterungen können Sie den Chrome-Browser zum am besten personalisierten Browser machen.

Erweiterungsdateien

Erweiterungen unterscheiden sich in den Dateitypen und der Anzahl der Verzeichnisse, müssen jedoch alle ein [manifest][docs-manifest] haben. Einige grundlegende, aber nützliche Erweiterungen können nur aus dem Manifest und dem Symbolleistensymbol bestehen.

Die Manifestdatei mit dem Namen manifest.json liefert dem Browser Informationen über die Erweiterung, z. B. die wichtigsten Dateien und die Funktionen, die die Erweiterung möglicherweise nutzt.

{
  "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"
  }
}

Erweiterungen müssen über ein Symbol in der Symbolleiste des Browsers verfügen. Symbole der Symbolleiste ermöglichen einen einfachen Zugriff und informieren die Nutzer darüber, welche Erweiterungen installiert sind. Die meisten Nutzer interagieren mit einer Erweiterung, die ein Pop-up verwendet, indem sie auf das Symbol klickt.

Diese Erweiterung für Google Mail Checker verwendet eine Browseraktion:

Screenshot der Erweiterung „Google Mail Checker“

Diese Mappy-Erweiterung verwendet eine Seitenaktion und ein Inhaltsskript:

Screenshot der Mappy-Erweiterung

Auf Dateien verweisen

Auf die Dateien einer Erweiterung kann über eine relative URL verwiesen werden, genau wie auf Dateien auf einer gewöhnlichen HTML-Seite.

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

Außerdem kann auf jede Datei auch über eine absolute URL zugegriffen werden.

chrome-extension://EXTENSION_ID/PATH_TO_FILE

In der absoluten URL ist EXTENSION_ID eine eindeutige Kennung, die das Erweiterungssystem für jede Erweiterung generiert. Die IDs für alle geladenen Erweiterungen können Sie unter der URL chrome://extensions einsehen. PATH_TO_FILE ist der Speicherort der Datei im obersten Ordner der Erweiterung. Er entspricht der relativen URL.

Bei der Arbeit an einer entpackten Erweiterung kann sich die Erweiterungs-ID ändern. Insbesondere ändert sich die ID einer entpackten Erweiterung, wenn die Erweiterung aus einem anderen Verzeichnis geladen wird. Die ID ändert sich noch einmal, wenn die Erweiterung gepackt wird. Wenn der Code einer Erweiterung auf einer absoluten URL basiert, kann die chrome.runtime.getURL()-Methode verwendet werden, um eine Hartcodierung der ID während der Entwicklung zu vermeiden.

Architektur

Die Architektur einer Erweiterung hängt von ihrer Funktionalität ab. Viele robuste Erweiterungen enthalten jedoch mehrere Komponenten:

Hintergrundskript

Das Hintergrundskript ist der Event-Handler der Erweiterung. Es enthält Listener für Browserereignisse, die für die Erweiterung wichtig sind. Er bleibt inaktiv, bis ein Ereignis ausgelöst wird, und führt dann die Anweisungslogik aus. Ein effektives Hintergrundskript wird nur geladen, wenn es benötigt wird, und bei Inaktivität entladen.

UI-Elemente

Die Benutzeroberfläche einer Erweiterung sollte zielgerichtet und minimal sein. Die Benutzeroberfläche sollte das Browsen anpassen oder verbessern, ohne davon abzulenken. Die meisten Erweiterungen haben eine Browseraktion oder Seitenaktion, können aber auch andere Formen der Benutzeroberfläche umfassen, z. B. Kontextmenüs, die Verwendung der Omnibox oder das Erstellen einer Tastenkombination.

Erweiterungs-UI-Seiten, wie z. B. ein Pop-up, können gewöhnliche HTML-Seiten mit JavaScript-Logik enthalten. Erweiterungen können auch tabs.create oder window.open() aufrufen, um zusätzliche HTML-Dateien in der Erweiterung anzuzeigen.

Eine Erweiterung, die eine Seitenaktion und ein Pop-up verwendet, kann die deklarative Content API nutzen, um im Hintergrundskript Regeln dafür festzulegen, wann das Pop-up für Nutzer verfügbar ist. Wenn die Bedingungen erfüllt sind, kommuniziert das Hintergrundskript mit dem Pop-up, damit Nutzer das Symbol anklicken können.

Ein Browserfenster mit einer Seitenaktion, die ein Pop-up anzeigt

Content-Skripts

Für Erweiterungen, die Webseiten lesen oder schreiben, wird ein Content-Script verwendet. Das Inhaltsskript enthält JavaScript-Code, der im Kontext einer Seite ausgeführt wird, die in den Browser geladen wurde. Inhaltsskripte lesen und ändern das DOM von Webseiten, die der Browser besucht.

Ein Browserfenster mit einer Seitenaktion und einem Inhaltsskript

Inhaltsskripts können mit ihrer übergeordneten Erweiterung kommunizieren, indem sie Nachrichten austauschen und Werte mithilfe der storage API speichern.

Zeigt einen Kommunikationspfad zwischen dem Inhaltsskript und der übergeordneten Erweiterung an

Seite „Optionen“

So wie Nutzer mit Erweiterungen den Chrome-Browser anpassen können, lässt sich die Erweiterung auch über die Seite „Optionen“ anpassen. Mit Optionen können Funktionen aktiviert werden und Nutzer können auswählen, welche Funktionalität für ihre Anforderungen relevant ist.

Chrome APIs verwenden

Erweiterungen haben nicht nur Zugriff auf die gleichen APIs wie Webseiten, sondern können auch erweiterungsspezifische APIs verwenden, die eine enge Integration in den Browser ermöglichen. Sowohl Erweiterungen als auch Webseiten können auf die Standardmethode window.open() zugreifen, um eine URL zu öffnen. Erweiterungen können jedoch mithilfe der Chrome API-Methode tabs.create festlegen, in welchem Fenster die URL angezeigt werden soll.

Asynchrone im Vergleich zu synchronen Methoden

Die meisten Chrome API-Methoden sind asynchron: Sie werden sofort zurückgegeben, ohne auf den Abschluss des Vorgangs zu warten. Wenn eine Erweiterung das Ergebnis eines asynchronen Vorgangs kennen muss, kann sie eine Callback-Funktion an die Methode übergeben. Der Callback wird später ausgeführt, möglicherweise viel später, nachdem die Methode zurückgegeben wurde.

Wenn die Erweiterung den aktuell ausgewählten Tab des Nutzers zu einer neuen URL weiterleiten muss, muss sie die ID des aktuellen Tabs abrufen und dann die Adresse dieses Tabs auf die neue URL aktualisieren.

Wenn die Methode tabs.query synchron war, könnte sie in etwa wie unten dargestellt aussehen.

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

Dieser Ansatz schlägt fehl, da query() asynchron ist. Es wird zurückgegeben, ohne auf den Abschluss der Arbeit zu warten, und es wird kein Wert zurückgegeben. Eine Methode ist asynchron, wenn der Callback-Parameter in seiner Signatur verfügbar ist.

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

Für eine korrekte Abfrage und Aktualisierung der URL eines Tabs muss die Erweiterung den Callback-Parameter verwenden.

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

Im Code oben werden die Zeilen in der folgenden Reihenfolge ausgeführt: 1, 4, 2. Die für query() angegebene Callback-Funktion wird aufgerufen und führt dann Zeile 2 aus, allerdings erst, wenn Informationen zum aktuell ausgewählten Tab verfügbar sind. Dies geschieht irgendwann, nachdem query() zurückgegeben wurde. Obwohl update() asynchron ist, verwendet der Code keinen Callback-Parameter, da die Erweiterung nichts mit den Ergebnissen der Aktualisierung macht.

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

Diese Methode gibt die URL synchron als string zurück und führt keine weiteren asynchronen Aufgaben aus.

Weitere Details

Weitere Informationen finden Sie in den Referenzdokumenten zur Chrome API und im folgenden Video.

Kommunikation zwischen Seiten

Verschiedene Komponenten in einer Erweiterung müssen häufig miteinander kommunizieren. Verschiedene HTML-Seiten können sich mithilfe der chrome.extension-Methoden wie getViews() und getBackgroundPage() gegenseitig finden. Sobald eine Seite einen Verweis auf andere Erweiterungsseiten hat, kann die erste Seite Funktionen auf den anderen Seiten aufrufen und deren DOMs bearbeiten. Darüber hinaus können alle Komponenten der Erweiterung auf Werte zugreifen, die in der storage API gespeichert sind, und über Nachrichtenübergabe kommunizieren.

Daten werden gespeichert und Inkognitomodus

Mit Erweiterungen lassen sich Daten über die storage API, die HTML5 Web Storage API oder über Serveranfragen speichern , durch die Daten eingespart werden können. Wenn die Erweiterung etwas speichern muss, überlegen Sie zuerst, ob sie aus einem Inkognitofenster stammt. Standardmäßig werden Erweiterungen nicht in Inkognito-Fenstern ausgeführt.

Im Inkognitomodus werden keine Tracks aufgezeichnet. Beim Umgang mit Daten aus Inkognitofenstern sollten Erweiterungen dieses Versprechen einhalten. Wenn eine Erweiterung den Browserverlauf normalerweise speichert, solltest du diesen nicht aus Inkognitofenstern speichern. Erweiterungen können jedoch Einstellungseinstellungen von jedem Fenster aus speichern, ob im Inkognitomodus oder nicht.

Um festzustellen, ob sich ein Fenster im Inkognitomodus befindet, prüfen Sie die incognito-Eigenschaft des entsprechenden Objekts tabs.Tab oder windows.Window.

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

Gleich loslegen

Nachdem Sie die Übersicht gelesen und die Anleitung Erste Schritte abgeschlossen haben, sollten Entwickler mit dem Schreiben ihrer eigenen Erweiterungen beginnen können. In den folgenden Ressourcen findest du weitere Informationen zum benutzerdefinierten Chrome.