So erstellen Sie eine Chrome-Erweiterung

In diesem Artikel werde ich Ihnen zeigen, wie Sie eine eigene Chrome-Erweiterung erstellen. Ich stütze mich dabei auf die Lehren, die ich beim Erstellen von TalkToMe gezogen habe, einer Chrome-Erweiterung, die Sehbehinderten hilft, indem sie Website-Inhalte liest und zu anderen Webseiten navigiert.

Ich werde die Grundlagen des Einrichtens Ihrer Erweiterung behandeln, einschließlich:

  • Konfigurieren der Dateien für das Setup
  • Bereiten Sie es für den Chrome Store vor
Ich werde nicht darauf eingehen, wie Audiofunktionen verwaltet werden, z. B. der Umgang mit Mikrofonberechtigungen. Dies wurde in diesem Artikel von meinem Freund Palash behandelt und verwendet auch die TalkToMe-Erweiterung als Beispiel.

Konfigurieren der Dateien für das Setup

Gehen Sie zunächst in Ihrem Browser zu chrome: // extensions oder klicken Sie einfach im Chrome-Menü auf "More Tools" und "Extensions". Dies sollte Sie zur Seite "Erweiterungsverwaltung" führen, auf der Sie den Entwicklermodus aktivieren können (er sollte sich in der oberen rechten Ecke befinden).

Anschließend müssen Sie eine manifest.jsonDatei in einem neuen Verzeichnis für Ihre Erweiterung erstellen. Diese Datei enthält wichtige Informationen, damit Ihre Erweiterung funktioniert, z. B. Berechtigungen und die Skriptdateien, mit denen Sie Ihr Projekt verknüpfen. So sollte der Inhalt Ihres Manifests aussehen:

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

Um Ihr Verzeichnis auf die Seite "Erweiterungsverwaltung" hochzuladen, klicken Sie auf die Schaltfläche "Entpackt laden" und wählen Sie Ihr Verzeichnis aus. Dadurch werden Ihre Dateien mit der webbasierten Benutzeroberfläche verknüpft.

Eine weitere wichtige Datei, die Sie konfigurieren müssen background.js, ist das Hintergrundskript Ihres Projekts.

Ein Beispiel-Hintergrundskript hat diese Art von Struktur:

chrome.runtime.onInstalled.addListener(function() { // add an action here});

Es wird immer ausgeführt, während Ihre Nebenstelle eingeschaltet ist, und ist nützlich, um verschiedene Ereignisse wie Tastendrücke zu hören oder zu verschiedenen Seiten zu navigieren.

Sie können sogar mehrere Hintergrundskripte haben. Sie müssen nur alle zuerst in Ihrer Manifestdatei registrieren. Strukturieren Sie dazu einfach manifest.jsso: So sieht die Manifestdatei zu unserer Erweiterung aus:

{ "name": "Chrome Extension Example", ...
 "background": { "scripts": [ "js/es6-promise.auto.min.js", "js/defaults.js", "js/speech.js", "js/document.js", "js/events.js", "js/stt.js", "js/listen.js" ], "persistent": false }}

Jetzt benötigen Sie eine Datei nicht nur für die Funktion Ihrer Erweiterung, sondern auch für die Benutzeroberfläche. Erstellen Sie dazu eine Datei mit dem Namen popup.html. Das Popup ist ein kleines Fenster, das angezeigt wird, sobald Sie auf Ihr Erweiterungssymbol klicken. Hier ist beispielsweise das Popup für die Firefox-Erweiterung von Cookie Manager.

Die popup.htmlDatei kann sehr einfach sein. Unten finden Sie einen Code zum Erstellen eines Popups mit einer einzigen Schaltfläche. Es ist so einfach wie das Hinzufügen von Schaltflächen-Tags zum Öffnen und Schließen zum Hauptteil des Dokuments und einige Stilregeln.

    button { height: 30px; width: 30px; outline: none; }  ;    

Natürlich enthält der popup.htmlCode für unsere Erweiterung viel mehr Komponenten als diese. Sie können jederzeit weitere Schaltflächen, Stylesheets und alles andere hinzufügen, was Sie für Ihre Erweiterungsidee für geeignet halten.

Zeit zum Konfigurieren des Popup-Codes und des Symbols. Für das Symbol müssen Sie jedoch Code an zwei Stellen hinzufügen: "default_icon" und "icons". Die Eigenschaft "default_icon" wird für Symbolleistensymbole und "Symbole" für die auf der Seite "Erweiterungsverwaltung" angezeigten Bilder verwendet.

Gehen Sie zurück zu manifest.jsonund fügen Sie die folgenden Codezeilen hinzu, wobei Sie die Bildpfade für das Standardsymbol durch Ihre eigenen Bilder ersetzen. Sie können auch dieselben Bilder für "default_icon" und "icons" einfügen. Und Sie nicht brauchen , wie die , die unten angegebenen Bilder mit den gleichen Abmessungen zu setzen. Wenn Sie beispielsweise nur Bilder mit einer Größe von 16 x 16 und 48 x 48 haben, können Sie die beiden anderen Zeilen löschen, in denen 32 und 128 Pixel angegeben sind.

{ "name": "Chrome Extension Example", ...
 "page_action": { "default_popup": "popup.html", "default_icon": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" } }, "icons": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" }}

Dies sind also die Dateien, die für die Erstellung einer Chrome-Erweiterung unerlässlich sind:

  • eine Manifestdatei,
  • Hintergrundskripte und
  • eine Popup-Datei

Einige andere Dateien, die Sie möglicherweise konfigurieren möchten, sind:

  • options.html und
  • options.js

options.jsbietet Ihren Benutzern eine größere Auswahl an Optionen für die Verwendung Ihrer Erweiterung. Es wird sich darum kümmern, wie Ihre Optionsseite aussieht (sie ist sehr ähnlich popup.html), während options.jsdie Funktionalität behandelt wird.

Diese Dateien sind optional. Wenn Sie sie jedoch hinzufügen möchten, vergessen Sie nicht, sie options.htmlim Manifest zu konfigurieren und Ihre options.jsDatei durch Hinzufügen von <; / script> direkt vor dem Ende Ihres HTML-Tags zu verknüpfen .

{ "name": "Chrome Extension Example", ... "options_page": "options.html"}

Um Ihre Erweiterung in Aktion zu sehen, speichern Sie alle Ihre Dateien und klicken Sie auf "Neu laden", während Sie sich auf der Seite "Erweiterungsverwaltung" befinden. Sie sollten Ihr Symbol in der Symbolleiste sehen. Um Ihre Optionsseite anzuzeigen, können Sie auch unter Ihrer Erweiterung auf "Details" klicken und nach unten zu "Erweiterungsoptionen" scrollen.

Veröffentlichen Sie Ihr Projekt im Webshop

Sie haben also Ihre Erweiterung entwickelt und getestet. Jetzt müssen Sie es verteilen!

Um mit dem Hochladen Ihres Projekts zu beginnen, konvertieren Sie es zunächst in eine ZIP-Datei. Die Datei sollte mindestens die manifest.jsonDatei enthalten . Stellen Sie dann sicher, dass Sie ein Entwicklerkonto haben, indem Sie das Chrome Webstore Developer Dashboard besuchen.

Klicken Sie auf die Schaltfläche "Neues Element hinzufügen", damit Sie Ihre .zipDatei dort hochladen können . Wenn Sie keine Zahlungen für Ihre App registrieren möchten, können Sie den Schritt zum Einrichten eines Zahlungssystems überspringen. Sie müssen jedoch eine einmalige Entwicklergebühr von 5 USD zahlen, wenn Sie Ihr Projekt in den Webshop stellen.

Vergessen Sie auch nicht, eine detaillierte Beschreibung und Bilder Ihrer Erweiterung beizufügen, damit potenzielle Benutzer genau wissen, was Ihr Projekt tut!

Once all of this is complete, you’ll receive an app ID and an OAuth token. The app ID is used for making requests to Google APIs, while the OAuth token is used for making Web Store payments.

Congratulations, you have now published your extension! ?

If you enjoyed this post, check out this next article. We’ll be diving deeper into how to configure audio features in your Chrome extension, just like we did for TalkToMe.