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:
Diese Mappy-Erweiterung verwendet eine Seitenaktion und ein Inhaltsskript:
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.
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.
Inhaltsskripts können mit ihrer übergeordneten Erweiterung kommunizieren, indem sie Nachrichten austauschen und Werte mithilfe der storage API speichern.
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.
- Informationen zu den Optionen für die Fehlerbehebung bei Erweiterungen finden Sie in der Anleitung zur Fehlerbehebung.
- Chrome-Erweiterungen bieten Zugriff auf leistungsstarke APIs, die über das hinausgehen, was im offenen Web verfügbar ist. Das chrome.* API-Dokumentation Schritt für Schritt durch die einzelnen APIs.
- Unter Übersicht über die Entwicklung von Erweiterungen finden Sie Dutzende von zusätzlichen Links zu Dokumentationen, die für das Erstellen erweiterter Erweiterungen relevant sind.