Vor einem Jahr, im Mai 2022, haben wir die Seitenleiste in Chrome hinzugefügt. 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 Seitenleisten in ihre 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 Datensicherheit der Nutzer. 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 dadurch die Kompatibilität verschiedener Websites aufrechterhalten und Fehlerberichte über versehentliche Unterbrechungen durch Ihre Erweiterung durchsuchen.
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? Folgende Fragen sollten Sie berücksichtigen:
- 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 verhindern, dass sie angezeigt werden, wenn sie für den Nutzer nicht relevant oder nicht mit dem Inhalt zusammenhängen, den der Nutzer sich gerade ansieht.
- Passt das Design zum Rest meiner Erweiterung?
- Die Seitenleiste sollte optisch ansprechend sein, das dem Logo, den Farben, Symbolen und Schriftarten deiner Erweiterung und deines Store-Eintrags entspricht. So erhalten Nutzer überall dort, wo sie Ihre Erweiterung verwenden, eine einheitliche, wiedererkennbare Oberfläche.
- Wie finden Nutzer meinen Seitenbereich?
- Informieren Sie neue Nutzer darüber, wie sie die Seitenleiste verwenden können, indem Sie in der Erweiterung ausreichend Dokumentation oder Schulungen bereitstellen. So kannst du Nutzer an dich binden und negative Rezensionen in deinem 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.
Überblick ü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 Seitenleistenseite können Sie Scripts laden und Erweiterungs-APIs aufrufen, wie auf jeder anderen Erweiterungsseite. Das Symbol für die Seitenleiste wird aus dem Symbol der 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, besuchen Sie die Google-Gruppe Chromium-Erweiterungen.
Foto von Vardan Papikyan auf Unsplash