Diese Seite wurde von der Cloud Translation API übersetzt.

Skripte in den aktiven Tab einschleusen

Sie können das Design der aktuellen Seite vereinfachen, indem Sie auf das Symbol der Symbolleiste der Erweiterung klicken.

Übersicht

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

In diesem Leitfaden erfahren Sie, wie Sie Folgendes tun:

Verwenden Sie den Worker des Erweiterungsdiensts als Ereigniskoordinator.
Schützen Sie die Privatsphäre der Nutzer mit der Berechtigung "activeTab".
Code ausführen, wenn der Nutzer auf das Symbol der Symbolleiste der Erweiterung 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 grundlegende Erfahrung mit der Webentwicklung haben. Eine Einführung in den Workflow zur Erweiterungsentwicklung finden Sie unter Hello World.

Erweiterung erstellen

Erstellen Sie zuerst ein neues Verzeichnis mit dem Namen focus-mode, in dem die Dateien der Erweiterung gespeichert werden. Alternativ 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 im Tutorial „Scripts auf jedem Tab ausführen“, in dem die metadata und Symbole der Erweiterung genauer erläutert werden.

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

Schritt 2: Erweiterung initialisieren

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

Registrieren Sie zuerst den Dienst-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 Dienst-Worker wartet, ist runtime.onInstalled(). Mit dieser Methode kann die Erweiterung einen Anfangsstatus festlegen oder einige Aufgaben bei der Installation ausführen. Erweiterungen können die Storage API und IndexedDB zum Speichern des Anwendungsstatus verwenden. Da wir in diesem Fall jedoch nur zwei Status verarbeiten, verwenden wir den Text des Symbols der Aktion, um zu verfolgen, ob die Erweiterung aktiviert oder deaktiviert ist.

Schritt 3: Erweiterungsaktion aktivieren

Mit der Erweiterungsaktion wird das Symbol der Erweiterung in der Symbolleiste gesteuert. Wenn der Nutzer also auf das Symbol der Erweiterung klickt, wird entweder Code ausgeführt (wie in diesem Beispiel) oder ein Pop-up angezeigt. Fügen Sie den folgenden Code hinzu, um die Erweiterungsaktion in der manifest.json-Datei 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"
    }
  },
  ...
}

Die Berechtigung „activeTab“ zum Schutz der Privatsphäre von Nutzern verwenden

Die Berechtigung activeTab gewährt der Erweiterung die vorübergehende Möglichkeit, Code auf dem aktiven Tab auszuführen. Außerdem wird der Zugriff auf sensible Eigenschaften des aktuellen Tabs ermöglicht.

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

💡 Welche anderen Nutzerinteraktionen aktivieren die Berechtigung „activeTab“ in meiner eigenen Erweiterung?

Drücken einer Tastenkombination
Einen Menüpunkt auswählen
Sie akzeptieren einen Vorschlag aus der Omnibox.
Öffnen eines Pop-ups für eine Erweiterung

Mit der Berechtigung "activeTab" können Nutzer bewusst festlegen, dass die Erweiterung auf dem Tab ausgeführt werden soll, der gerade aktiv ist. So 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, wird geprüft, ob die URL mit einer Dokumentationsseite übereinstimmt. Als Nächstes wird der Status des aktuellen Tabs geprü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:

* {
  display: none !important;
}

html,
body,
*:has(article),
article,
article * {
  display: revert !important;
}

[role='navigation'] {
  display: none !important;
}

article {
  margin: auto;
  max-width: 700px;
}

Fügen Sie das Stylesheet mit der Scripting API ein oder entfernen Sie es. Deklarieren Sie zuerst die "scripting"-Berechtigung im Manifest:

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

Fügen Sie abschließend in background.js den folgenden Code ein, 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 mit der Scripting API Code anstelle eines Stylesheets einschleusen?

Ja. Sie können scripting.executeScript() verwenden, um JavaScript einzuschleusen.

Optional: Tastenkombination zuweisen

Sie können auch eine Verknüpfung hinzufügen, um den Konzentrationsmodus einfacher 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"
      }
    }
  }
}

Für den Schlüssel "_execute_action" wird derselbe Code wie für das Ereignis action.onClicked() ausgeführt. Es ist also kein zusätzlicher Code erforderlich.

Funktion testen

Die Dateistruktur Ihres Projekts sollte so aussehen:

Der Inhalt des Ordners „Fokusmodus“: manifest.json, background.js, focus-mode.css und der Ordner „images“.

Erweiterung lokal laden

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

Erweiterung auf einer Dokumentationsseite testen

Öffnen Sie zuerst eine der folgenden Seiten:

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

Sie sollte so aussehen:

Erweiterung des Fokusmodus deaktiviert — Erweiterung des Konzentrationsmodus deaktiviert

Erweiterung für den Fokusmodus AKTIVIERT — Erweiterung des Konzentrationsmodus aktiviert

🎯 Potenzielle Verbesserungen

Versuchen Sie, anhand dessen, was Sie heute gelernt haben, eine der folgenden Aufgaben zu erledigen:

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

und erstelle weiter interessante Inhalte.

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

Erweiterung	Lerninhalte
Lesezeit	Damit können Sie ein Element automatisch auf einer bestimmten Gruppe von Seiten einfügen.
Tabs Manager	Erstellen eines Pop-ups zum Verwalten von Browser-Tabs

Weiter erkunden

Wir hoffen, dass Ihnen die Entwicklung dieser Chrome-Erweiterung gefallen hat. Wir freuen uns, Sie auf Ihrem weiteren Lernweg bei der Erweiterungsentwicklung begleiten zu können. Wir empfehlen die folgenden Lernpfade:

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.