browserAction.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

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

Verwenden Sie ein Wörterbuchobjekt, 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 sein Name ist seine Größe, wie folgt:

jsCopy to Clipboard

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

Der Browser wählt das zu verwendende Bild abhängig von der Pixeldichte des Bildschirms. Siehe Auswahl von Symbolgrößen für weitere Informationen dazu.

path Optional

string oder object. Dies ist entweder ein relativer Pfad zu einer Symbol-Datei oder ein Wörterbuchobjekt.

Verwenden Sie ein Wörterbuchobjekt, 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 sein Name ist seine Größe, wie folgt:

jsCopy to Clipboard

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

Der Browser wählt das zu verwendende Bild abhängig von der Pixeldichte des Bildschirms. Siehe Auswahl von Symbolgrößen für weitere Informationen dazu.

tabId Optional

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

windowId Optional

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

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

Wenn jede von imageData und path eines von undefined, null oder leeren Objekt ist:

• Wenn tabId angegeben ist und der Tab ein tab-spezifisches Symbol gesetzt hat, dann wird der Tab das Symbol des Fensters erben, zu dem es gehört.
• Wenn windowId angegeben ist und das Fenster ein fensterspezifisches Symbol gesetzt hat, dann wird das Fenster das globale Symbol erben.
• Andernfalls wird das globale Symbol auf das Manifest-Symbol 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 umzuschalten, und verwendet setIcon(), um anzuzeigen, ob das Abhören ein- oder ausgeschaltet ist:

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 mit einem ImageData-Objekt:

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, aber nur für den aktiven Tab:

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

• bookmark-it