Architekturübersicht

Erweiterungen sind gezippte Pakete mit HTML-, CSS-, JavaScript-, Bild- und anderen Dateien, die im Web verwendet werden. zum Anpassen der Browsernutzung in Google Chrome. Erweiterungen werden mithilfe des Webs erstellt und kann dieselben APIs nutzen, die der Browser im offenen Web bereitstellt.

Erweiterungen bieten eine Vielzahl von Funktionsmöglichkeiten. Sie können Webinhalte ändern, die Nutzer sehen und mit dem Browser selbst zu interagieren, diesen zu erweitern und das Verhalten des Browsers zu ändern.

Erweiterungen sind die Grundlage, um den Chrome-Browser zum personalisierten Browser zu machen.

Erweiterungsdateien

Erweiterungen unterscheiden sich in der Art der Dateien und in der Anzahl der Verzeichnisse, aber sie alle müssen eine [manifest][docs-manifest] Einige einfache, aber nützliche Erweiterungen können nur aus dem Manifest und in der Symbolleiste.

Die Manifestdatei manifest.json enthält Informationen zur Erweiterung, z. B. als wichtigste Dateien und die Funktionen, die die Erweiterung nutzen könnte.

{
  "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 in der Symbolleiste des Browsers haben. Symbolleistensymbole ermöglichen einfachen Zugriff und um Nutzer darüber auf dem Laufenden zu halten, welche Erweiterungen installiert sind. Die meisten Nutzer interagieren mit einer Erweiterung, ein Pop-up öffnet, indem es auf das Symbol klickt.

Die Erweiterung "Google Mail Checker" verwendet eine Browseraktion:

Screenshot der Google Mail Checker-Erweiterung

Diese Mappy-Erweiterung verwendet eine Seitenaktion und Inhalte Skript:

Screenshot der Mappy-Erweiterung

Auf Dateien verweisen

Auf die Dateien einer Erweiterung kann über eine relative URL verwiesen werden, genau wie Dateien in einem gewöhnlichen HTML-Code 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 vom Erweiterungssystem für jede Erweiterung generiert wird. Die IDs für alle geladenen Erweiterungen können unter der URL chrome://extensions PATH_TO_FILE ist der Speicherort der Datei im oberster Ordner der Erweiterung mit der relativen URL übereinstimmt.

Während der Arbeit an einer entpackten Erweiterung kann sich die Erweiterungs-ID ändern. Insbesondere ist die ID eines Die entpackte Erweiterung ändert sich, wenn die Erweiterung aus einem anderen Verzeichnis geladen wird. wird die ID ändern, wenn die Erweiterung gepackt wird. Wenn der Code einer Erweiterung auf einer absoluten URL basiert, können die Methode chrome.runtime.getURL() verwenden, um die ID während Entwicklung.

Architektur

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

Hintergrundskript

Das Hintergrundskript ist der Event-Handler der Erweiterung. Sie 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 die Anweisungen aus. Ein effektives Hintergrundskript wird nur geladen, wenn es benötigt wird und im Leerlauf entladen werden.

UI-Elemente

Die Benutzeroberfläche einer Erweiterung sollte zweckmäßig und minimal sein. Die Benutzeroberfläche sollte verbessern das Surfen, ohne davon abzulenken. Die meisten Erweiterungen haben einen Browser Aktion oder Seitenaktion, kann aber auch andere Formen von UI, wie Kontextmenüs, die Omnibox oder das Erstellen eines Tastenkombination:

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

Erweiterungen, die eine Seitenaktion und ein Pop-up-Fenster verwenden, können das deklarative Content API verwenden, um im Hintergrundskript Regeln für die Einblendung des Pop-ups festzulegen den Nutzenden zur Verfügung stehen. Wenn die Bedingungen erfüllt sind, kommuniziert das Hintergrundskript mit dem Pop-up-Fenster damit Nutzende es als anklickbar machen.

Ein Browserfenster mit einer Seitenaktion und einem Pop-up

Inhaltsskripte

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

Ein Browserfenster mit einer Seitenaktion und einem Content-Skript

Inhaltsskripte können Nachrichten austauschen, um mit ihrer übergeordneten Erweiterung zu kommunizieren und Speichern von Werten mithilfe der storage API.

Zeigt einen Kommunikationspfad zwischen dem Content-Skript und der übergeordneten Erweiterung an

Seite „Optionen“

Genau wie Nutzer mit Erweiterungen den Chrome-Browser anpassen können, gibt es auch auf der Seite mit den Optionen ermöglicht die Anpassung der Erweiterung. Mit Optionen können Funktionen aktiviert werden und Nutzer können welche Funktionen für ihre Anforderungen relevant sind.

Chrome APIs verwenden

Neben dem Zugriff auf dieselben APIs wie bei Webseiten können Erweiterungen auch erweiterungsspezifische APIs, die eine enge Integration in den Browser ermöglichen Erweiterungen und Webseiten können sowohl auf die standardmäßige window.open()-Methode zum Öffnen einer URL zugreifen, Erweiterungen können jedoch Mit der Chrome API festlegen, in welchem Fenster die URL angezeigt werden soll tabs.create.

Asynchrone im Vergleich zu synchronen Methoden

Die meisten Chrome API-Methoden sind asynchron: Sie werden sofort zurückgegeben, ohne auf den Vorgang warten zu müssen. um den Vorgang abzuschließen. Wenn eine Erweiterung das Ergebnis eines asynchronen Vorgangs kennen muss, kann sie eine -Callback-Funktion in die Methode ein. Der Callback wird später ausgeführt, möglicherweise viel später, nachdem der zurück.

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

Wenn die tabs.query-Methode synchron ist, kann die Abfrage etwa 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, da query() asynchron ist. Er kehrt zurück, ohne auf die Arbeit zu warten. und gibt keinen Wert zurück. Eine Methode ist asynchron, wenn der Callback-Parameter in seiner Signatur zur Verfügung.

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

Damit ein Tab richtig abgefragt und seine URL aktualisiert werden kann, 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 Callback-Funktion angegebene query() wird aufgerufen und führt dann Zeile 2 aus, aber erst nach Informationen zur aktuell ausgewählter Tab verfügbar ist. Das passiert irgendwann, nachdem query() zurückgekehrt ist. Obwohl update() ist asynchron. Der Code verwendet keinen Callback-Parameter, da die Erweiterung keinen mit den Ergebnissen der Aktualisierung.

// 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 der Referenzdokumentation zur Chrome API und in den folgenden Video.

Kommunikation zwischen Seiten

Verschiedene Komponenten in einer Erweiterung müssen häufig miteinander kommunizieren. Verschiedene HTML-Seiten können sich mit den chrome.extension-Methoden wie getViews() finden und getBackgroundPage(). Sobald eine Seite auf andere Erweiterungsseiten verweist, kann die erste Funktionen auf den anderen Seiten aufrufen und deren DOMs bearbeiten Außerdem sind alle Komponenten des Erweiterung kann auf Werte zugreifen, die mithilfe der Storage API gespeichert wurden, und über Nachrichtenweitergabe.

Datensparmodus und Inkognitomodus

Erweiterungen können Daten mit der Storage API, dem HTML5-Webspeicher API oder über Serveranfragen , die zu einer Datenreduzierung führen. Wenn die Erweiterung muss etwas gespeichert werden. Überlegen Sie zuerst, ob dies aus einem Inkognitofenster kommt. Standardmäßig werden Erweiterungen nicht in Inkognitofenstern.

Der Inkognitomodus verspricht, dass das Fenster keine Spuren hinterlässt. Beim Umgang mit Daten aus Inkognitofenstern, sollten Erweiterungen dieses Versprechen einhalten. Wenn eine Erweiterung normalerweise im Web surfen kann Verlauf aus Inkognitofenstern nicht speichern. Erweiterungen können jedoch Einstellungen speichern, festlegen, ob die Einstellungen im Inkognitomodus aktiviert sind oder nicht.

Um festzustellen, ob sich ein Fenster im Inkognitomodus befindet, prüfen Sie das Attribut incognito der entsprechenden tabs.Tab- oder windows.Window-Objekt.

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, Entwickler sollten bereit sein, ihre eigenen Erweiterungen zu schreiben. Tauche ein in die Welt von mit den folgenden Ressourcen.