chrome.browserAction

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Beschreibung

Verfügbarkeit

In der folgenden Abbildung ist das mehrfarbige Quadrat rechts neben der Adressleiste das Symbol für eine Browseraktion. Unter dem Symbol wird ein Pop-up angezeigt.

Wenn Sie ein Symbol erstellen möchten, das nicht immer aktiv ist, verwenden Sie stattdessen eine Seitenaktion.

Manifest

Registrieren Sie Ihre Browseraktion so im Manifest der Erweiterung:

{
  "name": "My extension",
  ...
  "browser_action": {
    "default_icon": {                // optional
      "16": "images/icon16.png",     // optional
      "24": "images/icon24.png",     // optional
      "32": "images/icon32.png"      // optional
    },
    "default_title": "Google Mail",  // optional, shown in tooltip
    "default_popup": "popup.html"    // optional
  },
  ...
}

Sie können ein beliebiges Symbol in Chrome verwenden. Chrome wählt dann das am besten passende Symbol aus und skaliert es auf die richtige Größe, um den Bereich von 16 dip auszufüllen. Wenn die genaue Größe jedoch nicht angegeben wird, kann diese Skalierung dazu führen, dass das Symbol Details verliert oder verschwommen erscheint.

Da Geräte mit weniger gängigen Skalierungsfaktoren wie 1,5- oder 1,2-fach immer häufiger werden, sollten Sie mehrere Größen für Ihre Symbole angeben. So müssen Sie auch nicht noch einmal verschiedene Symbole bereitstellen, wenn sich die Größe des angezeigten Symbols ändert.

Die alte Syntax zum Registrieren des Standardsymbols wird weiterhin unterstützt:

{
  "name": "My extension",
  ...
  "browser_action": {
    ...
    "default_icon": "images/icon32.png"  // optional
    // equivalent to "default_icon": { "32": "images/icon32.png" }
  },
  ...
}

Teile der Benutzeroberfläche

Eine Browseraktion kann ein Symbol, eine Kurzinfo, ein Logo und ein Pop-up haben.

Symbol

Die Symbole für Browseraktionen in Chrome sind 16 dips (geräteunabhängige Pixel) breit und hoch. Größere Symbole werden entsprechend angepasst. Die besten Ergebnisse erzielen Sie jedoch mit einem quadratischen Symbol mit 16 Pixeln Kantenlänge.

Sie können das Symbol auf zwei Arten festlegen: mit einem statischen Bild oder mit dem Canvas-Element von HTML5. Die Verwendung statischer Bilder ist für einfache Anwendungen einfacher. Mit dem Canvas-Element können Sie jedoch dynamischere Benutzeroberflächen erstellen, z. B. flüssige Animationen.

Statische Bilder können in jedem Format vorliegen, das von WebKit angezeigt werden kann, z. B. BMP, GIF, ICO, JPEG oder PNG. Bei entpackten Erweiterungen müssen Bilder im PNG-Format vorliegen.

Verwenden Sie zum Festlegen des Symbols das Feld default_icon von browser_action im Manifest oder rufen Sie die Methode browserAction.setIcon auf.

Damit das Symbol richtig angezeigt wird, wenn die Pixeldichte des Bildschirms (Verhältnis size_in_pixel / size_in_dip) von 1 abweicht, kann das Symbol als Gruppe von Bildern mit unterschiedlichen Größen definiert werden. Das tatsächlich angezeigte Bild wird aus dem Set ausgewählt, um der Pixelgröße von 16 dip am besten zu entsprechen. Das Symbolset kann eine beliebige Größe der Symbolspezifikation enthalten. Chrome wählt die am besten geeignete Größe aus.

Kurzinfo

Verwenden Sie das Feld default_title von browser_action im Manifest, um die Kurzinfo festzulegen, oder rufen Sie die Methode browserAction.setTitle auf. Sie können für das Feld default_title länderspezifische Strings angeben. Weitere Informationen finden Sie unter Internationalisierung.

Badge

Browseraktionen können optional ein Kennzeichen enthalten, also ein Textelement, das über dem Symbol eingeblendet wird. Mithilfe von Logos können Sie die Browseraktion ganz einfach aktualisieren, um einige Informationen zum Status der Erweiterung anzuzeigen.

Da das Logo nur wenig Platz hat, sollte es maximal vier Zeichen lang sein.

Legen Sie den Text und die Farbe des Logos mit browserAction.setBadgeText bzw. browserAction.setBadgeBackgroundColor fest.

Pop-up

Wenn für eine Browseraktion ein Pop-up verwendet wird, wird es angezeigt, wenn der Nutzer auf das Symbol der Erweiterung klickt. Das Pop-up kann beliebige HTML-Inhalte enthalten und wird automatisch an den Inhalt angepasst. Das Pop-up darf nicht kleiner als 25 × 25 und nicht größer als 800 × 600 Pixel sein.

Wenn Sie Ihrer Browseraktion ein Pop-up hinzufügen möchten, erstellen Sie eine HTML-Datei mit dem Inhalt des Pop-ups. Geben Sie die HTML-Datei im Feld default_popup von browser_action im Manifest an oder rufen Sie die Methode browserAction.setPopup auf.

Tipps

Beachten Sie die folgenden Richtlinien, um die bestmögliche visuelle Wirkung zu erzielen:

• Verwenden Sie Browseraktionen für Funktionen, die auf den meisten Seiten sinnvoll sind.
• Verwenden Sie keine Browseraktionen für Funktionen, die nur für wenige Seiten sinnvoll sind. Verwenden Sie stattdessen Seitenaktionen.
• Verwenden Sie große, farbenfrohe Symbole, die den gesamten Bereich von 16 × 16 Pixeln ausfüllen. Browseraktionssymbole sollten etwas größer und fetter sein als Seitenaktionssymbole.
• Versuchen Sie nicht, das einfarbige Menüsymbol von Google Chrome nachzuahmen. Das funktioniert nicht gut mit Themen und Erweiterungen sollten sich ohnehin ein wenig abheben.
• Verwenden Sie Alphatransparenz, um Ihrem Symbol weiche Kanten hinzuzufügen. Da viele Nutzer Designs verwenden, sollte Ihr Symbol auf einer Vielzahl von Hintergrundfarben gut aussehen.
• Animieren Sie Ihr Symbol nicht ständig. Das ist einfach ärgerlich.

Beispiele

Im Verzeichnis examples/api/browserAction finden Sie einfache Beispiele für die Verwendung von Browseraktionen. Weitere Beispiele und Informationen zum Aufrufen des Quellcodes finden Sie unter Beispiele.

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
)

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
)

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
)

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
)

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
)

chrome.browserAction.onClicked.addListener(
  callback: function,
)