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.
<ph type="x-smartling-placeholder">![Pop-up mit der Tab-Manager-Erweiterung](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-725ac725aaa4d.png?authuser=9&hl=de)
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>
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:
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:
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:
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:
- Benutzeroberfläche entwerfen
- Im Chrome Web Store entdecken
- Entwicklung von Erweiterungen
- Format der Manifestdatei
- Im Chrome Web Store veröffentlichen
Klicken Sie auf das Pop-up-Fenster. Das sollte so aussehen:
<ph type="x-smartling-placeholder">![Pop-up mit der Tab-Manager-Erweiterung](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-f958d72e1a9ae.png?authuser=9&hl=de)
Klicken Sie auf „Tabs gruppieren“. Schaltfläche. Das sollte so aussehen:
<ph type="x-smartling-placeholder">![Gruppierte Tabs im Tab-Manager](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-grouped-tabs-65bdf282bdf98.png?authuser=9&hl=de)
🎯 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.