So schreiben und erstellen Sie eine grundlegende Chrome-Erweiterung

Cum se scrie și se creează o extensie Chrome de bază
⏱️ 4 min read

Chrome ist mit Abstand der beliebteste Webbrowser der Welt. Laut der Marktanteilsumfrage von Statcounter für Desktop-Browser nimmt Chrome a mit nach Hause satte 65% des Marktes in Desktop-Browsern ab Ende 2017.

Mit dieser marktbestimmenden Kraft hat das Entwerfen für Chrome Priorität. Gleiches gilt für Erweiterungen: Chrome bietet mit Abstand die größte Nutzerbasis für Erweiterungen. Zehntausende von Erweiterungen, Themen und Apps füllen den Chrome Web Store.

Wenn Sie vom Trend profitieren möchten, können Sie Ihre eigene grundlegende Chrome-Erweiterung erstellen. Sie benötigen lediglich einige grundlegende Kenntnisse in der Webentwicklung (HTML, CSS und Javascript) sowie einen Teelöffel JSON, um alles miteinander zu verbinden.

In diesem Beitrag werden wir die grundlegendste Struktur überprüfen, die zum Erstellen einer grundlegenden Chrome-Erweiterung erforderlich ist. Schauen Sie sich die verfügbaren Möglichkeiten an, um einen detaillierten Überblick zu erhalten Chrome Developer Extension Guide.

[FIX] "Kein Internet, Gesichert...
[FIX] "Kein Internet, Gesichert" Windows 10/11| Routech

Schreiben einer grundlegenden Chrome-Erweiterung: Manifest Destiny

In diesem Tutorial erstellen wir eine grundlegende Chrome-Erweiterung, die beim Klicken eine einfache Popup-Meldung anzeigt. Wir benötigen einige wichtige Dateien: ein Symbol (“icon.png”), eine HTML-Datei (“popup.html”) und das alles entscheidende Manifest (“manifest.json”). Alle diese Dateien befinden sich in einem Verzeichnis mit dem Namen Ihrer Erweiterung. In diesem Fall heißt das “Hallo Welt”.

Eine Chrome-Erweiterung wird durch ihr Manifest definiert. Dieses JSON-Snippet zeigt Chrome, wie die Erweiterung interpretiert wird, welche Dateien geladen werden und wie mit dem Benutzer interagiert wird.

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

Diese Manifestdatei fügt ein Symbol in die Symbolleiste des Benutzers ein, das beim Klicken den Inhalt der Datei mit dem Namen “popup.html” lädt. Das Folgende ist das Wesentliche am Rest des Inhalts:

  • manifest_version teilt Chrome mit, mit welcher Version des Manifest-Markups Sie arbeiten. Für moderne Erweiterungen müssen Sie dies einstellen 2.
  • name Zeigt den Namen an, den die Erweiterung im Chrome Store anzeigt, und “chrome: // extensions”.
  • description zeigt den beschreibenden Text an, 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 Abzeichen anzeigt. Überprüfen Sie a vollständige Liste aller Funktionen von “browser_action”.
  • 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 begrenzt den Funktionsbereich der Erweiterung. activeTab ist die häufigste Methode, mit der die Erweiterung auf die vorderste Registerkarte zugreifen kann. Google bietet eine Liste von Alle Berechtigungen, die eine Erweiterung anfordern kann.

Wenn Sie tief in alles eintauchen möchten, was das Manifest einer Chrome-Erweiterung deklarieren kann, lesen Sie Googles Dokumente zu Erweiterungsmanifesten.

Schreiben einer grundlegenden Chrome-Erweiterung: Popups

Nachdem wir unser Manifest geschrieben haben, können wir herausfinden, was in unserer Erweiterung angezeigt wird. Das liegt an unserer Datei “popup.html”, die beim Laden der Erweiterung angezeigt wird. Folgendes werden wir für dieses Projekt verwenden:

Wie Sie sehen können, wird dadurch mit CSS gestalteter Text gerendert. Wenn Sie Ihrer Erweiterung Javascript oder externes CSS hinzufügen möchten, müssen Sie die Skripte im Manifest unter dem deklarieren content_scripts Schlüssel. Sobald Sie dies im Manifest referenziert haben, können Sie diese Skripte wie gewohnt laden.

Schreiben einer grundlegenden Chrome-Erweiterung: Laden in Chrome

Sobald wir den Basiscode für unsere Erweiterung geschrieben und ein geeignetes 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.

Build-a-Chrome-Extension-Load-Extension-1

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

Build-a-Chrome-Extension-Load-Extension-2

3. Sobald die Erweiterung geladen ist, wird das Symbol in der Menüleiste angezeigt.

Build-a-Chrome-Extension-Load-Extension-3

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

Build-a-Chrome-Extension-Load-Extension-4

Fazit: Erweitern Sie Ihre Chrome-Erweiterung

Sobald Sie mit Ihrer Erweiterung fertig sind und zur Veröffentlichung bereit sind, müssen Sie ein Chrome-Entwicklerkonto erstellen. Das ist kein genau einfacher Prozess, aber Google bietet Vollständige Anweisungen zum Veröffentlichen Ihrer Chrome-Erweiterung finden Sie hier.

Mit Ihrer Chrome-Erweiterung können Sie natürlich noch so viel mehr tun, aber das geht etwas über den Rahmen dieses Beitrags hinaus. Wenn Sie mehr über alle Funktionen von Chrome-Erweiterungen erfahren möchten, lesen Sie die Google-Funktionen Chrome Developer-Erweiterungshandbuch.

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar of Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

Das könnte dich auch interessieren …

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x