Vor einem Jahr, im Mai 2022, haben wir Chrome die Seitenleiste hinzugefügt. Das ist eine neue Begleitfläche, auf der Nutzer Tools verwenden können, während sie Inhalte durchsuchen. Ab Chrome 114 können Erweiterungen jetzt Inhalte in der Seitenleiste anzeigen.
Besser für Nutzer, einfacher für Entwickler
Viele Entwickler haben bereits ähnliche Funktionen wie die Seitenleiste in ihre Erweiterungen implementiert. Deshalb freuen wir uns, dass sie jetzt zum Plattformstandard wird. Mit der neuen Side Panel API können Sie jetzt eine dauerhafte UI anbieten, die neben einer Seite geöffnet wird, die der Nutzer gerade besucht. Nutzer profitieren von einer einheitlichen Positionierung und einem einheitlichen Layout zwischen Erweiterungen. Außerdem ist die Möglichkeit, eine UI anzuzeigen, ohne Hostberechtigungen anzufordern, ein großer Vorteil für den Datenschutz der Nutzer. Zudem wird die Anzahl der Warnungen reduziert, die bei der Installation Ihrer Erweiterung angezeigt werden.
Mit der Side Panel API müssen Sie sich nicht mehr mit dem Einfügen von Inhalten auf einer nicht vertrauenswürdigen Seite herumschlagen. Außerdem müssen Sie die Kompatibilität nicht mehr für verschiedene Websites aufrechterhalten und sich nicht mehr durch Fehlerberichte über versehentliche Unterbrechungen durch Ihre Erweiterung arbeiten.
Ein Begleiter für Nutzer im gesamten Web
Wenn Sie eine neue Seitenleiste als Teil Ihrer Erweiterung entwickeln, müssen Sie sich eine Frage stellen: Wie können Sie Nutzern helfen, Aufgaben im Web zu erledigen? Hier sind einige Fragen, die Sie sich stellen sollten:
- Wie hilft meine Seitenleiste dem Nutzer?
- Die Richtlinie für einen einzigen Zweck gilt auch für Ihre Seitenleiste. Achten Sie darauf, dass die Seitenleiste Funktionen bietet, die sich direkt auf den Rest Ihrer Erweiterung und die Ziele des Nutzers beziehen.
- Wird meine Seitenleiste nur angezeigt, wenn sie relevant ist?
- Mit der Side Panel API können Sie auswählen, auf welchen Websites die Seitenleiste für Ihre Nutzer angezeigt werden soll. So können Sie vermeiden, dass sie angezeigt wird, wenn sie für den Nutzer nicht relevant ist oder sich nicht auf die Inhalte bezieht, die der Nutzer gerade durchsucht.
- Entspricht das Design dem Rest meiner Erweiterung?
- Die Seitenleiste sollte ein optisch ansprechendes Design haben, das dem Logo, den Farben, den Symbolen und den Schriftarten Ihrer Erweiterung und Ihres Store-Eintrags entspricht. So erhalten Nutzer ein einheitliches, wiedererkennbares Erlebnis, unabhängig davon, wo sie Ihre Erweiterung verwenden.
- Wie finden Nutzer meine Seitenleiste?
- Informieren Sie neue Nutzer über die Verwendung der Seitenleiste, indem Sie in der Erweiterung eine ausreichende Dokumentation oder Schulung anbieten. So können Sie Nutzer binden und schlechte Bewertungen in Ihrem Store-Eintrag vermeiden. Sie können Nutzer bereits vor der Installation der Erweiterung informieren, indem Sie in Ihrem Store-Eintrag ein YouTube-Video einbetten, in dem die Funktionsweise Ihrer Erweiterung erklärt wird.
Wir haben auch unsere Programmrichtlinien aktualisiert. Die Abschnitte zu Best Practices und Qualitätsrichtlinien wurden überarbeitet, um einige dieser Überlegungen zu berücksichtigen. Diese Änderungen unterstreichen, dass die Seitenleiste als hilfreicher Begleiter für die Nutzer dienen soll, indem sie zusätzliche Funktionen bietet. Außerdem wird klargestellt, dass die Seitenleiste keine unnötigen Ablenkungen enthalten sollte.
Übersicht über die API
Damit Ihre Erweiterung in der Seitenleiste angezeigt wird, fordern Sie im Manifest die Berechtigung "sidePanel" an und fügen Sie den Schlüssel "side_panel" mit einem "default_path" hinzu, der auf eine Seite in Ihrer Erweiterung verweist:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
Auf einer Seitenleistenseite können Sie Skripts laden und Erweiterungs-APIs aufrufen, genau wie auf jeder anderen Erweiterungsseite. Das Symbol für die Seitenleiste wird aus dem Symbol Ihrer Erweiterung übernommen. Vergessen Sie nicht, es festzulegen, um das Erscheinungsbild zu optimieren.
Zusätzliche Funktionen
Sie können die Seitenleiste mit dem Aktionssymbol verknüpfen, damit sie jederzeit einfach geöffnet werden kann:
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
Wenn die Seitenleiste nur auf bestimmten Seiten angezeigt werden soll, können Sie das steuern und verhindern, dass sie an anderen Stellen angezeigt wird, an denen sie für den Nutzer nicht relevant ist:
service-worker.js:
chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
if (!tab.url) return;
const url = new URL(tab.url);
if (url.origin === 'https://example.com') {
chrome.sidePanel.setOptions({ tabId, path: 'sidepanel.html', enabled: true });
} else {
chrome.sidePanel.setOptions({ tabId, enabled: false });
}
});
Weitere Informationen
Wir haben die Dokumentation zur Side Panel API veröffentlicht, die Sie sich jetzt ansehen können. Außerdem haben wir dem Repository für Chrome-Erweiterungsbeispiele Beispiele hinzugefügt, die zeigen, wie die API in der Praxis verwendet werden kann.
Wie bereits erwähnt, wurden auch unsere Richtlinienseiten und Best Practices überarbeitet, um Ihnen mehr Informationen dazu zu geben, wie Sie eine Seitenleiste erstellen, die Ihren Nutzern die bestmögliche Erfahrung bietet.
Auf unserer Seite „Neuigkeiten“ finden Sie aktuelle Informationen zu Chrome-Erweiterungen. Wenn Sie Fragen haben oder Hilfe zur Side Panel API benötigen, können Sie die Google-Gruppe für Chromium-Erweiterungen besuchen.