Erstellen Sie die erste Erweiterung, mit der ein neues Element auf der Seite eingefügt wird.
Überblick
In dieser Anleitung wird eine Erweiterung erstellt, mit der die voraussichtliche Lesezeit jeder Chrome-Erweiterung und Dokumentationsseite im Chrome Web Store hinzugefügt wird.
In diesem Leitfaden werden die folgenden Konzepte erläutert:
- Das Manifest der Erweiterung.
- Die von einer Erweiterung verwendeten Symbolgrößen.
- Das Einfügen von Code in Seiten mithilfe von Content-Skripts.
- Abgleichsmuster verwenden
- Erweiterungsberechtigungen.
Vorbereitung
In diesem Leitfaden wird davon ausgegangen, dass Sie über Grundkenntnisse in der Webentwicklung verfügen. Wir empfehlen die Anleitung Hello World, um eine Einführung in den Workflow zur Entwicklung von Erweiterungen zu erhalten.
Erweiterung erstellen
Erstellen Sie zuerst ein neues Verzeichnis mit dem Namen reading-time, in dem die Dateien der Erweiterung gespeichert werden. Wenn Sie möchten, können Sie den vollständigen Quellcode von GitHub herunterladen.
Schritt 1: Informationen zur Erweiterung hinzufügen
Die JSON-Manifestdatei ist die einzige erforderliche Datei. Sie enthält wichtige Informationen zur Erweiterung. Erstellen Sie eine manifest.json-Datei im Stammverzeichnis des Projekts und fügen Sie den folgenden Code hinzu:
{
"manifest_version": 3,
"name": "Reading time",
"version": "1.0",
"description": "Add the reading time to Chrome Extension documentation articles"
}
Diese Schlüssel enthalten grundlegende Metadaten für die Erweiterung. Sie steuern, wie die Erweiterung auf der Seite „Erweiterungen“ und bei der Veröffentlichung im Chrome Web Store angezeigt wird. Weitere Informationen findest du in den Schlüsseln "name", "version" und "description" auf der Übersichtsseite Manifest.
💡 Weitere Informationen zum Manifest der Erweiterung
- Sie muss sich im Stammverzeichnis des Projekts befinden.
- Die einzigen erforderlichen Schlüssel sind
"manifest_version","name"und"version". - Kommentare (
//) werden während der Entwicklung unterstützt. Diese müssen jedoch entfernt werden, bevor Sie Ihren Code in den Chrome Web Store hochladen.
Schritt 2: Symbole bereitstellen
Warum brauchen Sie also Symbole? Symbole sind während der Entwicklung optional. Sie sind aber erforderlich, wenn Sie Ihre Erweiterung über den Chrome Web Store vertreiben möchten. Sie werden auch an anderen Stellen angezeigt, z. B. auf der Seite zur Verwaltung von Erweiterungen.
Erstellen Sie einen images-Ordner und platzieren Sie die Symbole darin. Sie können die Symbole von GitHub herunterladen. Fügen Sie als Nächstes den hervorgehobenen Code in Ihr Manifest ein, um Symbole zu deklarieren:
{
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
Wir empfehlen die Verwendung von PNG-Dateien. Mit Ausnahme von SVG-Dateien sind jedoch auch andere Dateiformate zulässig.
💡 Wo werden diese Symbole in unterschiedlicher Größe angezeigt?
| Symbolgröße | Verwendung von Symbolen |
|---|---|
| 16x16 | Favicon auf den Seiten und im Kontextmenü der Erweiterung |
| 32x32 | Windows-Computer benötigen diese Größe häufig. |
| 48x48 | Wird auf der Seite „Erweiterungen“ angezeigt. |
| 128 × 128 | Wird bei der Installation und im Chrome Web Store angezeigt. |
Schritt 3: Inhaltsskript deklarieren
Erweiterungen können Skripts ausführen, die den Inhalt einer Seite lesen und ändern. Diese werden als Content-Skripts bezeichnet. Sie leben in einer isolierten Welt, d. h. sie können Änderungen an ihrer JavaScript-Umgebung vornehmen, ohne mit den Content-Skripts ihrer Hostseite oder anderer Erweiterungen in Konflikt zu stehen.
Fügen Sie manifest.json den folgenden Code hinzu, um ein Inhaltsskript namens content.js zu registrieren.
{
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://developer.chrome.com/docs/extensions/*",
"https://developer.chrome.com/docs/webstore/*"
]
}
]
}
Das Feld "matches" kann ein oder mehrere Übereinstimmungsmuster enthalten. Dadurch kann der Browser erkennen, auf welchen Websites die Inhaltsskripte eingefügt werden sollen. Übereinstimmungsmuster bestehen aus drei Teilen: <scheme>://<host><path>. Sie dürfen „*“-Zeichen enthalten.
💡 Zeigt diese Erweiterung eine Berechtigungswarnung an?
Wenn ein Nutzer eine Erweiterung installiert, wird der Browser darüber informiert, welche Aktionen die Erweiterung ausführen kann. Inhaltsskripte fordern die Berechtigung zur Ausführung auf Websites an, die die Kriterien für Übereinstimmungsmuster erfüllen.
In diesem Beispiel wird dem Nutzer die folgende Berechtigungswarnung angezeigt:
Weitere Informationen zu Erweiterungsberechtigungen finden Sie unter Berechtigungen deklarieren und Nutzer warnen.
Schritt 4: Lesezeit berechnen und einfügen
Inhaltsskripte können das standardmäßige Document Object Model (DOM) verwenden, um den Inhalt einer Seite zu lesen und zu ändern. Die Erweiterung prüft zuerst, ob die Seite das <article>-Element enthält.
Dann werden alle Wörter in diesem Element gezählt und ein Absatz erstellt, der die Gesamtlesezeit anzeigt.
Erstellen Sie eine Datei mit dem Namen content.js in einem Ordner namens scripts und fügen Sie den folgenden Code hinzu:
const article = document.querySelector("article");
// `document.querySelector` may return null if the selector doesn't match anything.
if (article) {
const text = article.textContent;
const wordMatchRegExp = /[^\s]+/g; // Regular expression
const words = text.matchAll(wordMatchRegExp);
// matchAll returns an iterator, convert to array to get word count
const wordCount = [...words].length;
const readingTime = Math.round(wordCount / 200);
const badge = document.createElement("p");
// Use the same styling as the publish information in an article's header
badge.classList.add("color-secondary-text", "type--caption");
badge.textContent = `⏱️ ${readingTime} min read`;
// Support for API reference docs
const heading = article.querySelector("h1");
// Support for article docs with date
const date = article.querySelector("time")?.parentNode;
(date ?? heading).insertAdjacentElement("afterend", badge);
}
💡 Interessanter JavaScript-Code, der in diesem Code verwendet wird
- Reguläre Ausdrücke, die verwendet werden, um nur die Wörter im
<article>-Element zu zählen. insertAdjacentElement()wird verwendet, um den Lesezeitknoten nach dem Element einzufügen.- Die Eigenschaft classList, die verwendet wird, um dem Attribut „Elementklasse“ CSS-Klassennamen hinzuzufügen.
- Optionale Verkettung für den Zugriff auf ein Objektattribut, das nicht definiert oder null ist.
- Nullish coalescing gibt den
<heading>zurück, wenn<date>null oder nicht definiert ist.
Testen, ob es funktioniert
Prüfen Sie, ob die Dateistruktur Ihres Projekts so aussieht:
Erweiterung lokal laden
Führen Sie zum Laden einer entpackten Erweiterung im Entwicklermodus die Schritte in Entwicklungsgrundlagen aus.
Erweiterung oder Chrome Web Store-Dokumentation öffnen
Hier sind einige Seiten, die Sie öffnen können, um zu sehen, wie lange es dauert, einen Artikel zu lesen.
Das sollte so aussehen:
🎯 Mögliche Verbesserungen
Versuchen Sie basierend auf dem, was Sie heute gelernt haben, Folgendes umzusetzen:
- Fügen Sie in der Datei „manifest.json“ ein weiteres Übereinstimmungsmuster hinzu, um andere Chrome-Entwicklerseiten zu unterstützen, z. B. die Chrome-Entwicklertools oder die Workbox.
- Fügen Sie ein neues Inhaltsskript hinzu, mit dem die Lesezeit für Ihre bevorzugten Blogs oder Dokumentationswebsites berechnet wird.
Weiter erstellen
Herzlichen Glückwunsch! Sie haben dieses Tutorial abgeschlossen. 🎉. Wenn Sie weitere Anleitungen aus dieser Reihe durchgehen, können Sie Ihre Fähigkeiten weiter ausbauen:
| Erweiterung | Lerninhalte |
|---|---|
| Konzentrationsmodus | Um Code auf der aktuellen Seite auszuführen, nachdem Sie auf die Erweiterungsaktion geklickt haben. |
| Tabs-Manager | So erstellen Sie ein Pop-up, das Browsertabs verwaltet |
Weiter erkunden
Wir hoffen, dass Ihnen die Entwicklung dieser Chrome-Erweiterung Spaß gemacht hat, und freuen uns auf die weitere Entwicklung von Chrome. Wir empfehlen den folgenden Lernpfad:
- Das Entwicklerhandbuch enthält Dutzende zusätzliche Links zu Dokumentationen, die für das Erstellen erweiterter Erweiterungen relevant sind.
- Erweiterungen haben Zugriff auf leistungsstarke APIs, die über das Angebot im offenen Web hinausgehen. In der Dokumentation zu Chrome APIs werden die einzelnen APIs erläutert.