Aktion implementieren

Eine Aktion ist das, was passiert, wenn ein Nutzer auf das Symbol in der Symbolleiste klickt, das normalerweise als Aktionssymbol für Ihre Erweiterung bezeichnet wird. Eine Aktion ruft eine Erweiterungsfunktion über die Action API auf oder öffnet ein Pop-up. Auf dieser Seite wird beschrieben, wie Sie eine Erweiterungsfunktion aufrufen. Informationen zum Verwenden eines Pop‑ups finden Sie unter Pop‑up hinzufügen.

Aktion registrieren

Wenn Sie die browser.action API verwenden möchten, fügen Sie den "action"-Schlüssel der Manifestdatei der Erweiterung hinzu. Eine vollständige Beschreibung der optionalen Eigenschaften dieses Felds finden Sie in der API-Referenz für browser.action im Manifestabschnitt.

manifest.json:

{
  "name": "My Awesome action Extension",
 ...
  "action": {
   ...
  }
 ...
}

Auf die Aktion reagieren

Registrieren Sie einen onClicked-Handler für den Fall, dass der Nutzer auf das Aktionssymbol klickt. Dieses Ereignis wird nicht ausgelöst, wenn ein Pop-up in der Datei „manifest.json“ registriert ist.

service-worker.js:

browser.action.onClicked.addListener((tab) => {
  browser.action.setTitle({
    tabId: tab.id,
    title: `You are on tab: ${tab.id}`});
});

Aktion bedingt aktivieren

Mit der browser.declarativeContent API können Sie das Aktionssymbol der Erweiterung basierend auf der Seiten-URL oder wenn CSS-Selektoren mit den Elementen auf der Seite übereinstimmen, aktivieren. Wenn das Aktionssymbol einer Erweiterung deaktiviert ist, wird es ausgegraut dargestellt. Wenn der Nutzer auf das deaktivierte Symbol klickt, wird das Kontextmenü der Erweiterung angezeigt.

Aktionssymbol

Badges sind formatierte Textteile, die über dem Aktionssymbol platziert werden, um beispielsweise den Erweiterungsstatus oder erforderliche Nutzeraktionen anzugeben. Im Beispiel Drink Water wird ein Badge mit „ON“ angezeigt, um dem Nutzer zu zeigen, dass er erfolgreich einen Alarm eingestellt hat. Wenn die Erweiterung inaktiv ist, wird nichts angezeigt. Badges können bis zu vier Zeichen enthalten.

Legen Sie den Text des Logos mit browser.action.setBadgeText() und die Hintergrundfarbe mit browser.action.setBadgeBackgroundColor() fest.

service-worker.js:

browser.action.setBadgeText({text: 'ON'});
browser.action.setBadgeBackgroundColor({color: '#4688F1'});

Kurzinfo

Registrieren Sie Tooltips im Feld "default_title" unter dem Schlüssel "action" in der Datei „manifest.json“.

manifest.json:

{
  "name": "Tab Flipper",
 ...
  "action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

Sie können auch Tooltips festlegen oder aktualisieren, indem Sie action.setTitle() aufrufen. Wenn keine Kurzinfo festgelegt ist, wird der Name der Erweiterung angezeigt.