Diese Seite wurde von der Cloud Translation API übersetzt.

Tabs verwalten

Erstelle deinen ersten Tab-Manager.

Übersicht

In dieser Anleitung wird ein Tab-Manager erstellt, mit dem Sie Ihre Chrome-Erweiterungs- und Dokumentationstabs im Chrome Web Store organisieren können.

In diesem Leitfaden wird Folgendes erläutert:

Erstellen Sie mithilfe der Action API ein Pop-up-Fenster für eine Erweiterung.
Fragen Sie bestimmte Tabs mithilfe der Tabs API ab.
Schützen Sie die Privatsphäre der Nutzer durch eingeschränkte Hostberechtigungen.
Fokus des Tabs ändern
Verschieben Sie Tabs in dasselbe Fenster und gruppieren Sie sie.
Benennen Sie Tabgruppen mithilfe der TabGroups um.

Vorbereitung

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

Erweiterung erstellen

Erstellen Sie zuerst ein neues Verzeichnis mit dem Namen tabs-manager, in dem die Dateien der Erweiterung gespeichert werden. Wenn Sie bevorzugt wird, können Sie den vollständigen Quellcode auf 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 hinzu:

{
  "manifest_version": 3,
  "name": "Tab Manager for Chrome Dev Docs",
  "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 findest du in der Anleitung zur Lesezeit, in der die Metadaten und Symbole der Erweiterung ausführlicher erläutert werden.

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

Schritt 2: Pop-up erstellen und gestalten

Die Action API steuert die Erweiterungsaktion (Symbolleistensymbol). Wenn Nutzende auf Erweiterungsaktion ausführen, wird entweder Code ausgeführt oder ein Pop-up geöffnet, wie in diesem Fall. Starten So deklarieren Sie das Pop-up im manifest.json:

{
  "action": {
    "default_popup": "popup.html"
  }
}

Pop-ups ähneln einer Webseite, mit einer Ausnahme: Hier kann kein Inline-JavaScript ausgeführt werden. Erstellen Sie eine popup.html-Datei und fügen Sie den folgenden Code hinzu:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./popup.css" />
  </head>
  <body>
    <template id="li_template">
      <li>
        <a>
          <h3 class="title">Tab Title</h3>
          <p class="pathname">Tab Pathname</p>
        </a>
      </li>
    </template>

    <h1>Google Dev Docs</h1>
    <button>Group Tabs</button>
    <ul></ul>

    <script src="./popup.js" type="module"></script>
  </body>
</html>

Tipp: Du kannst Await auf oberster Ebene verwenden, indem du dem Script type="module" hinzufügst. -Tag.

Als Nächstes gestalten Sie das Pop-up. Erstellen Sie eine popup.css-Datei und fügen Sie den folgenden Code hinzu:

body {
  width: 20rem;
}

ul {
  list-style-type: none;
  padding-inline-start: 0;
  margin: 1rem 0;
}

li {
  padding: 0.25rem;
}
li:nth-child(odd) {
  background: #80808030;
}
li:nth-child(even) {
  background: #ffffff;
}

h3,
p {
  margin: 0;
}

Schritt 3: Tabs verwalten

Die Tabs API ermöglicht einer Erweiterung das Erstellen, Abfragen, Ändern und Neuanordnen von Tabs im Browser.

Berechtigung anfordern

Viele Methoden in der Tabs API können ohne Berechtigungsanfrage verwendet werden. Wir benötigen jedoch Zugriff auf die Tabs „title“ und „URL“. diese vertraulichen Properties erfordern eine Berechtigung. Wir könnten die Berechtigung "tabs" anfordern, aber dadurch erhalten Sie Zugriff auf die vertraulichen Eigenschaften aller Tabs. Da wir nur Tabs einer bestimmten Website verwalten, fordern wir eingeschränkte Hostberechtigungen an.

Schmale Hostberechtigungen ermöglichen es uns, die Privatsphäre der Nutzer zu schützen, indem wir erweiterten Berechtigungen für bestimmte Websites gewähren. Dadurch werden Zugriff auf die Attribute title und URL sowie zusätzliche Funktionen gewährt. Fügen Sie der Datei manifest.json den markierten Code hinzu:

{
  "host_permissions": [
    "https://developer.chrome.com/*"
  ]
}

💡 Was sind die Hauptunterschiede zwischen den Berechtigungen für Tabs und den Hostberechtigungen?

Sowohl die "tabs"-Berechtigung als auch die Hostberechtigungen haben Nachteile.

Mit der Berechtigung "tabs" kann eine Erweiterung sensible Daten auf allen Tabs lesen. Im Laufe der Zeit könnten diese Informationen dazu verwendet werden, den Browserverlauf eines Nutzers zu erfassen. Wenn Sie diese Berechtigung anfordern, zeigt Chrome daher bei der Installation die folgende Warnmeldung an:

Dialogfeld mit Warnung zur Tabs-Berechtigung

Hostberechtigungen ermöglichen es einer Erweiterung, die vertraulichen Eigenschaften eines übereinstimmenden Tabs zu lesen und abzufragen. Außerdem können auf diesen Tabs Skripts eingefügt werden. Bei der Installation wird Nutzern die folgende Warnmeldung angezeigt:

Dialogfeld mit Warnung zur Hostberechtigung

Diese Warnungen können für Nutzer beunruhigend sein. Für ein besseres Onboarding empfehlen wir, optionale Berechtigungen zu implementieren.

Tabs abfragen

Mit der Methode tabs.query() können Sie die Tabs von bestimmten URLs abrufen. popup.js erstellen und fügen Sie den folgenden Code hinzu:

const tabs = await chrome.tabs.query({
  url: [
    "https://developer.chrome.com/docs/webstore/*",
    "https://developer.chrome.com/docs/extensions/*",
  ]
});

💡 Kann ich Chrome APIs direkt im Pop-up verwenden?

In Pop-ups und auf anderen Erweiterungsseiten kann jede Chrome API aufgerufen werden, da sie über die Chrome-Schema. z. B. chrome-extension://EXTENSION_ID/popup.html.

Fokus auf einen Tab verschieben

Zunächst sortiert die Erweiterung die Tabnamen (die Titel der enthaltenen HTML-Seiten) alphabetisch. Klickt der Nutzer auf ein Listenelement, Fokus auf diesen Tab mit tabs.update() und schieben das Fenster mit windows.update() in den Vordergrund. Fügen Sie der Datei popup.js den folgenden Code hinzu:

...
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));

const template = document.getElementById("li_template");
const elements = new Set();
for (const tab of tabs) {
  const element = template.content.firstElementChild.cloneNode(true);

  const title = tab.title.split("-")[0].trim();
  const pathname = new URL(tab.url).pathname.slice("/docs".length);

  element.querySelector(".title").textContent = title;
  element.querySelector(".pathname").textContent = pathname;
  element.querySelector("a").addEventListener("click", async () => {
    // need to focus window as well as the active tab
    await chrome.tabs.update(tab.id, { active: true });
    await chrome.windows.update(tab.windowId, { focused: true });
  });

  elements.add(element);
}
document.querySelector("ul").append(...elements);
...

💡 Interessanter JavaScript-Code, der in diesem Code verwendet wird

Der Collator, mit dem das Tabs-Array nach der bevorzugten Sprache des Nutzers sortiert wird.
Das Vorlagen-Tag, das für Definieren Sie ein HTML-Element, das geklont werden kann, anstatt document.createElement() zum Erstellen der einzelnen Elemente zu verwenden.
Der URL-Konstruktor, der zum Erstellen und Parsen von URLs verwendet wird.
Die Spread-Syntax, die zum Konvertieren des Set-Elements in Argumente im append()-Aufruf verwendet wird.

Tabs gruppieren

Mit der TabGroups API kann die Erweiterung einen Namen für die Gruppe vergeben und einen Hintergrund auswählen Farbe. Fügen Sie dem Manifest die Berechtigung "tabGroups" hinzu, indem Sie den hervorgehobenen Code hinzufügen:

{
  "permissions": [
    "tabGroups"
  ]
}

Fügen Sie in popup.js den folgenden Code hinzu, um eine Schaltfläche zu erstellen, mit der alle Tabs mithilfe von tabs.group() und in das aktuelle Fenster verschieben.

const button = document.querySelector("button");
button.addEventListener("click", async () => {
  const tabIds = tabs.map(({ id }) => id);
  if (tabIds.length) {
    const group = await chrome.tabs.group({ tabIds });
    await chrome.tabGroups.update(group, { title: "DOCS" });
  }
});

Testen, ob es funktioniert

Überprüfen Sie, ob die Dateistruktur Ihres Projekts der folgenden Verzeichnisstruktur entspricht:

Der Inhalt des Tabs Manager-Ordners: „manifest.json“, „popup.js“, „popup.css“, „popup.html“ und „images“.

Erweiterung lokal laden

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

Einige Dokumentationsseiten öffnen

Öffnen Sie die folgenden Dokumente in verschiedenen Fenstern:

Klicken Sie auf das Pop-up-Fenster. Das sollte so aussehen:

Klicken Sie auf „Tabs gruppieren“. Schaltfläche. Das sollte so aussehen:

🎯 Mögliche Verbesserungen

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

Das Pop-up-Style-Sheet anpassen
Farbe und Titel der Tabgruppe ändern
Tabs einer anderen Dokumentationswebsite verwalten
Unterstützung für das Aufheben der Gruppierung der gruppierten Tabs hinzufügen.

Bau weiter!

Sie haben diese Anleitung abgeschlossen 🎉. Sie können Ihre Fähigkeiten weiter ausbauen, indem Sie Tutorials zu dieser Reihe:

Erweiterung	Lerninhalte
Lesezeit	Um ein Element automatisch auf jeder Seite einzufügen
Konzentrationsmodus	Nach dem Klicken auf die Erweiterungsaktion wird der Code auf der aktuellen Seite ausgeführt.

Weiter erkunden

Wir hoffen, dass Ihnen die Erstellung dieser Chrome-Erweiterung gefallen hat, und freuen uns darauf, zu entwickeln. 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.