Architektur

Erweiterungen sind gezippte Pakete aus HTML-, CSS-, JavaScript-, Bild- und anderen Dateien, die auf der Webplattform verwendet werden und die Nutzung von 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 eine Vielzahl von funktionalen Möglichkeiten. Sie können Web-Inhalte ändern, die Nutzer sehen und mit denen sie interagieren, oder das Verhalten des Browsers selbst erweitern und ändern.

Erweiterungen sind der Schlüssel dazu, den Chrome-Browser zum personalisiertesten Browser zu machen.

Erweiterungsdateien

Erweiterungen unterscheiden sich in den Dateitypen und der Anzahl der Verzeichnisse, aber alle müssen ein [Manifest][docs-manifest] haben. Einige einfache, aber nützliche Erweiterungen bestehen möglicherweise nur aus dem Manifest und dem Symbol in der Symbolleiste.

Die Manifestdatei mit dem Titel manifest.json enthält Informationen zur Erweiterung für den Browser, z. B. die wichtigsten Dateien und die Funktionen, die die Erweiterung möglicherweise verwendet.

{
  "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 ein Symbol haben, das in der Symbolleiste des Browsers angezeigt wird. Symbole in der Symbolleiste ermöglichen einen einfachen Zugriff und informieren Nutzer darüber, welche Erweiterungen installiert sind. Die meisten Nutzer interagieren mit einer Erweiterung, die ein Pop-up verwendet, indem sie auf das Symbol klicken.

Diese Google Mail Checker-Erweiterung verwendet eine Browseraktion:

Screenshot der Erweiterung „Google Mail Checker“

Diese Mappy-Erweiterung verwendet eine Seitenaktion und ein Content Script:

Screenshot der Mappy-Erweiterung

Verweise auf Dateien

Auf die Dateien einer Erweiterung kann mit einer relativen URL verwiesen werden, genau wie auf Dateien auf einer normalen HTML-Seite.

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

Außerdem kann auf jede Datei auch mit einer absoluten URL zugegriffen werden.

chrome-extension://EXTENSION_ID/PATH_TO_FILE

In der absoluten URL ist EXTENSION_ID eine eindeutige Kennung, die vom Erweiterungssystem generiert wird. Die IDs aller geladenen Erweiterungen können unter der URL chrome://extensions aufgerufen werden. Der PATH_TO_FILE ist der Speicherort der Datei im obersten Ordner der Erweiterung. Er entspricht der relativen URL.

Wenn Sie an einer entpackten Erweiterung arbeiten, 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 verpackt wird. Wenn der Code einer Erweiterung auf einer absoluten URL basiert, kann die Methode chrome.runtime.getURL() verwendet werden, um die ID während der Entwicklung nicht fest zu codieren.

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. Es ist inaktiv, bis ein Ereignis ausgelöst wird, und führt dann die angewiesene Logik aus. Ein effektives Hintergrundskript wird nur geladen, wenn es benötigt wird, und entladen, wenn es inaktiv ist.

UI-Elemente

Die Benutzeroberfläche einer Erweiterung sollte zweckmäßig und minimal sein. Die Benutzeroberfläche sollte die Nutzung des Browsers anpassen oder verbessern, ohne davon abzulenken. Die meisten Erweiterungen haben eine Browseraktion oder Seitenaktion, können aber auch andere Formen der Benutzeroberfläche enthalten, z. B. Kontextmenüs, die Verwendung der Omnibox oder die Erstellung eines Tastaturkürzels.

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

Eine Erweiterung, die eine Seitenaktion und ein Pop-up verwendet, kann mit der declarative content API Regeln im Hintergrundskript festlegen, wann das Pop-up für Nutzer verfügbar ist. Wenn die Bedingungen erfüllt sind, kommuniziert das Hintergrundskript mit dem Pop-up, um das Symbol für Nutzer anklickbar zu machen.

Ein Browserfenster mit einer Seitenaktion, in der ein Pop-up angezeigt wird

Content-Scripts

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

Ein Browserfenster mit einer Seitenaktion und einem Inhaltsskript

Content-Scripts können mit ihrer übergeordneten Erweiterung kommunizieren, indem sie Nachrichten austauschen und Werte mit der Storage API speichern.

Zeigt einen Kommunikationspfad zwischen dem Inhaltskript und der übergeordneten Erweiterung

Optionsseite

Erweiterungen ermöglichen es Nutzern, den Chrome-Browser anzupassen. Auf der Optionsseite können sie die Erweiterung anpassen. Mit Optionen können Funktionen aktiviert werden und Nutzer können auswählen, welche Funktionen für ihre Anforderungen relevant sind.

Chrome APIs verwenden

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

Asynchrone und synchrone Methoden

Die meisten Chrome API-Methoden sind asynchron: Sie geben sofort einen Wert zurück, 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 einen Wert zurückgegeben hat.

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 wäre, könnte sie so 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, weil query() asynchron ist. Sie gibt einen Wert zurück, ohne auf den Abschluss des Vorgangs zu warten, und gibt keinen Wert zurück. Eine Methode ist asynchron, wenn der Callback-Parameter in ihrer Signatur verfügbar ist.

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

Um einen Tab korrekt abzufragen und seine URL zu aktualisieren, 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 obigen Code 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, aber erst, nachdem Informationen zum aktuell ausgewählten Tab verfügbar sind. Das geschieht einige Zeit, nachdem query() einen Wert zurückgegeben hat. Obwohl update() asynchron ist, wird im Code kein Callback-Parameter verwendet, da die Erweiterung mit den Ergebnissen des Updates nichts unternimmt.

// 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 andere asynchrone Arbeit aus.

Weitere Details

Weitere Informationen finden Sie in der Chrome API-Referenzdokumentation und im folgenden Video.

Kommunikation zwischen Seiten

Verschiedene Komponenten in einer Erweiterung müssen oft miteinander kommunizieren. Verschiedene HTML-Seiten können sich mit den chrome.extension-Methoden finden, z. B. getViews() und getBackgroundPage(). Sobald eine Seite einen Verweis auf andere Erweiterungsseiten hat, kann die erste Seite Funktionen auf den anderen Seiten aufrufen und ihre DOMs bearbeiten. Außerdem können alle Komponenten der Erweiterung auf Werte zugreifen, die mit der Storage API gespeichert wurden, und über die Nachrichtenübermittlung kommunizieren.

Daten speichern und Inkognitomodus

Erweiterungen können Daten mit der Storage API, der HTML5 Web Storage API oder durch Serveranfragen speichern , die zum Speichern von Daten führen. Wenn die Erweiterung etwas speichern muss, prüfen Sie zuerst, ob es sich um ein Inkognitofenster handelt. Standardmäßig werden Erweiterungen nicht in Inkognitofenstern ausgeführt.

Im Inkognitomodus wird versprochen, dass das Fenster keine Spuren hinterlässt. Wenn Erweiterungen mit Daten aus Inkognitofenstern arbeiten, sollten sie dieses Versprechen einhalten. Wenn eine Erweiterung normalerweise den Browserverlauf speichert, sollte sie den Verlauf aus Inkognitofenstern nicht speichern. Erweiterungen können jedoch Einstellungen aus jedem Fenster speichern, unabhängig davon, ob es sich um ein Inkognitofenster handelt.

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

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“ durchgearbeitet haben, sollten Entwickler bereit sein, ihre eigenen Erweiterungen zu schreiben. Mit den folgenden Ressourcen können Sie tiefer in die Welt der benutzerdefinierten Chrome-Erweiterungen eintauchen.

  • Informationen zu den Optionen für das Debugging von Erweiterungen finden Sie in der Anleitung zum Debugging.
  • Chrome-Erweiterungen haben Zugriff auf leistungsstarke APIs, die über das hinausgehen, was im offenen Web verfügbar ist. In der Dokumentation zu den APIs „chrome.*“ Die API-Dokumentation beschreibt die einzelnen APIs.
  • Die Übersicht zur Entwicklung von Erweiterungen enthält Dutzende zusätzlicher Links zu Dokumentationen, die für die Erstellung erweiterter Erweiterungen relevant sind.