Vor einem Jahr, im Mai 2022, haben wir die Seitenleiste in Chrome hinzugefügt. Dies ist eine neue Companion-Oberfläche, die es Nutzern ermöglicht, Tools neben dem Inhalt, den sie durchsuchen, zu verwenden. Ab Chrome 114 können in Ihrer Erweiterung Inhalte in der Seitenleiste angezeigt werden.
Besser für Nutzer, einfacher für Entwickler
Viele Entwickler haben bereits Erfahrung mit Seitenleisten in ihrer Erweiterung implementiert. Deshalb freuen wir uns, sie zu einem Plattformstandard machen zu können. Mit der neuen Side Panel API kannst du jetzt eine dauerhafte Benutzeroberfläche anbieten, die neben einer vom Nutzer besuchten Seite geöffnet wird. Nutzer profitieren von einer einheitlichen Positionierung und einem einheitlichen Layout zwischen den Erweiterungen. Die Möglichkeit, die Benutzeroberfläche anzuzeigen, ohne Hostberechtigungen anzufordern, ist ein wesentlicher Datenschutzvorteil für Nutzer. Der zusätzliche Vorteil besteht darin, dass bei der Installation weniger Warnungen für Ihre Erweiterung angezeigt werden.
Dank der Side Panel API müssen Sie sich keine Gedanken mehr um das Einfügen von Inhalten auf eine nicht vertrauenswürdige Seite machen. Außerdem müssen Sie dadurch die Kompatibilität verschiedener Websites aufrechterhalten und Fehlerberichte über versehentliche Unterbrechungen durch Ihre Erweiterung durchsuchen.
Eine Ergänzung für Nutzer im Web
Wenn Sie eine neue Seitenleiste als Teil Ihrer Erweiterung erstellen, müssen Sie eines im Hinterkopf behalten: Wie unterstützen Sie Nutzer beim Erledigen von Aufgaben im Web? Folgende Fragen sollten Sie berücksichtigen:
- Welche Vorteile bietet die Seitenleiste für den Nutzer?
- Die Richtlinie Für einen einzigen Zweck gilt auch für die Seitenleiste. Die Seitenleiste sollte Funktionen bieten, die sich direkt auf die restlichen Erweiterungen und die Ziele des Nutzers beziehen.
- Wird meine Seitenleiste nur angezeigt, wenn sie relevant ist?
- Mit der Side Panel API können Sie festlegen, auf welchen Websites Ihre Nutzer die Seitenleiste sehen können. 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. Dies sorgt für eine einheitliche, wiedererkennbare Nutzererfahrung, unabhängig davon, wo sie die Erweiterung verwenden.
- Wie finden Nutzer meine Seitenleiste?
- Stelle genügend Dokumentation oder Training zur Erweiterung zur Verfügung, damit neue Nutzer wissen, wie sie die Seitenleiste verwenden können. So kannst du Nutzer an dich binden und negative Rezensionen in deinem Store-Eintrag vermeiden. Denken Sie daran: Sie können den Nutzern vor der Installation der Erweiterung ein YouTube-Video hinzufügen, das zeigt, wie die Erweiterung in Ihrem Store-Eintrag funktioniert.
Darüber hinaus haben wir unsere Programmrichtlinien aktualisiert und um die Abschnitte Best Practices und Qualitätsrichtlinien ergänzt, um einige dieser Überlegungen zu berücksichtigen. Diese Änderungen haben deutlich gemacht, dass die Seitenleiste als Ergänzung zu ergänzenden Funktionen die Browsernutzung der Nutzer unterstützen soll. Sie machen auch deutlich, dass die Seitenleiste keine unnötigen Ablenkungen enthalten sollte.
Überblick über die API
Damit Ihre Erweiterung in der Seitenleiste angezeigt wird, 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 dann vom Symbol der Erweiterung entfernt. Dieses kannst du noch optimieren.
Zusätzliche Funktionen
Sie können die Seitenleiste mit Ihrem 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 dies steuern und verhindern, dass sie an Stellen erscheint, die für den Nutzer nicht relevant sind:
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 sofort lesen können. Außerdem haben wir dem Repository "chrome-extensions-samples" Beispiele hinzugefügt, damit Sie genau sehen können, wie die API in der Praxis eingesetzt werden kann.
Wie bereits erwähnt, wurden auch unsere Richtlinienseiten und Best Practices überarbeitet. Sie enthalten nun Informationen dazu, wie Sie eine Seitenleiste erstellen können, die Ihren Nutzern die bestmögliche Nutzerfreundlichkeit bietet.
Neuigkeiten zu Chrome-Erweiterungen finden Sie auf unserer 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 auf Unsplash