action.setIcon()

details

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

imageData Optional

action.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, sodass das Symbol nicht für ein Gerät mit einer anderen Pixeldichte skaliert werden muss. Wenn imageData ein Wörterbuch ist, ist der Wert jeder Eigenschaft ein ImageData-Objekt und der Name ist seine Größe, wie folgt:

jsCopy to Clipboard

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

Der Browser wählt das Bild aus, das je nach Pixeldichte des Bildschirms verwendet werden soll. 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, sodass das Symbol nicht für ein Gerät mit einer anderen Pixeldichte skaliert werden muss. Wenn path ein Wörterbuch ist, ist der Wert jeder Eigenschaft ein relativer Pfad und der Name ist seine Größe, wie folgt:

jsCopy to Clipboard

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

Der Browser wählt das Bild aus, das je nach Pixeldichte des Bildschirms verwendet werden soll. Weitere Informationen finden Sie unter Choosing icon sizes.

tabId Optional

integer. Legt das Symbol nur für den angegebenen Tab fest. Das Symbol wird zurückgesetzt, wenn der Benutzer diesen Tab zu einer neuen Seite navigiert.

windowId Optional

integer. Legt das Symbol für das angegebene Fenster fest.

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

Wenn jeder von imageData und path einer von 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 er 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 Manifestsymbol zurückgesetzt.

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

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

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

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

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

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

browser.action.onClicked.addListener(toggleListener);

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

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.action.onClicked.addListener(() => {
  browser.action.setIcon({ imageData: getImageData() });
});

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

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