Skripts 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, mit der jeder Chrome-Erweiterung die voraussichtliche Lesezeit hinzugefügt wird. Dokumentationsseite zum Chrome Web Store

</ph> <ph type="x-smartling-placeholder">

In diesem Leitfaden werden die folgenden Konzepte erläutert:

• Das Erweiterungsmanifest.
• Welche Symbolgrößen eine Erweiterung verwendet.
• Code mithilfe von Content-Skripts in Seiten einschleusen
• Abgleichsmuster verwenden
• Erweiterungsberechtigungen.

Vorbereitung

In diesem Leitfaden wird davon ausgegangen, dass Sie über grundlegende Kenntnisse in der Webentwicklung verfügen. Wir empfehlen Ihnen, sich die Hello World-Anleitung als Einführung in den Workflow zur Entwicklung von Erweiterungen

Erweiterung erstellen

Erstellen Sie zuerst ein neues Verzeichnis mit dem Namen reading-time, in dem die Dateien der Erweiterung gespeichert werden. Wenn Sie bevorzugt wird, 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 . 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. Sie legen fest, wie die Erweiterung auf der Seite „Erweiterungen“ und bei ihrer Veröffentlichung im Chrome Web Store angezeigt wird. Ausführlichere Informationen finden Sie in der "name", "version" und "description" auf der Übersichtsseite Manifest.

💡 Weitere Fakten zum Erweiterungsmanifest

• Sie 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 vor dem Hochladen des Codes in den Chrome Web Store entfernt werden.

Schritt 2: Symbole bereitstellen

Wozu brauchen Sie also Symbole? Obwohl Symbole während der Entwicklung optional sind, werden sie erforderlich, wenn Sie Ihre Erweiterung im Chrome Web Store vertreiben möchten. Sie erscheinen auch in anderen z. B. auf der Seite für die Erweiterungsverwaltung.

Erstelle einen images-Ordner und platziere die Symbole darin. Sie können die Symbole auf der GitHub Fügen Sie als Nächstes den hervorgehobenen Code zu Ihrem Manifest 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. Es sind jedoch andere Dateiformate zulässig, mit Ausnahme von SVG-Dateien.

💡 Wo werden diese Symbole mit unterschiedlicher Größe angezeigt?

Schritt 3: Content-Skript deklarieren

Erweiterungen können Skripts ausführen, die den Inhalt einer Seite lesen und ändern. Diese werden als Content-Seiten Skripts verwenden. Sie leben in einer isolierten Welt, d. h., sie können Änderungen an ihrer JavaScript-Umgebung vornehmen, ohne mit ihrer Hostseite oder anderen Erweiterungen in Konflikt zu stehen. Inhaltsskripte.

Fügen Sie dem manifest.json den folgenden Code hinzu, um ein Inhaltsskript namens content.js.

{
  "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. Damit kann der Browser um zu ermitteln, auf welchen Websites die Inhaltsskripte eingefügt werden sollen. Übereinstimmungsmuster bestehen aus drei Teilen: <scheme>://<host><path> Sie können „*“ enthalten Zeichen.

💡 Zeigt diese Erweiterung eine Berechtigungswarnung an?

Wenn ein Nutzer eine Erweiterung installiert, wird er vom Browser über die Funktionen der Erweiterung informiert. Inhaltsskripte fordern eine Berechtigung zur Ausführung auf Websites an, die den Kriterien für das Übereinstimmungsmuster entsprechen.

In diesem Beispiel wird dem Nutzer die folgende Berechtigungswarnung angezeigt:

</ph> <ph type="x-smartling-placeholder">

Weitere Informationen zu Berechtigungen für Erweiterungen

Schritt 4: Lesezeit berechnen und einfügen

Inhaltsskripte können das standardmäßige Document Object Model (DOM) verwenden, um das Dokument Inhalt einer Seite. Die Erweiterung prüft zuerst, ob die Seite das Element <article> enthält. Dann werden alle Wörter in diesem Element gezählt und ein Absatz erstellt, in dem die Gesamtsumme Lesezeit.

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är Ausdrücke 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 zum Hinzufügen von CSS-Klassennamen zum Elementklassenattribut verwendet wird.
• Optionale Verkettung, die für den Zugriff auf eine Objekteigenschaft verwendet wird, die nicht definiert oder null sein kann.
• Nullish Coalescing gibt den <heading> zurück, wenn <date> null oder nicht definiert ist.

Testen, ob es funktioniert

Überprüfen Sie, ob die Dateistruktur Ihres Projekts so aussieht:

Erweiterung lokal laden

Wenn Sie eine entpackte Erweiterung im Entwicklermodus laden möchten, folgen Sie den Schritten unter Entwicklung Grundlegende Informationen.

Erweiterung oder Dokumentation zum Chrome Web Store öffnen

Hier sind einige Seiten, die Sie öffnen können, um zu sehen, wie lange es dauert, bis ein Artikel gelesen wird.

• Im Chrome Web Store veröffentlichen
• Content Scripts

Das sollte so aussehen:

</ph> <ph type="x-smartling-placeholder">

🎯 Mögliche Verbesserungen

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

• Fügen Sie zur Unterstützung anderer Chrome-Entwickler ein weiteres Übereinstimmungsmuster in der Datei „manifest.json“ hinzu. wie den Chrome-Entwicklertools oder der Workbox.
• Fügen Sie ein neues Content-Skript hinzu, das die Lesezeit für Ihre Lieblingsblogs oder Dokumentationsseiten.

Noch mehr erstellen

Sie haben diese Anleitung abgeschlossen 🎉. Bauen Sie Ihre Fähigkeiten weiter aus, indem Sie Tutorials zu dieser Reihe:

Weiter erkunden

Wir hoffen, dass Ihnen die Erstellung dieser Chrome-Erweiterung gefallen hat, und freuen uns darauf, den Lernpfad der Entwicklung. Wir empfehlen den folgenden Lernpfad:

• Das Entwicklerhandbuch enthält Dutzende zusätzliche Links zu Dokumentationen. die für die Erstellung erweiterter Erweiterungen relevant sind.
• Erweiterungen haben Zugriff auf leistungsstarke APIs, die über das hinausgehen, was im offenen Web verfügbar ist. In der Dokumentation zu Chrome APIs werden die einzelnen APIs Schritt für Schritt beschrieben.