---
title: devtools.panels.ExtensionSidebarPane.onShown
slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onShown
tags:
  - API
  - Add-ons
  - Extensions
  - ExtesionsSidebarPane
  - Reference
  - WebExtensions
  - devtools.panels
  - onShown
translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onShown
---
<div>{{AddonSidebar()}}</div>

<p>Lancé lorsque le volet latéral devient visible suite à un changement d'utilisateur.</p>

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

<pre class="syntaxbox brush:js">browser.devtools.panels.onShown.addListener(listener)
browser.devtools.panels.onShown.removeListener(listener)
browser.devtools.panels.onShown.hasListener(listener)
</pre>

<p>Les événements ont trois fonctions :</p>

<dl>
 <dt><code>addListener(callback)</code></dt>
 <dd>Ajoute un écouteur à cet événement.</dd>
 <dt><code>removeListener(listener)</code></dt>
 <dd>Arrêtez d'écouter cet événement. L'argument de <code>listener</code> est l'écouteur à supprimer.</dd>
 <dt><code>hasListener(listener)</code></dt>
 <dd>Vérifiez si <code>listener</code> est enregistré pour cet événement. Renvoie <code>true</code> s'il écoute, sinon <code>false</code>.</dd>
</dl>

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

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

<dl>
 <dt><code>callback</code></dt>
 <dd>
 <p>Fonction qui sera appelée lorsque cet événement se produit. La fonction sera passée sans arguments.</p>
 </dd>
</dl>

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

<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

<p>{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.onShown", 10)}}</p>

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

<p>Créez un volet de barre latérale et journal afficher et masquer les événements.</p>

<pre class="brush: js">function onCreated(sidebarPane) {

  sidebarPane.onShown.addListener(() =&gt; {
    console.log("Shown");
  });

  sidebarPane.onHidden.addListener(() =&gt; {
    console.log("Hidden");
  });

}

browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
</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/devtools_panels"><code>chrome.devtools.panels</code></a>.</p>
</div>