Aktion implementieren

Eine Aktion ist das, was passiert, wenn ein Nutzer auf das Symbol in der Symbolleiste klickt, das in der Regel 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. Weitere Informationen zum Verwenden eines Pop-ups finden Sie unter Pop-up hinzufügen.

Aktion registrieren

Wenn Sie die chrome.action API verwenden möchten, fügen Sie der Manifest-Datei der Erweiterung den Schlüssel "action" hinzu. Eine vollständige Beschreibung der optionalen Eigenschaften dieses Felds findest du im Abschnitt zum Manifest der chrome.action API-Referenz.

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 in der Datei „manifest.json“ ein Pop-up registriert ist.

service-worker.js:

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

Aktion bedingt aktivieren

Mit der chrome.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, ist es ausgegraut. Wenn der Nutzer auf das deaktivierte Symbol klickt, wird das Kontextmenü der Erweiterung angezeigt.

Symbol für eine deaktivierte Aktion
Deaktiviertes Aktionssymbol.

Aktionssymbol

Badges sind formatierte Textelemente, die über dem Aktionssymbol platziert werden, um beispielsweise den Erweiterungsstatus oder erforderliche Aktionen des Nutzers anzugeben. Zur Veranschaulichung zeigt das Beispiel Wasser trinken ein Symbol mit „AKTIVIERT“, um dem Nutzer zu signalisieren, dass er einen Wecker gestellt hat. Wenn die Erweiterung inaktiv ist, wird nichts angezeigt. Badges können bis zu vier Zeichen enthalten.

Ein Erweiterungssymbol ohne und mit Logo
Symbol einer Erweiterung mit (links) und ohne (rechts) Symbol

Rufen Sie chrome.action.setBadgeText() auf, um den Text des Logos festzulegen, und chrome.action.setBadgeBackgroundColor()`, um die Hintergrundfarbe festzulegen.

service-worker.js:

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

Kurzinfo

Registrieren Sie Kurzinfos 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 durch Aufrufen von action.setTitle()` Kurzinfos festlegen oder aktualisieren. Wenn keine Kurzinfo festgelegt ist, wird der Name der Erweiterung angezeigt.