Définit l'icône pour l'action du navigateur.

Vous pouvez spécifier une seule icône comme chemin d'accès à un fichier ou un objet browserAction.ImageDataType .

Vous pouvez spécifier plusieurs icônes dans différentes tailles en fournissant un dictionnaire contenant plusieurs chemins ou des objets  ImageData. Cela signifie que l'icône ne doit pas être mise à l'échelle pour un périphérique avec une densité de pixels différente.

Il s'agit d'une fonction asynchrone qui renvoie une Promesse.

Syntaxe

var settingIcon = browser.browserAction.setIcon(
  details         // object
)

Paramètres

details
object. Un objet contenant des propriétés imageData ou path, et éventuellement une propriété tabId .
imageDataFacultatif

browserAction.ImageDataType ou object. Il s'agit soit d'un seul objet ImageData ou un dictionnaire d'objet.

Utilisez un dictionnaire d'objet pour spécifier plusieurs objets ImageData dans différentes tailles, de sorte que l'icône ne doit pas  être mise à l'échelle pour un périphérique avec une densité de pixel différentes. Si imageData est un dictionnaire, la valeur de chaque propriété  est un objetImageData, et son nom est sa taille, comme ceci :

{
  16: image16,
  32: image32
}

Le navigateur choisira l'image à utiliser en fonction de la densité de pixels de l'écran. Voir Choix de la tailles d'icônes pour plus d'informations à ce sujet.

pathFacultatif

string or object. Il s'agit du chemin relatif d'un fichier d'icône ou d'un objet de dictionnaire. 

Utilisez un dictionnaire d'objet pour spécifier plusieurs fichiers d'icônes dans différentes tailles, de sorte que l'icône ne doit pas être mise à l'échelle pour un périphérique avec une densité de pixels différentes. Si path est un dictionnaire, la valeur de chaque propriété est un chemin relatif , et son nom est sa taille, comme ceci :

{
  16: "path/to/image16.jpg",
  32: "path/to/image32.jpg"
}

Le navigateur choisira l'image à utiliser en fonction de la densité de pixels de l'écran. Voir Choix de la tailles d'icônes pour plus d'informations à ce sujet.

tabIdFacultatif
integer. Permet de limiter la modification lorsqu'un onglet particulier est sélectionné. Réinitialise automatiquement lorsque l'onglet est fermé.

Valeur retournée

Une Promesse qui sera remplie sans arguments une fois que l'icône a été définie.

Compatibilité du navigateur

ChromeEdgeFirefoxFirefox for AndroidOpera
Support simple (Oui)1 (Oui)45 Non15
imageData23 Non45 Non15

1. Before Chrome 23, `path` couldn't specify multiple icon files, but had to be a string specifying a single icon path.

Exemples

Le code ci-dessous utilise une action du navigateur pour basculer un auditeur pour webRequest.onHeadersReceived, et utilise setIcon() pour indiquer si l'écoute est activée ou désactivée :

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);

Le code ci-dessous définit l'icône à l'aide d'un objetImageData :

function getImageData() {
  var canvas = document.createElement("canvas");
  var 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()});
});

L'extrait suivant met à jour l'icône lorsque l'utilisateur clique, mais uniquement pour l'onglet actif :

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

Example extensions

Remerciements :

Cette API est basée sur l'API Chromium chrome.browserAction. Cette documentation est dérivée de browser_action.json dans le code de Chromium code.

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : hellosct1
 Dernière mise à jour par : hellosct1,