Diese Seite wurde von der Cloud Translation API übersetzt.

Skripts in den aktiven Tab einfügen

Sie können den Stil der aktuellen Seite vereinfachen, indem Sie auf das Symbol für die Erweiterungssymbolleiste klicken.

Überblick

In dieser Anleitung wird eine Erweiterung erstellt, die das Gestalten der Chrome-Erweiterungs- und Chrome Web Store-Dokumentationsseiten vereinfacht, damit sie leichter zu lesen sind.

In diesem Leitfaden wird Folgendes erläutert:

Verwenden Sie den Extension Service Worker als Veranstaltungskoordinator.
Wahren Sie den Datenschutz für Nutzer durch die Berechtigung "activeTab".
Code ausführen, wenn der Nutzer auf das Symbol der Erweiterungssymbolleiste klickt
Mit der Scripting API können Sie ein Stylesheet einfügen und entfernen.
Verwenden Sie eine Tastenkombination, um Code auszuführen.

Vorbereitung

In diesem Leitfaden wird davon ausgegangen, dass Sie über Grundkenntnisse in der Webentwicklung verfügen. Wir empfehlen, sich Hello World anzusehen, um eine Einführung in den Workflow zur Entwicklung von Erweiterungen zu erhalten.

Erweiterung erstellen

Erstellen Sie zuerst ein neues Verzeichnis mit dem Namen focus-mode, in dem die Dateien der Erweiterung gespeichert werden. Wenn Sie möchten, können Sie den vollständigen Quellcode von GitHub herunterladen.

Schritt 1: Erweiterungsdaten und -symbole hinzufügen

Erstellen Sie eine Datei mit dem Namen manifest.json und fügen Sie den folgenden Code ein.

{
  "manifest_version": 3,
  "name": "Focus Mode",
  "description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

Weitere Informationen zu diesen Manifestschlüsseln finden Sie in der Anleitung „Scripts auf jedem Tab ausführen“. Darin werden die Metadaten und Symbole der Erweiterung genauer erläutert.

Erstellen Sie einen images-Ordner und laden Sie die Symbole in diesen Ordner herunter.

Schritt 2: Erweiterung initialisieren

Erweiterungen können Browserereignisse im Hintergrund mit dem Service Worker der Erweiterung überwachen. Service Worker sind spezielle JavaScript-Umgebungen, die Ereignisse verarbeiten und beendet werden, wenn sie nicht benötigt werden.

Registrieren Sie zuerst den Service Worker in der Datei manifest.json:

{
  ...
  "background": {
    "service_worker": "background.js"
  },
  ...
}

Erstellen Sie eine Datei mit dem Namen background.js und fügen Sie den folgenden Code hinzu:

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

Das erste Ereignis, auf das unser Service Worker wartet, ist runtime.onInstalled(). Mit dieser Methode kann die Erweiterung einen Anfangszustand festlegen oder bei der Installation einige Aufgaben ausführen. Erweiterungen können die Storage API und IndexedDB verwenden, um den Anwendungsstatus zu speichern. Da in diesem Fall nur zwei Status behandelt werden, verwenden wir den Text des Aktionslogos selbst, um zu ermitteln, ob die Erweiterung aktiviert oder deaktiviert ist.

Schritt 3: Erweiterungsaktion aktivieren

Mit der Erweiterungsaktion wird das Symbol der Erweiterung in der Symbolleiste gesteuert. Jedes Mal, wenn der Nutzer auf das Erweiterungssymbol klickt, wird entweder Code ausgeführt (wie in diesem Beispiel) oder ein Pop-up-Fenster angezeigt. Fügen Sie den folgenden Code hinzu, um die Erweiterungsaktion in der Datei manifest.json zu deklarieren:

{
  ...
  "action": {
    "default_icon": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  },
  ...
}

Mit der Berechtigung „activeTab“ die Privatsphäre der Nutzer schützen

Die Berechtigung activeTab gewährt der Erweiterung temporäre Berechtigung, Code auf dem aktiven Tab auszuführen. Außerdem können Sie damit auf sensible Attribute des aktuellen Tabs zugreifen.

Diese Berechtigung wird aktiviert, wenn der Nutzer die Erweiterung aufruft. In diesem Fall ruft der Nutzer die Erweiterung auf, indem er auf die Erweiterungsaktion klickt.

💡 Durch welche anderen Nutzerinteraktionen wird die Berechtigung „ActiveTab“ in meiner eigenen Erweiterung aktiviert?

Durch Drücken einer Tastenkombination
Kontextmenüelement auswählen
Einen Vorschlag aus der Omnibox annehmen.
Ein Pop-up-Fenster mit einer Erweiterung wird geöffnet.

Mit der Berechtigung "activeTab" können Nutzer die Erweiterung absichtlich auf dem hervorgehobenen Tab ausführen. Auf diese Weise wird die Privatsphäre des Nutzers geschützt. Ein weiterer Vorteil ist, dass keine Berechtigungswarnung ausgelöst wird.

Wenn Sie die Berechtigung "activeTab" verwenden möchten, fügen Sie sie dem Berechtigungsarray des Manifests hinzu:

{
  ...
  "permissions": ["activeTab"],
  ...
}

Schritt 4: Status des aktuellen Tabs verfolgen

Nachdem der Nutzer auf die Erweiterungsaktion geklickt hat, prüft die Erweiterung, ob die URL mit einer Dokumentationsseite übereinstimmt. Als Nächstes wird der Status des aktuellen Tabs überprüft und der nächste Status festgelegt. Fügen Sie background.js den folgenden Code hinzu:

const extensions = 'https://developer.chrome.com/docs/extensions'
const webstore = 'https://developer.chrome.com/docs/webstore'

chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
    // Retrieve the action badge to check if the extension is 'ON' or 'OFF'
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    // Next state will always be the opposite
    const nextState = prevState === 'ON' ? 'OFF' : 'ON'

    // Set the action badge to the next state
    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState,
    });
  }
});

Schritt 5: Stylesheet hinzufügen oder entfernen

Jetzt ist es an der Zeit, das Layout der Seite zu ändern. Erstellen Sie eine Datei mit dem Namen focus-mode.css und fügen Sie den folgenden Code ein:

body > .scaffold > :is(top-nav, navigation-rail, side-nav, footer),
main > :not(:last-child),
main > :last-child > navigation-tree,
main .toc-container {
  display: none;
}

main > :last-child {
  margin-top: min(10vmax, 10rem);
  margin-bottom: min(10vmax, 10rem);
}

Sie können das Stylesheet mit der Scripting API einfügen oder entfernen. Erklären Sie zuerst im Manifest die Berechtigung "scripting":

{
  ...
  "permissions": ["activeTab", "scripting"],
  ...
}

Fügen Sie schließlich in background.js den folgenden Code hinzu, um das Layout der Seite zu ändern:

  ...
    if (nextState === "ON") {
      // Insert the CSS file when the user turns the extension on
      await chrome.scripting.insertCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    } else if (nextState === "OFF") {
      // Remove the CSS file when the user turns the extension off
      await chrome.scripting.removeCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    }
  }
});

💡 Kann ich die Scripting API verwenden, um Code anstelle eines Stylesheets einzufügen?

Ja. Du kannst scripting.executeScript() verwenden, um JavaScript einzufügen.

Optional: Tastenkombination zuweisen

Füge eine Verknüpfung hinzu, um den Konzentrationsmodus einfach zu aktivieren oder zu deaktivieren. Fügen Sie dem Manifest den Schlüssel "commands" hinzu.

{
  ...
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+B",
        "mac": "Command+B"
      }
    }
  }
}

Der Schlüssel "_execute_action" führt denselben Code wie das Ereignis action.onClicked() aus, sodass kein zusätzlicher Code erforderlich ist.

Testen, ob es funktioniert

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

Die Inhalte des Ordners „Fokusmodus“: „manifest.json“, „Background.js“, „focus-mode.css“ und „Bilder“.

Erweiterung lokal laden

Führen Sie die Schritte unter Hello World aus, um eine entpackte Erweiterung im Entwicklermodus zu laden.

Erweiterung auf einer Dokumentationsseite testen

Öffnen Sie zuerst eine der folgenden Seiten:

Klicken Sie dann auf die Aktion für die Erweiterung. Wenn Sie eine Tastenkombination eingerichtet haben, können Sie sie testen, indem Sie Ctrl + B oder Cmd + B drücken.

Sie sollte so aussehen:

Konzentrationsmodus-Erweiterung AUS — Erweiterung für den Konzentrationsmodus deaktiviert

Konzentrationsmodus-Erweiterung AN — Erweiterung für den Konzentrationsmodus aktiviert

🎯 Mögliche Verbesserungen

Versuchen Sie basierend auf dem, was Sie heute gelernt haben, eines der folgenden Ziele zu erreichen:

Verbessern Sie das CSS-Stylesheet.
Weisen Sie eine andere Tastenkombination zu.
Ändern Sie das Layout Ihres bevorzugten Blogs oder Ihrer bevorzugten Dokumentationswebsite.

und erstelle weiter interessante Inhalte.

Herzlichen Glückwunsch! Sie haben dieses Tutorial abgeschlossen 🎉. Vertiefen Sie Ihre Fähigkeiten mit anderen Anleitungen in dieser Reihe:

Erweiterung	Lerninhalte
Lesezeit	Wenn Sie ein Element automatisch auf einer bestimmten Seitengruppe einfügen möchten.
Tabs-Manager	So erstellen Sie ein Pop-up, das Browsertabs verwaltet

Weiter erkunden

Wir hoffen, dass Ihnen die Erstellung dieser Chrome-Erweiterung Spaß gemacht hat, und freuen uns auf die weitere Entwicklung Ihrer Erweiterung. Wir empfehlen die folgenden Lernpfade:

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.