Entwickeln einer Erweiterung für die Microsoft Edge-Randleiste

Als Microsoft Edge-Erweiterungsentwickler können Sie Ihre neue oder vorhandene Microsoft Edge-Erweiterung auf der Randleiste anzeigen lassen. Jede Erweiterung kann die Randleiste zusätzlich zur anderen Benutzeroberfläche verwenden.

Ausführlicher Inhalt:

Einführung

Verwenden Sie die chrome.sidePanel API, um Inhalte auf der Seitenleiste von Microsoft Edge zusammen mit dem Hauptinhalt einer Webseite zu hosten.

Als Microsoft Edge-Erweiterungsentwickler können Sie Ihre neue oder vorhandene Microsoft Edge-Erweiterung auf der Randleiste anzeigen lassen. Jede Erweiterung kann die Randleiste zusätzlich zur anderen Benutzeroberfläche verwenden.

Die Randleiste für eine Microsoft Edge-Erweiterung

Mithilfe der Seitenbereichs-API können Sie die Browsererfahrung verbessern, indem Sie Benutzern das Anzeigen zusätzlicher Informationen neben dem Hauptinhalt einer Webseite ermöglichen.

Die Randleiste ist ein persistenter Bereich, der sich an der Seite von Microsoft Edge befindet. Der Randleistenbereich ist zusammen mit dem primären Inhalt des Browsers vorhanden. Die Randleiste reduziert die Notwendigkeit, ständig zwischen Registerkarten zu wechseln, was zu einer produktiveren Browsererfahrung führt.

Eine Erweiterung kann optional die Seitenbereichs-API verwenden, um eine benutzerdefinierte Benutzeroberfläche in der Microsoft Edge-Randleiste anzuzeigen. Darüber hinaus kann die Erweiterung weiterhin in der Microsoft Edge-Symbolleiste zusammen mit einer Benutzeroberfläche wie Popups angezeigt werden und Skripts einfügen.

Begrifflichkeiten

Begriff Definition
die Seitenbereichs-API Name des Features, das Sie in Ihren Microsoft Edge-Erweiterungen verwenden können. Die Chrome-Benutzeroberfläche verwendet den Begriff Seitenbereich.
sidePanel oder side_panel Name der API und Berechtigung zum Aktivieren einer Beliebigen Erweiterung als Randleistenerweiterung.
Seitenleistenerweiterung Eine Microsoft Edge-Erweiterung mit einer Benutzeroberfläche in der Randleiste.

Konzepte und Verwendung

Die Seitenbereichs-API ermöglicht es einer Erweiterung, eine eigene Benutzeroberfläche in der Microsoft Edge-Randleiste anzuzeigen, wodurch eine persistente Benutzeroberfläche ermöglicht wird, die die Browser-Journey des Benutzers ergänzt.

Randleisten-Benutzeroberfläche des Edgebrowsers

Wie bei anderen Erweiterungsressourcen wird die HTML-Seite, die auf der Randleiste angezeigt wird, in einem vertrauenswürdigen Erweiterungskontext am Ursprung der Erweiterung (extension://<id>) ausgeführt. Die Randleiste hat denselben API-Zugriff wie andere vertrauenswürdige Erweiterungskontexte.

Alle vorhandenen Erweiterungs-APIs sind für Randleistenerweiterungen verfügbar, sodass Sie alle aktuellen Funktionen des Erweiterbarkeitsframeworks in Ihrer Sidebar-fähigen Erweiterung nutzen können.

Zu den Features der Randleiste gehören:

  • Die Randleiste bleibt geöffnet, während zwischen Registerkarten navigiert wird.

    • Bekanntes Problem: Die Randleiste wird nicht automatisch erneut angezeigt, wenn der Benutzer zu einer Registerkarte wechselt, auf der die Randleiste zuvor geöffnet war (Problem 142).

  • Eine Erweiterung in der Randleiste kann für bestimmte Websites zur Verfügung gestellt werden.

  • Eine Erweiterung in der Randleiste hat Zugriff auf alle unterstützten APIs für Microsoft Edge-Erweiterungen.

  • In den Microsoft Edge-Einstellungen kann der Benutzer mehrere Randleisteneinstellungen angeben.

Hinzufügen der sidePanel-Berechtigung in der Manifestdatei

Um die Seitenbereichs-API zu verwenden, fügen Sie die "sidePanel" Berechtigung in der Manifestdatei der Erweiterung (manifest.json) hinzu:

{
  ...
  "name": "My sidebar extension",
  ...
  "side_panel": {
    "default_path": "sidepanel.html"
  },
  "permissions": [
    "sidePanel"
  ]
   ...
}

Jede Erweiterung für Microsoft Edge verfügt über eine JSON-formatierte Manifestdatei namens manifest.json. Die Manifestdatei ist die Blaupause der Erweiterung.

In jedem Beispiel ist eine vollständige Manifestdatei enthalten. siehe Erweiterungsbeispiele unten.

Siehe auch:

Anwendungsfälle für die Side Panel-API

In den folgenden Abschnitten werden einige gängige Anwendungsfälle für die Side Panel-API veranschaulicht.

Vollständige Beispiele für Erweiterungen finden Sie unten unter Beispiele für Erweiterungen.

Anzeigen der gleichen Seitenleiste auf jeder Website

Eine Randleiste kann als Standard festgelegt werden, um dieselbe Erweiterung in allen geöffneten Browserregisterkarten anzuzeigen. Standardwerte bleiben über Browsersitzungen hinweg erhalten.

Definieren manifest.jsonSie in den "default_path" Schlüssel, z "sidepanel.html". B. :

{
  "name": "My sidebar extension",
  ...
  "side_panel": {
    "default_path": "sidepanel.html"
  }
  ...
}

Die Datei, die Sie als Standard angegeben haben, z sidepanel.html. B. , wird auf allen geöffneten Browserregisterkarten angezeigt:

<!DOCTYPE html>
<html>
  <head>
    <title>Global side panel</title>
  </head>
  <body>
    <h1>All sites sidepanel extension</h1>
    <p>This side panel is enabled on all sites</p>
  </body>
</html>

Siehe auch:

Aktivieren einer Randleiste nur für eine bestimmte Website

Eine Erweiterung kann sidepanel.setOptions() verwenden, um eine Randleiste auf einer bestimmten Registerkarte zu aktivieren. Dies kann eine bestimmte Website sein, sodass die Erweiterung in der Randleiste geöffnet wird, wenn der Benutzer zu dieser Website wechselt.

In diesem Beispiel wird chrome.tabs.onUpdated() verwendet, um auf aktualisierungen der Registerkarte zu lauschen. Es wird überprüft, ob die URL lautet www.bing.com , und wenn ja, wird die Randleiste aktiviert. Andernfalls wird die Randleiste deaktiviert.

service-worker.js:

const BING_ORIGIN = 'https://www.bing.com';

chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {
  if (!tab.url) return;
  const url = new URL(tab.url);
  // Enables the sidebar when at bing.com
  if (url.origin === BING_ORIGIN) {
    await chrome.sidePanel.setOptions({
      tabId,
      path: 'sidepanel.html',
      enabled: true
    });
  } else {
    // Disables the sidebar when at other sites
    await chrome.sidePanel.setOptions({
      tabId,
      enabled: false
    });
  }
});

In addListener()gehen wir wie folgt vor:

  1. Testen Sie url.origin , ob es sich um die gewünschte Registerkarte handelt.
  2. Legen Sie in sidePanel.setOptions()auf true oder falsefestenabled.

Wenn ein Benutzer zu einer Registerkarte oder Website wechselt, für die die Randleiste nicht aktiviert ist, wird die Randleiste ausgeblendet.

Bekanntes Problem: Die Randleiste wird nicht automatisch erneut angezeigt, wenn der Benutzer zu einer Registerkarte wechselt, auf der die Randleiste zuvor geöffnet war (Problem 142).

Ein vollständiges Beispiel finden Sie unter Sitespezifisches Seitenbereichsbeispiel.

Aktivieren des Verknüpfungssymbols der Erweiterung, um die Randleiste zu öffnen

Verwenden Sie sidePanel.setPanelBehavior(), damit Benutzer die Randleiste öffnen können, indem Sie auf das Symbol der Aktionssymbolleiste klicken. Deklarieren Sie zunächst den "action" Schlüssel in manifest.json:

{
  "name": "My sidebar extension",
  ...
   "action": {
    "default_title": "Click to open sidebar"
  },
  ...
}

Fügen Sie dann den folgenden Code zur service-worker.js Codeauflistung hinzu, die sich oben unter Aktivieren einer Randleiste nur für eine bestimmte Website befindet:

// Allow users to open the sidebar by clicking the action toolbar icon
chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));

Öffnen der Randleiste bei Benutzerinteraktion

sidePanel.open() ermöglicht Erweiterungen das Öffnen der Seitenleiste über eine Benutzergeste, z. B. durch Klicken auf das Aktionssymbol, oder durch eine Beliebige Benutzerinteraktion auf einer Erweiterungsseite oder einem Inhaltsskript, z. B. durch Klicken auf eine Schaltfläche.

Der folgende Code zeigt, wie eine globale Randleiste im aktuellen Fenster geöffnet wird, wenn der Benutzer auf ein Kontextmenü klickt. Wenn Sie verwenden sidePanel.open(), wählen Sie den Kontext aus, in dem die Randleiste geöffnet werden soll:

  • Verwenden Sie windowId , um eine globale Randleiste zu öffnen, wie im folgenden Beispiel gezeigt.
  • Oder legen Sie fest tabId , dass die Randleiste nur auf einer bestimmten Registerkarte geöffnet wird.
// service-worker.js:
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'openSidePanel',
    title: 'Open sidebar',
    contexts: ['all']
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'openSidePanel') {
    // Open the sidebar in all the tabs of the current window.
    chrome.sidePanel.open({ windowId: tab.windowId });
  }
});

Eine vollständige Demo finden Sie unter Öffnen des Seitenbereichs über eine Benutzerinteraktion.

Wechseln zu einer anderen Randleiste

Eine Erweiterung kann sidepanel.getOptions() verwenden, um die aktuelle Randleiste abzurufen, und dann eine andere Randleiste für eine bestimmte Registerkarte aktivieren.

In diesem Beispiel wird eine Randleiste festgelegt, die eine Willkommensnachricht auf runtime.onInstalled() enthält. Wenn der Benutzer zu einer anderen Registerkarte navigiert, wird die Randleiste durch die Seitenleiste auf Browserebene ersetzt.

// service-worker.js:
const welcomePage = 'sidebar/welcome-sb.html';
const mainPage = 'sidebar/main-sb.html';

chrome.runtime.onInstalled.addListener(() => {
  chrome.sidePanel.setOptions({ path: welcomePage });
});

chrome.tabs.onActivated.addListener(async ({ tabId }) => {
  const { path } = await chrome.sidePanel.getOptions({ tabId });
  if (path === welcomePage) {
    chrome.sidePanel.setOptions({ path: mainPage });
  }
});

Den vollständigen Code finden Sie unter Beispiel für mehrere Seitenbereiche.

Entwickeln Sie eine Erweiterung für die Microsoft Edge-Randleiste mit diesen Features für die Benutzererfahrung (User Experience, UX).

Öffnen der Erweiterung in der Randleiste

Um Benutzern das Öffnen der Randleiste zu ermöglichen, führen Sie eine der folgenden Aktionen aus:

Details finden Sie unten.

Durch Klicken auf ein Symbol

Benutzer können auf das Symbol "In Randleiste öffnen" (Symbol ") klicken, das neben dem Namen der Erweiterung im Erweiterungshub angezeigt wird:

Randleistendialogfeld

Alternativ können Benutzer auf der Symbolleiste auf das benutzerdefinierte Symbol der Erweiterung klicken, wenn es aktiviert ist. Diese Benutzeroberfläche erfordert, dass die Erweiterung das Verknüpfungssymbol aktiviert hat, um die Randleiste zu öffnen, wie oben unter Aktivieren des Verknüpfungssymbols der Erweiterung zum Öffnen der Randleiste beschrieben. In diesem Beispiel ist das benutzerdefinierte Symbol der Erweiterung ein Kreis (benutzerdefiniertes Symbol der Erweiterung):

Klicken auf das Symbol der Erweiterung in der Symbolleiste

Siehe auch:

Durch Klicken mit der rechten Maustaste auf das Erweiterungssymbol

Benutzer können in der Symbolleiste mit der rechten Maustaste auf das Symbol der Erweiterung klicken und dann In Randleiste öffnen oder Randleiste schließen auswählen:

Klicken mit der rechten Maustaste auf die Verknüpfung auf der Symbolleiste, um die Erweiterung zu öffnen

Klicken mit der rechten Maustaste auf die Verknüpfung auf der Symbolleiste, um die Erweiterung zu schließen

Das Symbol der Erweiterung wird in der Symbolleiste angezeigt, wenn der Benutzer neben dem Namen der Erweiterung im Erweiterungshub auf das Symbol In der Symbolleiste anzeigen (In Symbolleistensymbol anzeigen) geklickt hat.

Siehe auch:

Durch Drücken einer Tastenkombination

Benutzer können eine Tastenkombination drücken, wenn der Aktionsbefehl aktiviert ist und das Aktionssymbol aktiviert ist, um die Randleiste zu öffnen.

Wenn die openPanelOnActionClick() Eigenschaft des PanelBehavior-Typs auf truefestgelegt ist, kann der Benutzer die Randleiste mithilfe einer Tastenkombination öffnen. Um dies zu aktivieren, geben Sie einen Aktionsbefehl im Manifest an.

Siehe auch:

Öffnen über eine Geste

Die Randleiste kann auch über die folgenden Interaktionen geöffnet werden:

Erweiterungsbeispiele

Weitere Demos für Side Panel-API-Erweiterungen finden Sie unter den folgenden Erweiterungen:

Siehe auch:

Typen und Methoden

Weitere Informationen finden Sie unter Typen und Methoden auf der Chrome.sidePanel-API-Referenzseite unter developer.chrome.com.

Siehe auch

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die ursprüngliche Seite finden Sie hier.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.

  • Last updated on