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