Erste Schritte
Manifest V3 startet bald! Weitere Informationen finden Sie in der MV3-Dokumentation und erwägen Sie, Ihre Erweiterung in MV3 zu entwickeln.
Erweiterungen bestehen aus verschiedenen, aber zusammenhängenden Komponenten. Komponenten können Hintergrundskripte, Inhaltsskripte, eine Optionsseite, UI-Elemente und verschiedene Logikdateien enthalten. Erweiterungskomponenten werden mit Webentwicklungstechnologien erstellt: HTML, CSS und JavaScript. Die Komponenten einer Erweiterung hängen von ihrer Funktionalität ab und erfordern möglicherweise nicht jede Option.,
Dieses Tutorial erstellt eine Erweiterung, mit der der Benutzer die Hintergrundfarbe einer beliebigen Seite auf developer.chrome.com. Es wird viele Kernkomponenten verwenden, um eine einführende Demonstration ihrer Beziehungen zu geben.
Erstellen Sie zum Starten ein neues Verzeichnis, in dem die Dateien der Erweiterung gespeichert sind.
Die fertige Erweiterung kann hier heruntergeladen werden.
Erstellen Sie das Manifest #
Erweiterungen beginnen mit ihrem Manifest. Erstellen Sie eine Datei mit dem Namen manifest.json und fügen Sie den folgenden Code ein, oder laden Sie die Datei hier herunter.,
Das Verzeichnis mit der Manifestdatei kann im aktuellen Zustand als Erweiterung im Entwicklermodus hinzugefügt werden.
- Öffnen Sie die Erweiterungsverwaltungsseite, indem Sie zu
chrome://extensionsnavigieren.- Die Erweiterungsverwaltungsseite kann auch geöffnet werden, indem Sie auf das Chrome-Menü klicken, mit der Maus über weitere Tools fahren und dann Erweiterungen auswählen.
- Aktivieren Sie den Entwicklermodus, indem Sie auf den Kippschalter neben dem Entwicklermodus klicken.
- Klicken Sie auf die Schaltfläche LOAD UNPACKED und wählen Sie das Erweiterungsverzeichnis aus.
Ta-da!, Die Erweiterung wurde erfolgreich installiert. Da im Manifest keine Symbole enthalten waren, wird für die Erweiterung ein generisches Symbol in der Symbolleiste erstellt.
Add instruction #
Obwohl die Erweiterung installiert wurde, hat sie keine Anweisung. Führen Sie ein Hintergrundskript ein, indem Sie eine Datei mit dem Titel background.js, oder laden Sie sie hier herunter und platzieren Sie sie im Erweiterungsverzeichnis.
Hintergrundskripte und viele andere wichtige Komponenten müssen im Manifest registriert sein., Das Registrieren eines Hintergrundskripts im Manifest teilt der Erweiterung mit, auf welche Datei verwiesen werden soll und wie sich diese Datei verhalten soll.
Die Erweiterung ist sich jetzt bewusst, dass sie ein nicht persistentes Hintergrundskript enthält, und scannt die registrierte Datei nach wichtigen Ereignissen, auf die sie hören muss.
Diese Erweiterung benötigt Informationen aus einer persistenten Variablen, sobald sie installiert ist. Beginnen Sie damit, ein Abhörereignis für runtime.onInstalled in das Hintergrundskript aufzunehmen. Innerhalb des Listeners onInstalled legt die Erweiterung mithilfe der Speicher-API einen Wert fest., Dadurch können mehrere Erweiterungskomponenten auf diesen Wert zugreifen und ihn aktualisieren.
Die meisten APIs, einschließlich der Speicher-API, müssen im Manifest unter dem Feld "permissions" registriert sein, damit die Erweiterung sie verwenden kann.
Navigieren Sie zurück zur Seite Extension Management und klicken Sie auf den Link Reload. Ein neues Feld, Inspect views, wird mit einem blauen Link, einer Hintergrundseite, verfügbar.,
Klicken sie auf den link, um die hintergrund skript „s konsole log,“The color is green. “
Einführung eine benutzer interface #
Erweiterungen können haben viele formen von eine benutzer interface, aber diese wird ein popup. Erstellen und fügen Sie eine Datei mit dem Titel popup.html in das Verzeichnis ein oder laden Sie sie hier herunter. Diese Erweiterung verwendet eine Schaltfläche, um die Hintergrundfarbe zu ändern.
Wie das Hintergrundskript muss diese Datei im Manifest unter page_actionals Popup bezeichnet werden.,
Die Bezeichnung für Symbolleistensymbole ist auch unter im Feld default_icons enthalten. Laden Sie den Bilderordner hier herunter, entpacken Sie ihn und legen Sie ihn in das Verzeichnis der Erweiterung. Aktualisieren Sie das Manifest, damit die Erweiterung weiß, wie die Bilder verwendet werden.
Erweiterungen zeigen auch Bilder auf der Seite Erweiterungsverwaltung, die Berechtigungswarnung und Favicon an. Diese Bilder werden im Manifest unter iconsbezeichnet.,
Wenn die Erweiterung zu diesem Zeitpunkt neu geladen wird, enthält sie ein Graustufensymbol, enthält jedoch keine Funktionsunterschiede. Da im Manifest deklariert ist, liegt es an der Erweiterung, dem Browser mitzuteilen, wann der Benutzer mit popup.htmlinteragieren kann.
Fügen Sie dem Hintergrundskript deklarierte Regeln mit derdeclarativeContent – API innerhalb des Listener-Ereignisses runtime.onInstalled hinzu.
Die Erweiterung benötigt die Berechtigung, auf diedeclarativeContent – API in ihrem Manifest zuzugreifen.,
Der Browser zeigt nun ein vollfarbiges Seitenaktionssymbol in der Browser-Symbolleiste an, wenn Benutzer zu einer URL navigieren, die "developer.chrome.com"enthält. Wenn das Symbol vollfarbig ist, können Benutzer darauf klicken, um das Popup anzuzeigen.HTML.
Der letzte Schritt für die Popup-Benutzeroberfläche ist das Hinzufügen von Farbe zu der Schaltfläche. Erstellen und fügen Sie eine Datei mit dem Namen https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js mit dem folgenden Code in das Erweiterungsverzeichnis ein oder laden Sie sie hier herunter.
Dieser Code greift die Schaltfläche von popup.html und fordert den Farbwert aus dem Speicher an., Anschließend wird die Farbe als Hintergrund der Schaltfläche angewendet. Fügen Sie ein Skript-Tag in https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js in popup.htmlein.
Laden Sie die Erweiterung neu, um die grüne Schaltfläche anzuzeigen.
Layer logic #
Die Erweiterung weiß nun, dass das Popup für Benutzer verfügbar sein sollte developer.chrome.com und zeigt eine farbige Schaltfläche an, benötigt jedoch Logik für die weitere Benutzerinteraktion. Aktualisieren Sie https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js, um den folgenden Code einzuschließen.,
Der aktualisierte Code fügt der Schaltfläche ein onclick – Ereignis hinzu, das ein programmgesteuert injiziertes Inhaltsskript auslöst. Dadurch erhält die Hintergrundfarbe der Seite dieselbe Farbe wie die Schaltfläche. Die Verwendung der programmatischen Injektion ermöglicht vom Benutzer aufgerufene Inhaltsskripte, anstatt unerwünschten Code automatisch in Webseiten einzufügen.
Das Manifest benötigt die Berechtigung activeTab, um der Erweiterung temporären Zugriff auf die API tabs zu ermöglichen. Dadurch kann die Erweiterung tabs.executeScriptaufrufen.,
Die Erweiterung ist jetzt voll funktionsfähig! Laden Sie die Erweiterung neu, aktualisieren Sie diese Seite, öffnen Sie das Popup und klicken Sie auf die Schaltfläche, um sie grün zu machen! Einige Benutzer möchten jedoch möglicherweise den Hintergrund in eine andere Farbe ändern.
Geben Sie Benutzern Optionen #
Die Erweiterung ermöglicht es Benutzern derzeit nur, den Hintergrund in Grün zu ändern. Einschließlich einer Optionsseite gibt Benutzern mehr Kontrolle über die Funktionalität der Erweiterung, weitere Anpassung ihrer Browser-Erfahrung.,
Erstellen Sie zunächst eine Datei im Verzeichnis options.html und fügen Sie den folgenden Code ein oder laden Sie ihn hier herunter.
Registrieren Sie dann die Optionsseite im Manifest,
Laden Sie die Erweiterung neu und klicken Sie auf DETAILS.
Scrollen Sie auf der Detailseite nach unten und wählen Sie Erweiterungsoptionen aus, um die Optionsseite anzuzeigen.
Der letzte Schritt besteht darin, die Optionslogik hinzuzufügen., Erstellen Sie eine Datei mit dem Namen options.js im Erweiterungsverzeichnis mit dem folgenden Code oder laden Sie sie hier herunter.
Vier Farboptionen werden dann als Schaltflächen auf der Optionsseite mit Onclick-Ereignis-Listenern generiert. Wenn der Benutzer auf eine Schaltfläche klickt, aktualisiert er den Farbwert im globalen Speicher der Erweiterung. Da alle Dateien der Erweiterung die Farbinformationen aus dem globalen Speicher abrufen, müssen keine anderen Werte aktualisiert werden.
herzlichen Glückwunsch! Das Verzeichnis enthält jetzt eine voll funktionsfähige, wenn auch vereinfachte Chrome-Erweiterung.
Was kommt als nächstes?,
- Die Chrome-Erweiterungsübersicht sichert ein wenig und füllt viele Details über die Erweiterungsarchitektur im Allgemeinen aus, und einige spezifische Konzepte, mit denen Entwickler vertraut sein möchten.
- Im Debugging-Tutorial erfahren Sie mehr über die verfügbaren Optionen zum Debuggen von Erweiterungen.
- Chrome-Erweiterungen haben Zugriff auf leistungsstarke APIs über und über das, was im offenen Web verfügbar ist. Chrome.* Die APIs-Dokumentation durchläuft jede API.
- Das Entwicklerhandbuch enthält Dutzende zusätzlicher Links zu Dokumentationen, die für die Erstellung erweiterter Erweiterungen relevant sind.,