path: root/files/fr/mozilla/add-ons/webextensions/api/browseraction/seticon/index.html

---
title: browserAction.setIcon()
slug: Mozilla/Add-ons/WebExtensions/API/browserAction/setIcon
tags:
  - API
  - Add-ons
  - Extensions
  - Method
  - Non-standard
  - Reference
  - WebExtensions
  - browserAction
  - setIcon
translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction/setIcon
---
<div>{{AddonSidebar()}}</div>

<p>Définit l'icône pour l'action du navigateur.</p>

<p>Vous pouvez spécifier une seule icône comme chemin d'accès à un fichier ou un objet {{WebExtAPIRef('browserAction.ImageDataType')}} .</p>

<p>Vous pouvez spécifier plusieurs icônes dans différentes tailles en fournissant un dictionnaire contenant plusieurs chemins ou des objets  <code>ImageData</code>. 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.</p>

<p>Les onglets sans icône spécifique hériteront de l'icône globale, qui par défaut est  <a href="/fr/Add-ons/WebExtensions/manifest.json/browser_action"><code>default_icon</code></a> specifié dans le manifest.</p>

<p>Il s'agit d'une fonction asynchrone qui renvoie une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promise</a></code>.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox brush:js">var settingIcon = browser.browserAction.setIcon(
  details         // object
)
</pre>

<h3 id="Paramètres">Paramètres</h3>

<dl>
 <dt><code>details</code></dt>
 <dd><code>object</code>. Un objet contenant des propriétés <code>imageData</code> ou <code>path</code>, et éventuellement une propriété <code>tabId</code> .</dd>
 <dd>
 <dl class="reference-values">
  <dt><code>imageData</code>{{optional_inline}}</dt>
  <dd>
  <p><code>{{WebExtAPIRef('browserAction.ImageDataType')}}</code> ou <code><code>object</code></code>. Il s'agit soit d'un seul objet <code>ImageData</code> ou un dictionnaire d'objet.</p>

  <p>Utilisez un dictionnaire d'objet pour spécifier plusieurs objets <code>ImageData</code> 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 <code>imageData</code> est un dictionnaire, la valeur de chaque propriété  est un objet<code>ImageData</code>, et son nom est sa taille, comme ceci :</p>

  <pre class="brush: json line-numbers  language-json"><code class="language-json"><span class="punctuation token">{</span>
  <span class="key token">16:</span> <span class="string token">image16</span><span class="punctuation token">,</span>
  <span class="key token">32:</span> image32
<span class="punctuation token">}</span></code></pre>

  <p>Le navigateur choisira l'image à utiliser en fonction de la densité de pixels de l'écran. Voir <a href="/fr/Add-ons/WebExtensions/manifest.json/browser_action#Choosing_icon_sizes">Choix de la tailles d'icônes</a> pour plus d'informations à ce sujet.</p>
  </dd>
  <dt><code>path</code>{{optional_inline}}</dt>
  <dd>
  <p><code><code>string</code></code> or <code><code>object</code></code>. Il s'agit du chemin relatif d'un fichier d'icône ou d'un objet de dictionnaire. </p>

  <p>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 <code>path</code> est un dictionnaire, la valeur de chaque propriété est un chemin relatif , et son nom est sa taille, comme ceci :</p>

  <pre class="brush: json line-numbers  language-json"><code class="language-json"><span class="punctuation token">{</span>
  <span class="key token">16:</span> "path/to/image16.jpg<span class="punctuation token">",</span>
  <span class="key token">32:</span> "path/to/image32.jpg<span class="punctuation token">"</span>
<span class="punctuation token">}</span></code></pre>

  <p>Le navigateur choisira l'image à utiliser en fonction de la densité de pixels de l'écran. Voir <a href="/fr/Add-ons/WebExtensions/manifest.json/browser_action#Choosing_icon_sizes">Choix de la tailles d'icônes</a> pour plus d'informations à ce sujet.</p>
  </dd>
  <dt><code>tabId</code>{{optional_inline}}</dt>
  <dd><code>integer</code>. Définit l'icône uniquement pour l'onglet donné. L'icône est réinitialisée lorsque l'utilisateur navigue dans cet onglet vers une nouvelle page.</dd>
  <dt><code>windowId</code>{{optional_inline}}</dt>
  <dd><code>integer</code>. Définit l'icône de la fenêtre donnée.</dd>
 </dl>
 </dd>
</dl>

<ul>
 <li>si <code>windowId</code> et <code>tabId</code> sont tous deux fournis, la fonction échoue et l'icône n'est pas définie.</li>
 <li>si <code>windowId</code> et <code>tabId</code> sont tous les deux omis, l'icône globale est définie.</li>
</ul>

<p>Si chaque <code>imageData</code> et <code>path</code> est un objet <code>undefined</code>, <code>null</code> ou vide :</p>

<ul>
 <li>si <code>tabId</code> est spécifié, et que l'onglet a un jeu d'icônes spécifique à l'onglet, alors l'onglet héritera de l'icône de la fenêtre à laquelle il appartient.</li>
 <li>si <code>windowId</code> est spécifié et que la fenêtre a un jeu d'icônes spécifiques à la fenêtre, alors la fenêtre héritera de l'icône globale.</li>
 <li>Sinon, l'icône globale sera réinitialisée à l'icône du manifest.</li>
</ul>

<h3 id="Valeur_retournée">Valeur retournée</h3>

<p>Une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promise</a></code> qui sera remplie sans arguments une fois que l'icône a été définie.</p>

<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>

<p>{{Compat("webextensions.api.browserAction.setIcon",2)}}</p>

<h2 id="Exemples">Exemples</h2>

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

<pre class="brush: js">function logResponseHeaders(requestDetails) {
  console.log(requestDetails);
}

function startListening() {
  browser.webRequest.onHeadersReceived.addListener(
    logResponseHeaders,
    {urls: ["&lt;all_urls&gt;"]},
    ["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);</pre>

<p>Le code ci-dessous définit l'icône à l'aide d'un objet<code><a href="/fr/docs/Web/API/ImageData">ImageData</a></code> :</p>

<pre class="brush: js">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(() =&gt; {
  browser.browserAction.setIcon({imageData: getImageData()});
});
</pre>

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

<pre class="brush: js">browser.browserAction.onClicked.addListener((tab) =&gt; {
  browser.browserAction.setIcon({
    tabId: tab.id, path: "icons/updated-48.png"
  });
});</pre>

<p>{{WebExtExamples}}</p>

<div class="note"><strong>Remerciements :</strong>

<p>Cette API est basée sur l'API Chromium <a href="https://developer.chrome.com/extensions/browserAction"><code>chrome.browserAction</code></a>. Cette documentation est dérivée de <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json"><code>browser_action.json</code></a> dans le code de Chromium code.</p>

<p>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.</p>
</div>

<div class="hidden">
<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
//    * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
//    * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
//    * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</pre>
</div>