Im Mai 2022 haben wir die Seitenleiste in Chrome hinzugefügt. Dies ist eine neue Companion-Oberfläche, mit der Nutzer neben den Inhalten, die sie durchsuchen, auch Tools verwenden können. Ab Chrome 114 können mit Ihrer Erweiterung jetzt Inhalte in der Seitenleiste angezeigt werden.
Besser für Nutzer, einfacher für Entwickler
Viele Entwickler haben bereits Funktionen wie eine Seitenleiste in ihre Erweiterungen integriert. Daher freuen wir uns, sie zu einem Plattformstandard zu machen. Mit der neuen Side Panel API kannst du jetzt eine persistente UI anbieten, die neben einer vom Nutzer besuchten Seite geöffnet wird. Nutzer profitieren von einer einheitlichen Positionierung und einem einheitlichen Layout der Erweiterungen. Darüber hinaus ist die Möglichkeit, die Benutzeroberfläche anzuzeigen, ohne Hostberechtigungen anzufordern, einen erheblichen Datenschutzvorteil für Nutzer, mit dem zusätzlichen Vorteil, dass die Anzahl der Warnungen, die für Ihre Erweiterung bei der Installation angezeigt werden, reduziert wird.
Die Side Panel API beseitigt Probleme, die mit dem Einschleusen von Inhalten auf nicht vertrauenswürdigen Seiten verbunden sind. Außerdem verringert sich deutlich die Notwendigkeit für die Aufrechterhaltung der Kompatibilität zwischen verschiedenen Websites und das Überprüfen von Fehlerberichten nach versehentlichen Störungen, die durch Ihre Erweiterung verursacht wurden.
Eine Ergänzung für Nutzer im gesamten Web
Wenn Sie im Rahmen Ihrer Erweiterung eine neue Seitenleiste erstellen, müssen Sie eines im Hinterkopf behalten: Wie unterstützen Sie Nutzer bei der Erledigung von Aufgaben im Web? Folgende Fragen sollten Sie sich stellen:
- Wie hilft die Seitenleiste dem Nutzer?
- Die Richtlinie zu einem einzigen Zweck gilt auch für die Seitenleiste. Die Seitenleiste sollte Funktionen enthalten, die sich direkt auf die Erweiterung und das Ziel des Nutzers beziehen.
- Wird meine Seitenleiste nur angezeigt, wenn sie relevant ist?
- Mit der Seitenleisten-API können Sie auswählen, auf welchen Websites die Seitenleiste Ihren Nutzern angezeigt wird. Auf diese Weise können Sie verhindern, dass sie angezeigt wird, wenn sie für den Nutzer nicht relevant sind oder nicht mit den Inhalten zusammenhängen, die sich der Nutzer gerade ansieht.
- Ist das Design mit der restlichen Erweiterung konsistent?
- Die Seitenleiste sollte optisch ansprechend gestaltet sein und zum Logo, den Farben, den Symbolen und den Schriftarten deiner Erweiterung und deines Store-Eintrags passen. So haben Nutzer immer und überall die Möglichkeit, die Erweiterung wiederzuerkennen.
- Wie können Nutzer meine Seitenleiste entdecken?
- Informieren Sie neue Nutzer über die Verwendung der Seitenleiste, indem Sie in der Erweiterung eine ausreichende Dokumentation oder Schulungen bereitstellen. So kannst du die Nutzerbindung erhöhen und negative Rezensionen in deinem Store-Eintrag vermeiden. Denken Sie daran, dass Sie Nutzer schon vor der Installation der Erweiterung informieren können, indem Sie ein YouTube-Video einbinden, in dem gezeigt wird, wie die Erweiterung in Ihrem Store-Eintrag funktioniert.
Außerdem haben wir unsere Programmrichtlinien aktualisiert und die Abschnitte Best Practices und Qualitätsrichtlinien entsprechend aktualisiert. Diese Änderungen machen deutlich, dass die Seitenleiste den Nutzern durch ergänzende Funktionen zur Unterstützung bei der Suche dienen soll. Außerdem wird deutlich, dass die Seitenleiste keine unnötigen Ablenkungen enthalten sollte.
Übersicht über die API
Damit Ihre Erweiterung in der Seitenleiste erscheint, fordern Sie die Berechtigung "sidePanel" in Ihrem Manifest an und fügen Sie den Schlüssel "side_panel" mit einer "default_path" hinzu, die auf eine Seite innerhalb Ihrer Erweiterung verweist:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
Auf einer Seitenleiste in der Seitenleiste können Sie Skripts und Anruferweiterungs-APIs genau wie auf jeder anderen Erweiterungsseite laden. Das Symbol für die Seitenleiste wird aus dem Symbol der Erweiterung übernommen. Vergessen Sie nicht, es zu optimieren.
Zusätzliche Funktionen
Sie können die Seitenleiste mit Ihrem Aktionssymbol verknüpfen, damit sie jederzeit ganz 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 dies steuern und verhindern, dass sie an anderer Stelle angezeigt wird, wo 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 Seitenleisten-API-Dokumentation veröffentlicht, die Sie ab heute lesen können. Außerdem haben wir dem Repository „chrome-extensions-samples“ Beispiele hinzugefügt. Dort können Sie sehen, wie die API in der Praxis eingesetzt werden kann.
Wie bereits erwähnt, wurden auch unsere Richtlinienseiten und Best Practices überarbeitet, um mehr darüber zu erfahren, wie du eine Seitenleiste erstellen kannst, die eine optimale Nutzererfahrung bietet.
Aktuelle Informationen zu Chrome-Erweiterungen finden Sie auf der Seite Neue Funktionen. Wenn Sie Fragen haben oder Hilfe zur Side Panel API benötigen, können Sie die Google-Gruppe Chromium-Erweiterungen besuchen.
Foto von Vardan Papikyan bei Unsplash