Scripts auf jeder Seite ausführen

Erstellen Sie Ihre erste Erweiterung, mit der ein neues Element auf der Seite eingefügt wird.

Übersicht

In dieser Anleitung wird eine Erweiterung erstellt, die jeder Chrome-Erweiterung und jeder Chrome Web Store-Dokumentationsseite die voraussichtliche Lesezeit hinzufügt.

Verlängerung der Lesezeit auf der Willkommensseite der Erweiterung
Lesezeit-Erweiterung auf der Begrüßungsseite der Erweiterung.

In diesem Leitfaden werden die folgenden Konzepte erläutert:

  • Das Manifest der Erweiterung.
  • Welche Symbolgrößen für eine Erweiterung verwendet werden.
  • Wie Sie Code mithilfe von Inhaltsscripts in Seiten einschleusen.
  • Keyword-Optionen verwenden
  • Erweiterungsberechtigungen

Vorbereitung

In diesem Leitfaden wird davon ausgegangen, dass Sie grundlegende Erfahrung mit der Webentwicklung haben. In der Anleitung Hello World finden Sie eine Einführung in den Workflow zur Erweiterungsentwicklung.

Erweiterung erstellen

Erstellen Sie zuerst ein neues Verzeichnis mit dem Namen reading-time, in dem die Dateien der Erweiterung gespeichert werden sollen. Alternativ 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 im Stammverzeichnis des Projekts eine manifest.json-Datei 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. Damit wird festgelegt, wie die Erweiterung auf der Seite „Erweiterungen“ und, falls veröffentlicht, im Chrome Web Store angezeigt wird. Weitere Informationen finden Sie auf der Übersichtsseite des Manifests unter den Schlüsseln "name", "version" und "description".

💡 Weitere Informationen zum Manifest der Erweiterung

  • Er muss sich im Stammverzeichnis des Projekts befinden.
  • Die einzigen erforderlichen Schlüssel sind "manifest_version", "name" und "version".
  • Während der Entwicklung werden Kommentare (//) 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, aber erforderlich, wenn Sie Ihre Erweiterung im Chrome Web Store anbieten möchten. Sie werden auch an anderen Stellen angezeigt, z. B. auf der Seite „Verwaltung von Erweiterungen“.

Erstellen Sie einen images-Ordner und legen Sie die Symbole darin ab. Sie können die Symbole auf GitHub herunterladen. Fügen Sie Ihrem Manifest als Nächstes den markierten Code hinzu, 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. Andere Dateiformate sind zulässig, mit Ausnahme von SVG-Dateien.

💡 Wo werden diese Symbole in unterschiedlichen Größen angezeigt?

Symbolgröße Verwendung von Symbolen
16x16 Favicon auf den Seiten und im Kontextmenü der Erweiterung.
32 × 32 Diese Größe ist oft für Windows-Computer erforderlich.
48 × 48 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 Scripts ausführen, die den Inhalt einer Seite lesen und ändern. Diese werden als Inhaltsscripts bezeichnet. Sie befinden sich in einer isolierten Umgebung, d. h., sie können Änderungen an ihrer JavaScript-Umgebung vornehmen, ohne dass es zu Konflikten mit der Hostseite oder den Inhaltsscripts anderer Erweiterungen kommt.

Fügen Sie manifest.json den folgenden Code hinzu, um ein Inhaltsscript 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 haben. So kann der Browser erkennen, auf welchen Websites die Inhaltsscripts eingefügt werden sollen. Übereinstimmungsmuster bestehen aus drei Teilen: <scheme>://<host><path>. Sie können *-Zeichen enthalten.

💡 Wird für diese Erweiterung eine Berechtigungswarnung angezeigt?

Wenn ein Nutzer eine Erweiterung installiert, wird er vom Browser darüber informiert, was die Erweiterung kann. Inhaltsscripts fordern die Berechtigung an, auf Websites ausgeführt zu werden, die die Kriterien für das Abgleichmuster erfüllen.

In diesem Beispiel würde der Nutzer die folgende Berechtigungswarnung sehen:

Berechtigungswarnung, die Nutzer beim Installieren der Lesezeit-Erweiterung sehen
Warnung zur Berechtigung für die Lesezeit.

Weitere Informationen zu Erweiterungsberechtigungen finden Sie unter Berechtigungen angeben und Nutzer warnen.

Schritt 4: Lesezeit berechnen und einfügen

Inhaltsscripts 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 Element <article> enthält. Anschließend werden alle Wörter in diesem Element gezählt und ein Absatz erstellt, in dem die Gesamtlesezeit angezeigt wird.

Erstellen Sie im Ordner scripts eine Datei mit dem Namen content.js 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);
}

💡 Interessante JavaScript-Funktionen in diesem Code

  • Reguläre Ausdrücke, mit denen nur die Wörter im <article>-Element gezählt werden.
  • insertAdjacentElement() wird verwendet, um den Lesezeitknoten nach dem Element einzufügen.
  • Mit der Property classList können Sie dem Attribut „class“ des Elements CSS-Klassennamen hinzufügen.
  • Die optionale verkettung wird verwendet, um auf eine Objekteigenschaft zuzugreifen, die möglicherweise nicht definiert oder null ist.
  • Bei der Nullzusammenführung wird <heading> zurückgegeben, wenn <date> null oder nicht definiert ist.

Funktion testen

Die Dateistruktur Ihres Projekts sollte so aussehen:

Der Inhalt des Ordners „Lesezeit“: manifest.json, content.js im Ordner „scripts“ und der Ordner „images“.

Erweiterung lokal laden

Wenn Sie eine entpackte Erweiterung im Entwicklermodus laden möchten, folgen Sie der Anleitung unter Grundlagen der Entwicklung.

Dokumentation für Erweiterungen oder den Chrome Web Store öffnen

Hier sind einige Seiten, die Sie öffnen können, um zu sehen, wie lange das Lesen der einzelnen Artikel dauert.

Das sollte so aussehen:

Lesezeit auf der Willkommensseite
Willkommensseite der Erweiterung mit der Lesezeiterweiterung

🎯 Potenzielle Verbesserungen

Versuchen Sie, basierend auf dem, was Sie heute gelernt haben, Folgendes umzusetzen:

  • Fügen Sie in der Datei „manifest.json“ ein weiteres Abgleichsmuster hinzu, um andere Chrome-Entwicklerseiten zu unterstützen, z. B. die Chrome-Entwicklertools oder Workbox.
  • Fügen Sie einem Ihrer Lieblingsblogs oder einer Dokumentationswebsite ein neues Inhaltsskript hinzu, das die Lesezeit berechnet.

Weitermachen

Herzlichen Glückwunsch zum Abschluss dieser Anleitung. 🎉 Sie können Ihre Fähigkeiten mit den anderen Anleitungen dieser Reihe weiter ausbauen:

Erweiterung Lerninhalte
Konzentrationsmodus Code auf der aktuellen Seite ausführen, nachdem auf die Erweiterungsaktion geklickt wurde.
Tabs Manager Erstellen eines Pop-ups zum Verwalten von Browser-Tabs

Weiter erkunden

Wir hoffen, dass Ihnen die Entwicklung dieser Chrome-Erweiterung Spaß gemacht hat. Wir freuen uns, Sie auf Ihrem weiteren Lernweg bei der Chrome-Entwicklung begleiten zu können. Wir empfehlen den folgenden Lernpfad:

  • Im Entwicklerhandbuch finden Sie Dutzende zusätzliche Links zu Dokumenten, die für die erweiterte Erstellung von Erweiterungen relevant sind.
  • Erweiterungen haben Zugriff auf leistungsstarke APIs, die über das offene Web hinausgehen. In der Dokumentation zu Chrome APIs werden alle APIs beschrieben.