Tabs verwalten

Ersten Tab-Manager erstellen

Übersicht

In dieser Anleitung wird ein Tab-Manager erstellt, mit dem Sie die Tabs für die Dokumentation Ihrer Chrome-Erweiterung und des Chrome Web Store organisieren können.

Pop-up der Erweiterung „Tabs Manager“
Erweiterung „Tab-Manager“

In diesem Leitfaden erfahren Sie, wie Sie Folgendes tun:

  • Ein Erweiterungs-Pop-up mit der Action API erstellen
  • Mit der Tabs API nach bestimmten Tabs suchen
  • Den Datenschutz der Nutzer durch eingeschränkte Hostberechtigungen wahren
  • Den Fokus des Tabs ändern
  • Tabs in dasselbe Fenster verschieben und gruppieren
  • Tabgruppen mit der TabGroups API umbenennen

Vorbereitung

In diesem Leitfaden wird davon ausgegangen, dass Sie über grundlegende Kenntnisse in der Webentwicklung verfügen. Wir empfehlen Ihnen, sich die Anleitung „Hello World“ anzusehen, um eine Einführung in den Workflow der Erweiterungsentwicklung zu erhalten.

Erweiterung erstellen

Erstellen Sie zuerst ein neues Verzeichnis mit dem Namen tabs-manager, in dem die Dateien der Erweiterung gespeichert werden. Alternativ können Sie den vollständigen Quellcode auf GitHub herunterladen, wenn Sie es bevorzugen.

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 „Lesezeit“, in der die Metadaten und Symbole der Erweiterung ausführlicher erläutert werden.

Erstellen Sie einen Ordner images und laden Sie die Symbole hinein.

Schritt 2: Pop-up erstellen und gestalten

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

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

Ein Pop-up ähnelt einer Webseite, mit einer Ausnahme: Es kann kein Inline-JavaScript ausgeführt werden. Erstellen Sie eine Datei popup.html 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>

Als Nächstes gestalten Sie das Pop-up. Erstellen Sie eine Datei popup.css 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 ohne Anforderung einer Berechtigung verwendet werden. Wir benötigen jedoch Zugriff auf den title und die URL der Tabs. Für diese sensiblen Eigenschaften ist eine Berechtigung erforderlich. Wir könnten die Berechtigung "tabs" anfordern, aber dadurch würde der Zugriff auf die sensiblen Eigenschaften aller Tabs gewährt. Da wir nur Tabs einer bestimmten Website verwalten, fordern wir eingeschränkte Hostberechtigungen an.

Mit eingeschränkten Hostberechtigungen können wir den Datenschutz der Nutzer wahren, indem wir bestimmten Websites erweiterte Berechtigungen gewähren. Dadurch wird der Zugriff auf die Eigenschaften title und URL sowie auf zusätzliche Funktionen gewährt. Fügen Sie der Datei manifest.json den hervorgehobenen Code hinzu:

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

💡 Was sind die Hauptunterschiede zwischen der Berechtigung „tabs“ und Hostberechtigungen?

Sowohl die Berechtigung "tabs" als auch 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, wird bei der Installation die folgende Warnmeldung angezeigt:

Dialogfeld mit Warnung zu Berechtigungen für Tabs

Mit Hostberechtigungen kann eine Erweiterung die sensiblen Eigenschaften eines übereinstimmenden Tabs lesen und abfragen sowie Skripts auf diesen Tabs einfügen. Nutzer sehen bei der Installation die folgende Warnmeldung:

Dialogfeld mit Warnung zur Hostberechtigung

Diese Warnungen können für Nutzer beunruhigend sein. Für eine bessere Einführung empfehlen wir, optionale Berechtigungen zu implementieren.

Tabs abfragen

Mit der Methode tabs.query() können Sie die Tabs von bestimmten URLs abrufen. Erstellen Sie eine Datei popup.js 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?

Ein Pop-up und andere Erweiterungsseiten können jede Chrome API aufrufen, da sie über das Chrome-Schema bereitgestellt werden. Beispiel: chrome-extension://EXTENSION_ID/popup.html.

Fokus auf einen Tab legen

Zuerst sortiert die Erweiterung die Tabnamen (die Titel der enthaltenen HTML-Seiten) alphabetisch. Wenn dann auf ein Listenelement geklickt wird, wird der Fokus mit tabs.update() auf diesen Tab gelegt und das Fenster mit windows.update() in den Vordergrund gebracht. 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);
...

💡 Interessantes JavaScript in diesem Code

  • Der Collator, der zum Sortieren des Tab-Arrays nach der bevorzugten Sprache des Nutzers verwendet wird.
  • Das Vorlagentag, das zum Definieren eines HTML-Elements verwendet wird, das geklont werden kann, anstatt document.createElement() zum Erstellen jedes Elements zu verwenden.
  • Der URL-Konstruktor, der zum Erstellen und Parsen von URLs verwendet wird.
  • Die Spread-Syntax, die verwendet wird, um die Menge der Elemente in Argumente im append() Aufruf zu konvertieren.

Tabs gruppieren

Mit der TabGroups API kann die Erweiterung die Gruppe benennen und eine Hintergrund farbe 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 hinzu, um eine Schaltfläche zu erstellen, mit der alle Tabs mit 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" });
  }
});

Funktionsweise testen

Prüfen Sie, ob die Dateistruktur Ihres Projekts mit der folgenden Verzeichnisstruktur übereinstimmt:

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

Erweiterung lokal laden

Informationen zum Laden einer entpackten Erweiterung im Entwicklermodus finden Sie in der Anleitung „Hello World“.

Einige Dokumentationsseiten öffnen

Öffnen Sie die folgenden Dokumente in verschiedenen Fenstern:

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

Pop-up der Erweiterung „Tabs Manager“
Pop-up der Erweiterung „Tab-Manager“

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

Tab-Manager – Gruppierte Tabs
Gruppierte Tabs mit der Erweiterung „Tab-Manager“

🎯 Mögliche Verbesserungen

Versuchen Sie, auf Grundlage des Gelernten eine der folgenden Verbesserungen zu implementieren:

  • Das Stylesheet des Pop-ups anpassen
  • Farbe und Titel der Tabgruppe ändern
  • Die Tabs einer anderen Dokumentationswebsite verwalten
  • Unterstützung für das Aufheben der Gruppierung von gruppierten Tabs hinzufügen

Weiterentwickeln

Herzlichen Glückwunsch zum Abschluss dieser Anleitung 🎉. Entwickeln Sie Ihre Fähigkeiten weiter, indem Sie weitere Anleitungen in dieser Reihe durcharbeiten:

Erweiterung Lerninhalte
Lesezeit Ein Element automatisch auf jeder Seite einfügen
Konzentrationsmodus Code auf der aktuellen Seite ausführen, nachdem auf die Erweiterungsaktion geklickt wurde

Weiter erkunden

Wir hoffen, Sie hatten Spaß beim Erstellen dieser Chrome-Erweiterung und freuen sich darauf, Ihre Lernreise in der Chrome-Entwicklung fortzusetzen. Wir empfehlen den folgenden Lernpfad:

  • Der Leitfaden für Entwickler enthält Dutzende zusätzlicher Links zu Dokumentationen, die für die erweiterte Erstellung von Erweiterungen relevant sind.
  • Erweiterungen haben Zugriff auf leistungsstarke APIs, die im offenen Web nicht verfügbar sind. In der Dokumentation zu den Chrome APIs werden die einzelnen APIs beschrieben.