Überzeugende Nutzererfahrung mit der neuen Side Panel API

Oliver Dunk

Amy Steam

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.

</ph> <ph type="x-smartling-placeholder">

Besser für Nutzer, einfacher für Entwickler

Viele Entwickler implementieren in ihren Erweiterungen bereits Funktionen wie Seitenleisten. Darum freuen wir uns, sie zu einem Plattformstandard zu machen. Mit der neuen Side Panel API können Sie kann nun eine dauerhafte Benutzeroberfläche anbieten, die zusammen mit der Seite geöffnet wird, die der Nutzer gerade aufruft. Die Nutzenden profitieren von einer einheitlichen Positionierung und einem einheitlichen Layout zwischen den Erweiterungen. Außerdem ist es möglich, Benutzeroberflächen ohne Anforderung von Hostberechtigungen bereichern den Datenschutz erheblich. Vorteil, dass bei der Installation weniger Warnungen für die Erweiterung angezeigt werden.

Dank der Side Panel API müssen Sie sich nicht mehr um das Einschleusen von Inhalten in eine nicht vertrauenswürdige Seite. Außerdem wird die Kompatibilitätsanforderung erheblich reduziert. Websites ansehen und in Fehlerberichten über versehentliche Störungen .

Eine Ergänzung für Nutzer im Web

Wenn Sie eine neue Seitenleiste als Teil Ihrer Erweiterung erstellen, müssen Sie eine Sache Denken Sie daran: Wie helfen Sie Nutzenden bei der Erledigung von Aufgaben im Web? Hier sind ein paar Fragen, sollten Sie Folgendes in Betracht ziehen:

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 zeigen, dass die Seitenleiste als hilfreicher Begleiter für die durch das Bereitstellen komplementärer Funktionen. 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 wie auf jeder anderen Seite Skripts und Anruferweiterungs-APIs laden Erweiterungsseite. Das Symbol für die Seitenleiste wird aus der das Symbol.

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 Sie möchten, dass die Seitenleiste nur auf bestimmten Seiten angezeigt wird, können Sie dies steuern. an anderer Stelle erscheint, wo es 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 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