Vor einem Jahr, im Mai 2022, haben wir die Seitenleiste in Chrome eingeführt. Das ist eine neue Oberfläche, auf der Nutzer Tools neben den Inhalten verwenden können, die sie gerade ansehen. Ab Chrome 114 können Sie Inhalte in der Seitenleiste Ihrer Erweiterung anzeigen lassen.
Bessere Nutzerfreundlichkeit, einfachere Nutzung für Entwickler
Viele Entwickler haben bereits ähnliche Funktionen in ihren Erweiterungen implementiert. Deshalb freuen wir uns, diese Funktion als Plattformstandard einzuführen. Mit der neuen Side Panel API können Sie jetzt eine persistente Benutzeroberfläche anbieten, die neben einer Seite geöffnet wird, die der Nutzer besucht. Nutzer profitieren von einer einheitlichen Positionierung und einem einheitlichen Layout der Erweiterungen. Außerdem ist die Möglichkeit, die Benutzeroberfläche ohne Hostberechtigungen anzuzeigen, ein wichtiger Vorteil für die Nutzer in Bezug auf den Datenschutz. Außerdem wird die Anzahl der Warnungen reduziert, die bei der Installation Ihrer Erweiterung angezeigt werden.
Mit der Side Panel API können Sie Inhalte ganz einfach in eine nicht vertrauenswürdige Seite einfügen. Außerdem müssen Sie die Kompatibilität nicht mehr für verschiedene Websites aufrechterhalten und keine Fehlerberichte zu versehentlichen Unterbrechungen durch Ihre Erweiterung mehr durchgehen.
Ein Begleiter für Nutzer im Web
Wenn Sie im Rahmen Ihrer Erweiterung eine neue Seitenleiste erstellen, sollten Sie Folgendes berücksichtigen: Wie unterstützen Sie Nutzer dabei, Aufgaben im Web auszuführen? Hier sind einige Fragen, die Sie sich stellen sollten:
- Inwiefern hilft meine Seitenleiste den Nutzern?
- Die Richtlinie zum einen Zweck gilt auch für die Seitenleiste. Achten Sie darauf, dass die Seitenleiste Funktionen bietet, die sich direkt auf den Rest Ihrer Erweiterung und das beziehen, was der Nutzer erreichen möchte.
- 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 wird. So können Sie vermeiden, dass sie angezeigt wird, wenn sie für den Nutzer nicht relevant ist oder keinen Bezug zu den Inhalten hat, die er gerade aufruft.
- Ist das Design einheitlich mit dem Rest meiner Erweiterung?
- Der Seitenbereich sollte ein visuell ansprechendes Design haben, das mit dem Logo, den Farben, Symbolen und Schriftarten Ihrer Erweiterung und Ihres Store-Eintrags übereinstimmt. So erhalten Nutzer überall dort, wo sie Ihre Erweiterung verwenden, eine einheitliche, wiedererkennbare Oberfläche.
- Wie finden Nutzer meinen Seitenbereich?
- Informieren Sie neue Nutzer über die Verwendung Ihrer Seitenleiste, indem Sie in der Erweiterung ausreichend Dokumentation oder Schulungen bereitstellen. So können Sie Nutzer binden und schlechte Rezensionen in Ihrem Store-Eintrag vermeiden. Denken Sie daran, dass Sie Nutzer schon vor der Installation Ihrer Erweiterung informieren können. Fügen Sie dazu einfach ein YouTube-Video in Ihren Store-Eintrag ein, in dem die Funktionsweise Ihrer Erweiterung veranschaulicht wird.
Außerdem haben wir unsere Programmrichtlinien aktualisiert. Die Abschnitte Best Practices und Qualitätsrichtlinien wurden überarbeitet, um einige dieser Aspekte zu berücksichtigen. Diese Änderungen unterstreichen, dass die Seitenleiste Nutzern beim Surfen helfen und ergänzende Funktionen bieten sollte. Außerdem wird deutlich gemacht, dass die Seitenleiste nicht unnötig ablenken sollte.
Übersicht über die API
Damit Ihre Erweiterung in der Seitenleiste angezeigt wird, müssen Sie in Ihrem Manifest die Berechtigung "sidePanel" anfordern und den Schlüssel "side_panel" mit einem "default_path" hinzufügen, der auf eine Seite in Ihrer Erweiterung verweist:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
Auf einer Seitenleiste können Sie Scripts laden und Erweiterungs-APIs aufrufen, wie auf jeder anderen Erweiterungsseite. Das Symbol für die Seitenleiste wird aus dem Symbol Ihrer Erweiterung übernommen.
Zusätzliche Funktionen
Sie können die Seitenleiste mit Ihrem Aktionssymbol verknüpfen, damit sie jederzeit leicht geöffnet werden kann:
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
Wenn Sie möchten, dass Ihr Seitenbereich nur auf bestimmten Seiten angezeigt wird, können Sie das festlegen und verhindern, dass er an anderen Stellen erscheint, an denen er 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 ab sofort 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 verwendet werden kann.
Wie bereits erwähnt, wurden auch unsere Richtlinienseiten und Best Practices überarbeitet. Dort erfahren Sie jetzt mehr darüber, wie Sie eine Seitenleiste erstellen, die für Ihre Nutzer möglichst nutzerfreundlich ist.
Aktuelle Informationen zu Chrome-Erweiterungen finden Sie auf unserer Seite mit Neuigkeiten. Wenn Sie Fragen zur Seitenleiste API haben oder Hilfe benötigen, können Sie sich an die Google-Gruppe Chromium-Erweiterungen wenden.
Foto von Vardan Papikyan auf Unsplash