Chrome ist der beliebteste Webbrowser auf dem Planeten. Laut Statcounters Desktop-Browser-Marktanteilsumfrage belegt Chrome Ende 2017 erstaunliche 65% des Marktes für Desktop-Browser.

Mit dieser marktbestimmenden Kraft ist das Design für Chrome zur Priorität geworden. Dasselbe gilt für Erweiterungen: Chrome bietet mit Abstand die größte Nutzerbasis für Erweiterungen. Zehntausende von Erweiterungen, Designs und Apps füllen den Chrome Web Store.

Wenn Sie in den Trend einsteigen möchten, können Sie Ihre eigene grundlegende Chrome-Erweiterung erstellen. Sie brauchen nur ein paar grundlegende Web-Entwicklung Fähigkeiten (HTML, CSS und Javascript) sowie einen Teelöffel JSON, um alles zusammen zu binden.

Wir werden in diesem Beitrag die grundlegende Struktur überprüfen, die zum Erstellen einer grundlegenden Chrome-Erweiterung erforderlich ist. Weitere Informationen zu den verfügbaren Möglichkeiten erhalten Sie im Chrome Developer Extension Guide.

Eine einfache Chrome-Erweiterung schreiben: Manifest Destiny

Für dieses Tutorial erstellen wir eine einfache Chrome-Erweiterung, die beim Klicken eine einfache Popup-Meldung anzeigt. Wir benötigen ein paar wichtige Dateien: ein Icon ("icon.png"), eine HTML-Datei ("popup.html") und das wichtige Manifest ("manifest.json"). Alle diese Dateien werden in einem Verzeichnis mit dem Namen Ihrer Erweiterung gespeichert. In diesem Fall heißt das "Hallo Welt".

Eine Chrome-Erweiterung wird durch ihr Manifest definiert. Dieses Snippet von JSON zeigt Chrome, wie die Erweiterung zu interpretieren ist, welche Dateien geladen werden und wie mit dem Benutzer zu interagieren ist.

Die Manifestdatei für unsere grundlegende Erweiterung sieht folgendermaßen aus:

 {"manifest_version": 2, "name": "Hallo Welt!", "description": "Meine erste Chrome-Erweiterung.", "browser_action": {"default_icon": "icon.png", "default_popup": "popup .html "}, " Berechtigungen ": [" activeTab "]}

Diese Manifestdatei fügt ein Symbol in die Symbolleiste des Benutzers ein, das beim Klicken auf den Inhalt der Datei mit dem Namen "popup.html" geladen wird. Das Folgende ist das Wesentliche im Rest des Inhalts:

  • manifest_version wird Chrome mitgeteilt, mit welcher Version des Manifest-Markups Sie arbeiten. Bei modernen Erweiterungen müssen Sie dies auf 2.
  • name zeigt den Namen an, den die Erweiterung im Chrome Store und "chrome: // extensions" anzeigen wird.
  • description zeigt den beschreibenden Text, der auf "chrome: // extensions" angezeigt wird.
  • browser action lädt das Symbol in die Symbolleiste. Außerdem kann die Erweiterung auf Benutzereingaben reagieren, indem sie einen Tooltip, ein Popup oder ein Badge anzeigt. Schau dir eine vollständige Liste von allem an, was "browser_action" tun kann.
  • default_icon zeigt den Pfad zum Symbol aus dem Verzeichnis der Erweiterung an.
  • default_popup zeigt den Pfad zu der Datei an, die geladen wird, wenn auf das Symbol der Erweiterung geklickt wird.
  • permissions begrenzen den Funktionsbereich der Erweiterung. activeTab ist am gebräuchlichsten und ermöglicht es der Erweiterung, auf den vordersten Tab zuzugreifen. Google stellt eine Liste aller Berechtigungen zur Verfügung, die eine Erweiterung anfordern kann.

Wenn Sie einen tiefgehenden Einblick in alles haben möchten, was das Manifest einer Chrome-Erweiterung deklarieren kann, sehen Sie sich die Google-Dokumente zu den Erweiterungs-Manifesten an.

Eine einfache Chrome-Erweiterung schreiben: Popups

Jetzt, wo wir unser Manifest geschrieben haben, können wir herausfinden, was unsere Erweiterung zeigen wird. Das ist unsere "popup.html" -Datei, die angezeigt wird, wenn die Erweiterung geladen wird. Folgendes werden wir für dieses Projekt verwenden:

 Hallo Welt

Wie Sie sehen, wird dadurch ein Teil des Textes mit CSS formatiert. Wenn Sie Ihrer Erweiterung Javascript oder externes CSS hinzufügen möchten, müssen die Skripts im Manifest unter dem Schlüssel content_scripts deklariert werden. Sobald Sie diese im Manifest referenziert haben, können Sie diese Skripte wie gewohnt laden.

Eine einfache Chrome-Erweiterung schreiben: In Chrome laden

Sobald wir den Basiscode für unsere Erweiterung geschrieben und ein passendes Symbol gefunden haben, können wir ihn in Chrome laden.

1. Navigieren Sie zu "chrome: // extensions" und aktivieren Sie den "Developer Mode", indem Sie das Kontrollkästchen oben rechts aktivieren.

2. Klicken Sie auf die Schaltfläche "Entpackte Erweiterung laden ..." und wählen Sie das Verzeichnis der Erweiterung aus.

3. Sobald die Erweiterung geladen ist, sehen Sie ihr Symbol in der Menüleiste.

4. Klicken Sie auf die Erweiterung, um ihren (sehr einfachen) Effekt zu sehen.

Fazit: Erweitern Sie Ihre Chrome-Erweiterung

Sobald Sie mit Ihrer Erweiterung fertig sind und veröffentlicht werden können, müssen Sie ein Chrome-Entwicklerkonto erstellen. Das ist kein genaues Verfahren, aber Google bietet vollständige Anweisungen zum Veröffentlichen Ihrer Chrome-Erweiterung hier.

Es gibt offensichtlich so viel mehr, was Sie mit Ihrer Chrome-Erweiterung tun können, aber das geht etwas über den Rahmen dieses Posts hinaus. Wenn Sie mehr über alle Funktionen von Chrome-Erweiterungen erfahren möchten, lesen Sie das Google Chrome Developer Extension-Handbuch.