So schreiben Sie eine Chrome-Erweiterung: Schritt-für-Schritt-Anleitung mit Beispielcode

Veröffentlicht: 2022-04-10

Browsererweiterungen können eine großartige Möglichkeit sein, Ihre Programmierkenntnisse zu nutzen und etwas zu bauen, mit dem Sie sich wiederholende Aufgaben mit nur wenigen Klicks erledigen können. Wenn Sie das erreichen möchten, ist es ein guter Anfang, zu lernen, wie man eine Chrome-Erweiterung schreibt.

Google Chrome stellt seinen Erweiterungsentwicklern viele verschiedene APIs zur Verfügung, z. B. zum Hinzufügen einer neuen Seite, eines Popups, zum Erstellen von Benachrichtigungen, zum Einrichten einer Standardsuchmaschine oder sogar zum Erstellen eines Kontextmenüelements (das Menü, das angezeigt wird, wenn Sie mit der rechten Maustaste klicken auf einer Seite).

Die Möglichkeiten sind grenzenlos, von einer Erweiterung, die „Hello World!“ wiedergibt. zu einer Erweiterung, mit der Sie einen Screenshot der Webseite erstellen können.

So schreiben Sie eine Chrome-Erweiterung

Inhaltsverzeichnis:

Die Struktur der Erweiterung
Laden der Erweiterung
Hinzufügen einer Popup-Benutzeroberfläche
Verwenden der Benachrichtigungs-API
Hinzufügen eines Kontextmenüeintrags
Verwenden der Speicher-API zum Speichern von Daten
Verteilen der Erweiterung

So erstellen Sie eine #Google #Chrome-Erweiterung: Schritt-für-Schritt-Anleitung für Anfänger

Klicken Sie hier, um zu twittern

In diesem Tutorial zeigen wir Ihnen, wie Sie eine Chrome-Erweiterung schreiben, die Browserbenachrichtigungen aus einem Popup-Menü sendet. Wir werden auch das Kontextmenü und die Datenspeicher-APIs verwenden, um das Beste daraus zu machen. Wir nennen es Benachrichtigen! mit Ausrufezeichen!

Erstellen Sie eine Google Chrome-Erweiterung

Der Code der Erweiterung ist auf GitHub öffentlich, also zögern Sie nicht, ihn zu forken und zu verwenden.

So schreiben Sie eine Chrome-Erweiterung: die Struktur

Bevor wir fortfahren, sollten Sie sich die Entwicklerdokumentation von Google Chrome ansehen, um mehr über die Entwicklung von Chrome-Erweiterungen im Allgemeinen zu erfahren.

Wenn Sie außerdem eine Chrome-Erweiterung für den Chrome Web Store schreiben möchten, sehen Sie sich bitte deren Einzweckrichtlinie an.

Beginnen wir damit, einen neuen Ordner mit dem Namen " notify " auf Ihrem Gerät zu erstellen. Dieser Ordner enthält alles, was Teil Ihrer Erweiterung sein wird.

Jetzt müssen Sie eine Manifestdatei erstellen, die alle Informationen über unsere Erweiterung enthält. Erstellen Sie eine Datei namens manifest.json und fügen Sie den folgenden Code ein:

 { "name" : "Notify!" , "description" : "A Google Chrome extension!" , "version" : "1.0" , "manifest_version" : 3 , "icons" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } }
 Codesprache: JSON / JSON mit Kommentaren ( json )

Wie Sie sehen können, enthält es bisher nur Metainformationen zu Ihrer Erweiterung, z. B. Name, Beschreibung und Version. Die manifest_version teilt Chrome mit, welche Version der Erweiterungs-API Sie verwenden.

Laden der Erweiterung

Nachdem Sie Ihre Manifestdatei erstellt haben, können Sie Ihre Erweiterung im Chrome-Browser laden:

Laden einer Erweiterung in Google Chrome

Öffnen Sie die Seite Erweiterungsverwaltung, indem Sie zu chrome://extensions navigieren, oder Sie können sie auch über das Menü Erweiterungen in den Einstellungen öffnen.

Aktivieren Sie dort den Entwicklermodus und verwenden Sie die Schaltfläche Ungepackt laden, um Ihr Erweiterungsverzeichnis auszuwählen.

Siehe deine Verlängerung! Nachdem Ihre Erweiterung geladen wurde, können Sie sie Schritt für Schritt verbessern und die Änderungen beobachten.

Stellen Sie sicher, dass Sie dem Ordner „ assets/icons/ “ ein Symbol für Ihre Erweiterung hinzufügen, da sonst ein Standardsymbol angezeigt wird.

Hinzufügen einer Popup-Benutzeroberfläche

Fahren wir fort, indem wir der Erweiterung eine Benutzeroberfläche hinzufügen, von der aus Benutzer mit den bereitgestellten Optionen interagieren können.

Es gibt mehrere Möglichkeiten, dies zu tun, z. B. das Hinzufügen einer ganzen Seite, aber ein Popup ist normalerweise der richtige Weg für die meisten Erweiterungen.

Um der Erweiterung ein Popup hinzuzufügen, müssen Sie dies zu Ihrer manifest.json -Datei hinzufügen:

 "action" : { "default_popup" : "popup.html" , "default_icon" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } },
 Codesprache: JavaScript ( javascript )

Damit teilen Sie der Erweiterung den Speicherort der HTML-Datei Ihres Popups und die Standardsymbole mit. Dies ist nur das Standardsymbol, da die API es Ihnen ermöglicht, das Symbol unterwegs zu ändern. Wenn Sie beispielsweise einen Google PageSpeed-Test erstellen, können auf der Website basierend auf ihren Seitenrankings verschiedene Symbole angezeigt werden.

Das Popup der Google Chrome-Erweiterung

Jetzt können Sie den HTML-Code Ihres Popups zur Datei hinzufügen, wie wir es in unserem Beispiel tun:

 <!DOCTYPE html > < html > < head > < link rel = "stylesheet" href = "assets/css/popup.css" > </ head > < body > < div id = "notify-wrapper" > < div id = "notify-header" > < h1 > Notify! </ h1 > </ div > < div id = "notify-containers" > < div class = "notify-form" > < label for = "text" > Notification </ label > < textarea name = "text" id = "notify-text" placeholder = "Let's notify!" > </ textarea > </ div > < div class = notify-buttons > < p > Total: < span id = "notify-count" > </ span > </ p > < button class = "button" id = "notify-reset" > Reset </ button > < button class = "button primary" id = "notify-button" > Notify! </ button > </ div > </ div > </ div > < script src = "assets/js/popup.js" > </ script > </ body > </ html >
 Codesprache: HTML, XML ( xml )

Diese HTML-Datei ist auch mit einem Stylesheet und einem Skript verknüpft, um unserem Popup Stil und Funktionalität hinzuzufügen.

Wenn Sie mitmachen, können Sie den CSS-Code von hier abrufen. Wir werden der Datei später in diesem Tutorial JavaScript hinzufügen.

Bisher haben Sie eine Google Chrome-Erweiterung mit einem Popup erstellt, und wir haben nur ein paar Zeilen Code benötigt. Wie wir eingangs gesagt haben, ist das Erstellen einer Google Chrome-Erweiterung sehr einfach!

In diesem Tutorial werden wir dieser Erweiterung Funktionen hinzufügen und sie zu mehr als nur einem Platzhalter machen.

Verwenden der Benachrichtigungs-API

Wie der Name der Erweiterung schon sagt, handelt es sich um eine Benachrichtigungserweiterung, also fügen wir welche hinzu!

Bevor Sie einige der APIs verwenden, müssen Sie Berechtigungen für sie in der Datei manifest.json angeben. Einer der Gründe dafür ist, dass Ihre Erweiterungsbenutzer wissen, welche Berechtigungen Ihre Erweiterung verlangt, bevor sie sie installieren.

Für Benachrichtigungen gehen Sie wie folgt vor:

 "permissions" : [ "notifications" ],
 Codesprache: JavaScript ( javascript )

Sie müssen der Nebenstelle auch einen Servicemitarbeiter hinzufügen, um Benachrichtigungen zu senden. Dazu müssen Sie dies zu Ihrem Manifest hinzufügen:

 "background" : { "service_worker" : "background.js" },
 Codesprache: JavaScript ( javascript )

Sie benötigen einen Service Worker für die Benachrichtigungs-API, da sie nicht direkt aus der Datei popup.js verwendet werden kann.

In der Datei background.js müssen Sie den folgenden Code hinzufügen, um eine Benachrichtigung zu senden:

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : data.message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); } });
 Codesprache: JavaScript ( javascript )

Hier verwenden wir den onMessage Ereignis-Listener, um den Auslöser für Push-Benachrichtigungen aus dem Popup zu erhalten.

Wir verwenden auch die create Methode, um eine neue Benachrichtigung zu erstellen. Benachrichtigungen können verschiedene Typen haben, aber hier wird der „Basis“-Typ verwendet. Sie sollten sich alle verfügbaren Optionen ansehen.

Nachdem die create -Methode nun vorhanden ist, können Sie sie wie folgt aus der Datei popup.js :

 const text = document .getElementById( 'notify-text' ); const notify = document .getElementById( 'notify-button' ); notify.addEventListener( 'click' , () => { chrome.runtime.sendMessage( '' , { type : 'notification' , message : text.value }); } );
 Codesprache: JavaScript ( javascript )

Hier wird die Aktion sendMessage verwendet, um die Benachrichtigung auszulösen. Und voila! Wir haben eine Erweiterung, die eine Benachrichtigung auslöst.

Stellen Sie sicher, dass Sie die neueste Version von Google Chrome verwenden und ihm die Berechtigung zum Auslösen von Benachrichtigungen erteilt haben. Kurz gesagt, seien Sie nicht wie ich, der Stunden damit verbracht hat, herauszufinden, warum keine Benachrichtigungen angezeigt wurden.

Hinzufügen eines Kontextmenüeintrags

Wie in der Einleitung erwähnt, ist das Kontextmenü das Menü, das bei einem Rechtsklick erscheint:

Es kann viele Gründe dafür geben, dass Ihre Erweiterung über ein Kontextmenüelement verfügt. Ein prominentes Beispiel ist, einen Text mit dem Cursor auszuwählen und dann bei Google zu suchen.

Sie können dem Kontextmenü beliebig viele Elemente hinzufügen, aber wenn Ihre Erweiterung mehr als ein Element hinzufügt, werden sie unter einem übergeordneten Element reduziert.

Dazu müssen Sie Ihrer Manifestdatei auch Berechtigungen hinzufügen:

 "permissions" : [ "contextMenus" , "notifications" ],
 Codesprache: JavaScript ( javascript )

Nachdem Sie nun Berechtigungen für contextMenus hinzugefügt haben, können Sie dies zu Ihrer Datei background.js hinzufügen:

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { notify( data.message ); } }); chrome.runtime.onInstalled.addListener( () => { chrome.contextMenus.create({ id : 'notify' , title : "Notify!: %s" , contexts :[ "selection" ] }); }); chrome.contextMenus.onClicked.addListener( ( info, tab ) => { if ( 'notify' === info.menuItemId ) { notify( info.selectionText ); } } ); const notify = message => { return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 Codesprache: JavaScript ( javascript )

Der obige Code enthält auch den Code aus dem vorherigen Schritt zum Auslösen einer Benachrichtigung, der jetzt in die notify abstrahiert wird, damit er wiederverwendet werden kann.

Die Aktion contextMenus.create wird verwendet, um ein Element zum Kontextmenü hinzuzufügen. Es ist an onInstalled , da es nur einmal initialisiert werden muss.

Danach verwenden wir, ähnlich wie im vorherigen Schritt, contextMenus.onClicked , um den Klick zu erfassen und eine Benachrichtigung auszulösen.

Es kann eine sehr raffinierte Möglichkeit sein, die Funktionalität Ihrer Erweiterung zu bündeln. Wenn Sie sich die Erweiterungen ansehen, die in Ihrem Browser verwendet werden, werden Sie viele Erweiterungen finden, die diesen Raum geschickt nutzen, um das Erlebnis ihrer Erweiterung zu verbessern.

Verwenden der Speicher-API zum Speichern von Daten

Nachdem Ihre Erweiterung nun einige Funktionen vorzuweisen hat, werfen wir einen Blick auf die Speicher-API. Die Speicher-API ist nützlich, wenn Sie einige Benutzerdaten in Ihrer Erweiterung speichern möchten.

Es gibt zwei Arten von Speicher-APIs: lokal und synchronisiert. Local Storage wird, wie der Name schon sagt, in Ihrem Browser gespeichert und bleibt lokal. Im Vergleich dazu ermöglicht der Synchronisierungsspeicher die Synchronisierung von Daten zwischen Browsern, die dasselbe Google-Konto verwenden. Für unsere Zwecke verwenden wir lokalen Speicher.

Zuerst müssen Sie Ihrer Manifestdatei eine Speicherberechtigung hinzufügen:

 "permissions" : [ "contextMenus" , "notifications" , "storage" ],
 Codesprache: JavaScript ( javascript )

Danach können Sie die Methoden storage.local.get und storage.local.set verwenden, um die Daten abzurufen oder zu speichern.

Sie können Ihrer popup.js -Datei den folgenden Code hinzufügen:

 const reset = document .getElementById( 'notify-reset' ); const counter = document .getElementById( 'notify-count' ); chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; counter.innerHTML = value; } ); chrome.storage.onChanged.addListener( ( changes, namespace ) => { if ( changes.notifyCount ) { let value = changes.notifyCount.newValue || 0 ; counter.innerHTML = value; } }); reset.addEventListener( 'click' , () => { chrome.storage.local.clear(); text.value = '' ; } );
 Codesprache: JavaScript ( javascript )

Dieser Code macht zwei Dinge:

Es aktualisiert die Benachrichtigungsanzahl im Popup, wenn wir das Popup öffnen oder sich der Speicherwert ändert. Zum Abhören von Speicheränderungen wird storage.onChanged verwendet.
Teilweise löschen wir den Speicher, wenn der Nutzer auf den Reset-Button klickt.

Der obige Code übernimmt die Aufgabe, die neueste Zählung abzurufen und zu aktualisieren. Jetzt bleibt die Einrichtung der Daten. Dazu können Sie unsere notify folgendermaßen aktualisieren:

 const notify = message => { chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; chrome.storage.local.set({ 'notifyCount' : Number ( value ) + 1 }); } ); return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 Codesprache: JavaScript ( javascript )

Hier erhalten wir die neuesten Speicherdaten und aktualisieren sie dann mit der neuesten Zählung.

Auf ähnliche Weise können Sie die chrome.storage.sync API verwenden, um die Optionen zwischen den Browsern zu synchronisieren.

Verteilen der Erweiterung

Herzliche Glückwünsche! Du hast es getan! Sie haben erfolgreich eine Google Chrome-Erweiterung erstellt, die viele verschiedene Teile der Google Chrome-Erfahrung nutzt, darunter:

Popups
Benachrichtigungs-API
Kontextmenü
Speicher-API

Wenn Sie den Code für diese Erweiterung sehen möchten, können Sie ihn in diesem GitHub-Repository von Notify abrufen.

Wir alle zeigen gerne die großartige Arbeit, die wir der Welt leisten. Sobald Ihre Erweiterung fertig ist, können Sie sie an den Chrome Web Store senden, damit andere Chrome-Benutzer sie herunterladen können.

Wenn Sie andere Optionen erkunden möchten, die Google Chrome Entwicklern von Erweiterungen bietet, empfehlen wir Ihnen, die offizielle Dokumentation zu lesen.

Ich hoffe, dieser Artikel hat seinen Teil dazu beigetragen, Ihnen beizubringen, wie man eine Chrome-Erweiterung schreibt. Wir sind gespannt, was Sie erstellen können, also teilen Sie uns Ihre Abenteuer mit der Entwicklung von Google Chrome-Erweiterungen im Kommentarbereich unten mit.