Diese Seite wurde von der Cloud Translation API übersetzt.

Tabs verwalten

Erstellen Sie Ihren ersten Tab-Manager.

Überblick

In dieser Anleitung wird ein Tab-Manager erstellt, mit dem die Tabs der Chrome-Erweiterung und der Dokumentation im Chrome Web Store organisiert werden können.

In diesem Leitfaden wird Folgendes erläutert:

Erstellen Sie mit der Action API ein Pop-up für Erweiterungen.
Mit der Tabs API bestimmte Tabs abfragen.
Wahren Sie den Datenschutz für Nutzer durch eingeschränkte Hostberechtigungen.
Fokus des Tabs ändern
Verschieben Sie Tabs in dasselbe Fenster und gruppieren Sie sie.
Tabgruppen mithilfe der TabGroups umbenennen

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 tabs-manager, in dem die Dateien der Erweiterung gespeichert werden. Wenn Sie möchten, 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 finden Sie in der Anleitung zur Lesezeit. Darin werden die Metadaten und Symbole der Erweiterung genauer erklärt.

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

Schritt 2: Pop-up erstellen und gestalten

Die Action API steuert die Erweiterungsaktion (Symbolleistensymbol). Wenn der Nutzer auf die Erweiterungsaktion klickt, wird entweder Code ausgeführt oder ein Pop-up-Fenster geöffnet, wie in diesem Fall. Deklarieren Sie zuerst das Pop-up im manifest.json:

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

Ein Pop-up ist einer Webseite mit einer Ausnahme ähnlich: Es kann kein Inline-JavaScript ausführen. 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 oberste Ebene (await) verwenden, indem du type="module" in das Skript-Tag einfügst.

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

Mit der Tabs API kann eine Erweiterung Tabs im Browser erstellen, abfragen, ändern und neu anordnen.

Berechtigung anfordern

Viele Methoden in der Tabs API können verwendet werden, ohne dass eine Berechtigung angefordert wird. Wir benötigen jedoch Zugriff auf die title und URL der Tabs. Für diese sensiblen Properties ist eine Berechtigung erforderlich. Wir könnten die Berechtigung "tabs" anfordern, dies würde jedoch Zugriff auf die vertraulichen Eigenschaften aller Tabs gewähren. Da wir nur die Tabs einer bestimmten Website verwalten, fordern wir eingeschränkte Hostberechtigungen an.

Mit eingeschränkten Hostberechtigungen können wir bestimmten Websites erweiterte Berechtigungen erteilen, um die Privatsphäre der Nutzer zu schützen. Dadurch erhalten Sie Zugriff auf die Properties title und URL sowie zusätzliche Funktionen. Fügen Sie der Datei manifest.json den markierten Code hinzu:

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

💡 Was sind die Hauptunterschiede zwischen der Tab-Berechtigung und den Hostberechtigungen?

Sowohl die Berechtigung "tabs" 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 verwendet werden, um 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 Tabberechtigung

Hostberechtigungen ermöglichen einer Erweiterung, die sensiblen Eigenschaften eines übereinstimmenden Tabs zu lesen und abzufragen, sowie Skripts in diese Tabs einzufügen. Bei der Installation sehen Nutzer die folgende Warnmeldung:

Dialogfeld mit Warnung zur Hostberechtigung

Diese Warnung kann für Nutzer besorgniserregend sein. Wir empfehlen, optionale Berechtigungen zu implementieren, um die Einrichtung zu erleichtern.

Tabs abfragen

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

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?

Über ein Pop-up und andere Erweiterungsseiten kann jede Chrome API aufgerufen werden, da sie vom Chrome-Schema bereitgestellt werden. z. B. chrome-extension://EXTENSION_ID/popup.html.

Fokus auf einen Tab verschieben

Zuerst sortiert die Erweiterung die Tabnamen (die Titel der enthaltenen HTML-Seiten) alphabetisch. Wenn dann auf ein Listenelement geklickt wird, wird dieser Tab mithilfe von tabs.update() hervorgehoben und das Fenster mithilfe von windows.update() im Vordergrund angezeigt. 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 Sortierer, mit dem das Tab-Array nach der bevorzugten Sprache des Nutzers sortiert wird.
Das Vorlagen-Tag, mit dem ein HTML-Element definiert wird, 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 verwendet wird, um den Satz von Elementen im append()-Aufruf in Argumente zu konvertieren.

Tabs gruppieren

Mit der TabGroups kann die Erweiterung die Gruppe benennen und eine Hintergrundfarbe auswählen. 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 ein, um eine Schaltfläche zu erstellen, mit der alle Tabs mithilfe von tabs.group() gruppiert und in das aktuelle Fenster verschoben werden.

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 mit der folgenden Verzeichnisstruktur übereinstimmt:

Die Inhalte des Tabs-Manager-Ordners: manifest.json, overlay.js, overlay.css, overlay.html und den Bilder-Ordner.

Erweiterung lokal laden

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

Einige Dokumentationsseiten öffnen

Öffnen Sie die folgenden Dokumente in verschiedenen Fenstern:

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

Klicke auf die Schaltfläche „Tabs gruppieren“. Das sollte so aussehen:

🎯 Mögliche Verbesserungen

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

Pop-up-Stylesheet anpassen
Farbe und Titel der Tabgruppe ändern
Tabs einer anderen Dokumentationswebsite verwalten.
Unterstützung für das Aufheben der Gruppierung der gruppierten Tabs hinzugefügt.

Baue weiter!

Herzlichen Glückwunsch! Sie haben dieses Tutorial abgeschlossen. 🎉. Vertiefen Sie Ihre Fähigkeiten, indem Sie weitere Anleitungen in dieser Reihe durcharbeiten:

Erweiterung	Lerninhalte
Lesezeit	So fügen Sie automatisch ein Element auf jeder Seite ein:
Konzentrationsmodus	Code auf der aktuellen Seite ausführen, nachdem auf die Erweiterungsaktion geklickt wurde

Weiter erkunden

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

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.