browserAction.setIcon()

Syntax

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 unterschiedlichen Größen anzugeben, damit 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:

js

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

Der Browser wählt das Bild, das verwendet werden soll, abhängig von der Pixeldichte des Bildschirms. Siehe Auswahl von Symbolgrößen für weitere Informationen hierzu.

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 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:

js

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

Der Browser wählt das Bild, das verwendet werden soll, abhängig von der Pixeldichte des Bildschirms. Siehe Auswahl von Symbolgrößen für weitere Informationen hierzu.

tabId Optional

integer. Setzt das Symbol nur für die angegebene Registerkarte. Das Symbol wird zurückgesetzt, wenn der Benutzer diese Registerkarte 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 sowohl windowId als auch tabId weggelassen werden, wird das globale Symbol gesetzt.

Wenn jedes der imageData und path eines der folgenden ist: undefined, null oder leeres Objekt:

• Wenn tabId angegeben ist und die Registerkarte ein spezifisches Symbol hat, erbt die Registerkarte das Symbol von dem Fenster, zu dem sie 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.

Rückgabewert

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

Beispiele

Der folgende Code verwendet eine Browseraktion zum Umschalten eines Listeners für webRequest.onHeadersReceived 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 mithilfe 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.browserAction.onClicked.addListener(() => {
  browser.browserAction.setIcon({ imageData: getImageData() });
});

Der folgende Ausschnitt aktualisiert das Symbol, wenn der Benutzer darauf klickt, jedoch nur für die aktive Registerkarte:

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

Beispielerweiterungen

• bookmark-it

Browser-Kompatibilität