1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: sidebarAction.setIcon()
slug: Mozilla/Add-ons/WebExtensions/API/sidebarAction/setIcon
tags:
- API
- Add-ons
- Extensions
- Method
- Reference
- WebExtensions
- setIcon
- sidebarAction
translation_of: Mozilla/Add-ons/WebExtensions/API/sidebarAction/setIcon
---
<div>{{AddonSidebar()}}</div>
<p>Définit l'icône de la barre latérale.</p>
<p>Vous pouvez spécifier une icône unique comme chemin d'accès à un fichier image ou un objet {{WebExtAPIRef('sidebarAction.ImageDataType')}}.</p>
<p>Vous pouvez spécifier plusieurs icônes de différentes tailles en fournissant un dictionnaire contenant plusieurs chemins ou 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>C'est une fonction asynchrone qui renvoie une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promise</a></code>.</p>
<h2 id="Types_d'icônes">Types d'icônes</h2>
<p>Votre extension doit spécifier une icône pour la barre latérale dans la clé de manifest <a href="/fr/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a>. C'est ce qu'on appelle <em>"manifest icon"</em>.</p>
<p>Si vous ne spécifiez pas d'icône dans la clé sidebar_action, vous obtenez l'icône par défaut du navigateur. C'est ce qu'on appelle <em>"default icon"</em>.</p>
<p>Si vous définissez une nouvelle icône en utilisant <code>setIcon()</code>, et incluez l'option <code>tabId</code> , l'icône est définie uniquement pour l'onglet donné. C'est ce qu'on appelle <em>"tab-specific icon"</em>.</p>
<p>Si vous définissez une nouvelle icône en utilisant <code>setIcon()</code>, et incluez l'option <code>windowId</code>, alors l'icône n'est définie que pour la fenêtre donnée. Cette icône est appelée <em>"icône spécifique à la fenêtre"</em>, et apparaîtra dans tous les onglets de cette fenêtre qui n'ont pas de jeu d'icônes spécifiques aux onglets.</p>
<p>Si vous définissez une nouvelle icône en utilisant <code>setIcon()</code>, et omettez l'option <code>tabId</code> and <code>windowId</code>, cela définit <em>"icône globale"</em>. L'icône globale apparaîtra alors dans tous les onglets qui n'ont pas de jeu d'icônes spécifiques aux onglets et dont la fenêtre n'a pas d'icône spécifique à la fenêtre.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox brush:js">var settingIcon = browser.sidebarAction.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('sidebarAction.ImageDataType')}}</code> ou <code><code>object</code></code>. C'est un objet <code>ImageData</code> unique ou un objet dictionnaire.</p>
<p>Utilisez un objet dictionnaire 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 pixels différente. 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">Choisir les 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> ou <code><code>object</code></code>. C'est soit un chemin relatif vers un fichier d'icône, soit un objet dictionnaire. </p>
<p>Utilisez un objet de dictionnaire pour spécifier plusieurs fichiers d'icônes de 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érente. 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">Choosir les tailles d'icônes</a> pour plus d'informations à ce sujet.</p>
<p>si <code>path</code> est une chaîne vide, le navigateur utilisera l'icône par défaut.</p>
<p>si <code>path</code> n'est pas vide mais ne pointe pas vers un fichier d'icône, l'icône est masquée.</p>
<p>si <code>path</code> est <code>null</code>, et <code>tabId</code>a été spécifié, et que l'onglet spécifié possède un jeu d'icônes spécifique à l'onglet: l'icône spécifique à l'onglet est réinitialisée à l'icône globale (si une icône globale est définie) ou à l'icône manifeste.</p>
<p>si <code>path</code> est <code>null</code>, et <code>tabId</code> a été omis, et qu'il y avait un jeu d'icônes global, il sera réinitialisé à l'icône de manifest.</p>
</dd>
<dt><code>tabId</code>{{optional_inline}}</dt>
<dd><code>integer</code>. Définit l'icône uniquement pour l'onglet donné.</dd>
<dt><code>windowId</code> {{optional_inline}}</dt>
<dd><code>integer</code>. Définit l'icône uniquement pour la fenêtre donnée.</dd>
</dl>
</dd>
</dl>
<ul>
<li>Si <code>windowId</code>et <code>tabId</code> sont tous deux spécifiés, la fonction échoue et l'icône n'est pas définie.</li>
<li>SI <code>windowId</code> et <code>tabId</code> sont tous deux omis, l'icône est définie globalement.</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 argument une fois l'icône définie.</p>
<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
<p>{{Compat("webextensions.api.sidebarAction.setIcon",2)}}</p>
<h2 id="Exemples">Exemples</h2>
<p>Le code ci-dessous bascule l'icône de la barre latérale de l'onglet actif lorsque l'utilisateur clique sur une action du navigateur :</p>
<pre class="brush: js">var on = false;
function toggle(tab) {
if (on) {
browser.sidebarAction.setIcon({
path: "off.svg",
tabId: tab.id
});
on = false;
} else {
browser.sidebarAction.setIcon({
path: "on.svg",
tabId: tab.id
});
on = true;
}
}
browser.browserAction.onClicked.addListener(toggle);</pre>
<p>{{WebExtExamples}}</p>
<div class="note"><strong>Remerciements :</strong>
<p>Cette API est basée sur l'API Opera <a href="https://dev.opera.com/extensions/sidebar-action-api/"><code>chrome.sidebarAction</code></a>.</p>
</div>
|
