Grundlegende Informationen

Erweiterungen bestehen aus verschiedenen, aber zusammenhängenden Komponenten. Die Komponenten können Hintergrundskripts, Inhaltsskripts, eine Optionsseite, UI-Elemente und verschiedene Logikdateien enthalten. Erweiterungskomponenten werden mit Technologien zur Webentwicklung erstellt: HTML, CSS und JavaScript. Die Komponenten einer Erweiterung hängen von ihrer Funktionalität ab und erfordern unter Umständen nicht jede Option.

In dieser Anleitung wird eine Erweiterung erstellt, mit der Nutzer die Hintergrundfarbe einer beliebigen Seite auf developer.chrome.com ändern können. Dabei werden viele Kernkomponenten verwendet, um eine Einführung zu deren Beziehungen zu bieten.

Erstellen Sie zuerst ein neues Verzeichnis für die Dateien der Erweiterung.

Die fertiggestellte Erweiterung finden Sie hier.

Das Manifest erstellen

Erweiterungen beginnen mit ihrem Manifest. Erstellen Sie eine Datei mit dem Namen manifest.json und fügen Sie den folgenden Code ein.

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2
}

Das Verzeichnis mit der Manifestdatei kann im Entwicklermodus in seinem aktuellen Status als Erweiterung hinzugefügt werden.

1. Öffnen Sie die Seite „Erweiterungsverwaltung“ über chrome://extensions.
   • Sie können die Seite „Erweiterungsverwaltung“ auch öffnen, indem Sie auf das Chrome-Menü klicken, den Mauszeiger auf Weitere Tools bewegen und dann Erweiterungen auswählen.
2. Aktivieren Sie den Entwicklermodus, indem Sie auf die Ein-/Aus-Schaltfläche neben Entwicklermodus klicken.
3. Klicken Sie auf die Schaltfläche UNPACKED laden und wählen Sie das Verzeichnis für die Erweiterung aus.

Ta da! Die Erweiterung wurde erfolgreich installiert. Da im Manifest keine Symbole enthalten sind, wird ein allgemeines Symbol in der Symbolleiste für die Erweiterung erstellt.

Anweisung hinzufügen

Obwohl die Erweiterung installiert wurde, enthält sie keine Anleitung. Führen Sie ein Hintergrundskript ein. Erstellen Sie dazu eine Datei mit dem Namen background.js und platzieren Sie sie im Erweiterungsverzeichnis.

Hintergrundskripts und viele andere wichtige Komponenten müssen im Manifest registriert sein. Durch die Registrierung eines Hintergrundskripts im Manifest wird der Erweiterung mitgeteilt, auf welche Datei verwiesen werden soll und wie sich diese Datei verhalten soll.

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

Die Erweiterung erkennt jetzt, dass sie ein nicht persistentes Hintergrundskript enthält, und scannt die registrierte Datei auf wichtige Ereignisse, die sie überwachen muss.

Diese Erweiterung benötigt Informationen aus einer persistenten Variablen, sobald sie installiert wird. Fügen Sie zuerst ein Überwachungsereignis für runtime.onInstalled in das Hintergrundskript ein. Im onInstalled-Listener legt die Erweiterung mithilfe der storage API einen Wert fest. So können mehrere Erweiterungskomponenten auf diesen Wert zugreifen und ihn aktualisieren.

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log("The color is green.");
  });
});

Die meisten APIs, einschließlich der storage API, müssen im Manifest im Feld "permissions" registriert sein, damit sie von der Erweiterung verwendet werden können.

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

Kehren Sie zur Seite für die Erweiterungsverwaltung zurück und klicken Sie auf den Link Aktualisieren. Das neue Feld Ansichten prüfen ist mit dem blauen Link Hintergrundseite verfügbar.

Klicken Sie auf den Link, um das Konsolenprotokoll des Hintergrundskripts aufzurufen: „The color is green.“

Benutzeroberfläche vorstellen

Erweiterungen können viele Formen einer Benutzeroberfläche haben, für diese wird jedoch ein Pop-up verwendet. Erstellen Sie eine Datei mit dem Namen popup.html und fügen Sie sie dem Verzeichnis hinzu. Diese Erweiterung verwendet eine Schaltfläche, um die Hintergrundfarbe zu ändern.

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>

Wie das Hintergrundskript muss diese Datei im Manifest unter page_action als Pop-up gekennzeichnet werden.

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

Die Symbole für die Symbolleiste finden Sie auch unter page_action im Feld default_icons. Laden Sie hier den Bilderordner herunter, entpacken Sie ihn und speichern Sie ihn im Verzeichnis der Erweiterung. Aktualisieren Sie das Manifest, damit die Erweiterung weiß, wie die Bilder verwendet werden sollen.

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "manifest_version": 2
}

Außerdem zeigen Erweiterungen Bilder auf der Seite zur Erweiterungsverwaltung, der Berechtigungswarnung und dem Favicon an. Diese Images sind im Manifest unter icons gekennzeichnet.

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "manifest_version": 2
}

Wenn die Erweiterung zu diesem Zeitpunkt neu geladen wird, enthält sie ein Graustufensymbol, aber es gibt keine Funktionsunterschiede. Da page_action im Manifest deklariert ist, muss die Erweiterung dem Browser mitteilen, wann der Nutzer mit popup.html interagieren kann.

Fügen Sie dem Hintergrundskript mit der declarativeContent API im Listener-Ereignis runtime.onInstalled deklarierte Regeln hinzu.

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })
      ],
          actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

Die Erweiterung benötigt die Berechtigung für den Zugriff auf die declarativeContent API im Manifest.

{
  "name": "Getting Started Example",
...
  "permissions": ["declarativeContent", "storage"],
...
}

Der Browser zeigt jetzt in der Symbolleiste des Browsers ein vollfarbiges Symbol für Seitenaktionen an, wenn Nutzer eine URL aufrufen, die "developer.chrome.com" enthält. Wenn das Symbol vollfarbig ist, können Nutzer darauf klicken, um popup.html aufzurufen.

Im letzten Schritt der Pop-up-Benutzeroberfläche wird die Schaltfläche mit Farbe versehen. Erstellen Sie eine Datei namens popup.js mit dem folgenden Code und fügen Sie sie dem Erweiterungsverzeichnis hinzu.

let changeColor = document.getElementById('changeColor');

chrome.storage.sync.get('color', function(data) {
  changeColor.style.backgroundColor = data.color;
  changeColor.setAttribute('value', data.color);
});

Mit diesem Code wird die Schaltfläche aus popup.html abgerufen und der Farbwert aus dem Speicher angefordert. Dann wird die Farbe als Hintergrund der Schaltfläche angewendet. Fügen Sie in popup.html ein Skript-Tag für popup.js ein.

<!DOCTYPE html>
<html>
...
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>

Aktualisieren Sie die Erweiterung, um die grüne Schaltfläche zu sehen.

Ebenenlogik

Die Erweiterung weiß jetzt, dass das Pop-up für Nutzer auf developer.chrome.com verfügbar sein sollte, und zeigt eine farbige Schaltfläche an, benötigt jedoch eine Logik für die weitere Nutzerinteraktion. Aktualisieren Sie popup.js, um den folgenden Code einzufügen.

let changeColor = document.getElementById('changeColor');
...
changeColor.onclick = function(element) {
  let color = element.target.value;
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(
        tabs[0].id,
        {code: 'document.body.style.backgroundColor = "' + color + '";'});
  });
};

Mit dem aktualisierten Code wird der Schaltfläche ein onclick-Ereignis hinzugefügt, das ein programmatisch eingefügtes Inhaltsskript auslöst. Dadurch erhält die Hintergrundfarbe der Seite dieselbe Farbe wie die Schaltfläche. Die programmatische Injektion ermöglicht das automatische Einfügen von unerwünschtem Code in von Nutzern aufgerufene Inhaltsskripte.

Das Manifest benötigt die Berechtigung activeTab, um der Erweiterung vorübergehenden Zugriff auf die tabs API zu gewähren. Dadurch kann die Erweiterung tabs.executeScript aufrufen.

{
  "name": "Getting Started Example",
...
  "permissions": ["activeTab", "declarativeContent", "storage"],
...
}

Die Erweiterung ist jetzt voll funktionsfähig. Aktualisieren Sie die Erweiterung, aktualisieren Sie diese Seite, öffnen Sie das Pop-up und klicken Sie auf die Schaltfläche, um sie grün zu sehen. Manche Nutzer möchten jedoch eine andere Farbe für den Hintergrund wählen.

Nutzern Optionen bieten

Mit der Erweiterung können Nutzer derzeit nur den Hintergrund in Grün ändern. Mit einer Optionsseite haben Nutzer mehr Kontrolle über die Funktionalität der Erweiterung und können die Browsernutzung weiter anpassen.

Erstellen Sie zuerst eine Datei im Verzeichnis options.html und fügen Sie den folgenden Code ein.

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="buttonDiv">
    </div>
    <div>
      <p>Choose a different background color!</p>
    </div>
  </body>
  <script src="options.js"></script>
</html>

Registrieren Sie dann die Seite „Optionen“ im Manifest.

{
  "name": "Getting Started Example",
  ...
  "options_page": "options.html",
  ...
  "manifest_version": 2
}

Aktualisieren Sie die Erweiterung und klicken Sie auf DETAILS.

Scrollen Sie auf der Detailseite nach unten und wählen Sie Erweiterungsoptionen aus, um die Seite mit den Optionen aufzurufen. Diese Seite wird jedoch derzeit leer angezeigt.

Im letzten Schritt wird die Optionslogik hinzugefügt. Erstellen Sie im Erweiterungsverzeichnis eine Datei namens options.js mit dem folgenden Code.

let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(kButtonColors) {
  for (let item of kButtonColors) {
    let button = document.createElement('button');
    button.style.backgroundColor = item;
    button.addEventListener('click', function() {
      chrome.storage.sync.set({color: item}, function() {
        console.log('color is ' + item);
      })
    });
    page.appendChild(button);
  }
}
constructOptions(kButtonColors);

Vier Farboptionen werden dann als Schaltflächen mit „onclick“-Ereignis-Listenern auf der Seite „Optionen“ generiert. Wenn der Nutzer auf eine Schaltfläche klickt, wird der Farbwert im globalen Speicher der Erweiterung aktualisiert. Da alle Dateien der Erweiterung die Farbinformationen aus dem globalen Speicher abrufen, müssen keine anderen Werte aktualisiert werden.

Gleich loslegen

Glückwunsch! Das Verzeichnis enthält jetzt eine voll funktionsfähige, wenn auch vereinfachte Chrome-Erweiterung.

Nächste Schritte

• In der Übersicht über Chrome-Erweiterungen finden Sie weitere Informationen zur Architektur von Erweiterungen im Allgemeinen sowie mit einigen spezifischen Konzepten, mit denen Entwickler vertraut sein sollten.
• 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.
• Das Entwicklerhandbuch enthält Dutzende zusätzliche Links zu Dokumentationen, die für das Erstellen von erweiterten Erweiterungen relevant sind.