browserAction.setIcon()

Setzt das Symbol für die Browser-Aktion.

Sie können ein einzelnes Symbol entweder als Pfad zu einer Bilddatei oder als browserAction.ImageDataType-Objekt angeben.

Sie können mehrere Symbole in verschiedenen Größen angeben, indem Sie ein Wörterbuch mit mehreren Pfaden oder ImageData-Objekten bereitstellen. Dadurch muss das Symbol nicht für ein Gerät mit unterschiedlicher Pixeldichte skaliert werden.

Tabs ohne ein spezifisches Symbol erben das globale Symbol, das standardmäßig auf das default_icon festgelegt ist, welches im Manifest angegeben wird.

Dies ist eine asynchrone Funktion, die ein Promise zurückgibt.

Syntax

js
let settingIcon = browser.browserAction.setIcon(
  details         // object
)

Parameter

details

object. Ein Objekt, das die Eigenschaft imageData oder path enthält und optional entweder oder beide der Eigenschaften tabId und windowId.

imageData Optional

browserAction.ImageDataType oder object. Dies ist entweder ein einzelnes ImageData-Objekt oder ein Wörterbuch-Objekt.

Verwenden Sie ein Wörterbuch-Objekt, um mehrere ImageData-Objekte in verschiedenen Größen anzugeben, damit das Symbol nicht für ein Gerät mit unterschiedlicher Pixeldichte skaliert werden muss. Wenn imageData ein Wörterbuch ist, ist der Wert jeder Eigenschaft ein ImageData-Objekt, und sein Name ist seine Größe, wie folgt:

js
let settingIcon = browser.browserAction.setIcon({
  imageData: {
    16: image16,
    32: image32,
  },
});

Der Browser wählt das zu verwendende Bild je nach Pixeldichte des Bildschirms aus. Weitere Informationen finden Sie unter Choosing icon sizes.

path Optional

string oder object. Dies ist entweder ein relativer Pfad zu einer Symboldatei oder ein Wörterbuch-Objekt.

Verwenden Sie ein Wörterbuch-Objekt, um mehrere Symboldateien in verschiedenen Größen anzugeben, damit das Symbol nicht für ein Gerät mit unterschiedlicher Pixeldichte skaliert werden muss. Wenn path ein Wörterbuch ist, ist der Wert jeder Eigenschaft ein relativer Pfad, und sein Name ist seine Größe, wie folgt:

js
let settingIcon = browser.browserAction.setIcon({
  path: {
    16: "path/to/image16.jpg",
    32: "path/to/image32.jpg",
  },
});

Der Browser wählt das zu verwendende Bild je nach Pixeldichte des Bildschirms aus. Weitere Informationen finden Sie unter Choosing icon sizes.

tabId Optional

integer. Setzt das Symbol nur für den angegebenen Tab. Das Symbol wird zurückgesetzt, wenn der Benutzer diesen Tab auf eine neue Seite navigiert.

windowId Optional

integer. Setzt das Symbol für das angegebene Fenster.

  • Wenn windowId und tabId beide angegeben werden, schlägt die Funktion fehl und das Symbol wird nicht gesetzt.
  • Wenn windowId und tabId beide weggelassen werden, wird das globale Symbol gesetzt.

Wenn imageData oder path jeweils undefined, null oder ein leeres Objekt ist:

  • Wenn tabId angegeben ist und der Tab ein tab-spezifisches Symbol hat, erbt der Tab das Symbol von dem Fenster, zu dem es gehört.
  • Wenn windowId angegeben ist und das Fenster ein fensterspezifisches Symbol hat, erbt das Fenster das globale Symbol.
  • Andernfalls wird das globale Symbol auf das Manifest-Symbol zurückgesetzt.

Rückgabewert

Ein Promise, das erfüllt wird, ohne Argumente, sobald das Symbol gesetzt wurde.

Browser-Kompatibilität

Beispiele

Der folgende Code verwendet eine Browser-Aktion, um einen Listener für webRequest.onHeadersReceived umzuschalten, und verwendet setIcon(), um anzuzeigen, ob das Lauschen ein- oder ausgeschaltet ist:

js
function logResponseHeaders(requestDetails) {
  console.log(requestDetails);
}

function startListening() {
  browser.webRequest.onHeadersReceived.addListener(
    logResponseHeaders,
    { urls: ["<all_urls>"] },
    ["responseHeaders"],
  );
  browser.browserAction.setIcon({ path: "icons/listening-on.svg" });
}

function stopListening() {
  browser.webRequest.onHeadersReceived.removeListener(logResponseHeaders);
  browser.browserAction.setIcon({ path: "icons/listening-off.svg" });
}

function toggleListener() {
  if (browser.webRequest.onHeadersReceived.hasListener(logResponseHeaders)) {
    stopListening();
  } else {
    startListening();
  }
}

browser.browserAction.onClicked.addListener(toggleListener);

Der folgende Code setzt das Symbol unter Verwendung eines ImageData-Objekts:

js
function getImageData() {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");

  ctx.fillStyle = "green";
  ctx.fillRect(10, 10, 100, 100);

  return ctx.getImageData(50, 50, 100, 100);
}

browser.browserAction.onClicked.addListener(() => {
  browser.browserAction.setIcon({ imageData: getImageData() });
});

Das folgende Snippet aktualisiert das Symbol, wenn der Benutzer darauf klickt, jedoch nur für den aktiven Tab:

js
browser.browserAction.onClicked.addListener((tab) => {
  browser.browserAction.setIcon({
    tabId: tab.id,
    path: "icons/updated-48.png",
  });
});

Beispielerweiterungen

Hinweis: Diese API basiert auf Chromiums chrome.browserAction API. Diese Dokumentation wird abgeleitet von browser_action.json im Chromium-Code.