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
let settingIcon = browser.browserAction.setIcon(
details // object
)
Parameter
details
-
object
. Ein Objekt, das die EigenschaftimageData
oderpath
enthält und optional entweder oder beide der EigenschaftentabId
undwindowId
.imageData
Optional-
browserAction.ImageDataType
oderobject
. Dies ist entweder ein einzelnesImageData
-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. WennimageData
ein Wörterbuch ist, ist der Wert jeder Eigenschaft einImageData
-Objekt, und sein Name ist seine Größe, wie folgt:jslet 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
oderobject
. 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:jslet 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
undtabId
beide angegeben werden, schlägt die Funktion fehl und das Symbol wird nicht gesetzt. - Wenn
windowId
undtabId
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:
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:
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:
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.