diff options
Diffstat (limited to 'files/fr/mozilla/add-ons/webextensions/api/devtools.panels')
15 files changed, 1246 insertions, 0 deletions
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/create/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/create/index.html new file mode 100644 index 0000000000..60de8f3871 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/create/index.html @@ -0,0 +1,110 @@ +--- +title: devtools.panels.create() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/create +tags: + - API + - Add-ons + - Create + - Extensions + - Reference + - WebExtensions + - devtools.panels +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/create +--- +<div>{{AddonSidebar()}}</div> + +<p>Ajoute un nouveau panneau aux devtools.</p> + +<p><span id="result_box" lang="fr"><span>Cette fonction prend </span></span>: un titre, une URL vers un fichier d'icône et une URL vers un fichier HTML. <span id="result_box" lang="fr"><span>Il crée un nouveau panneau dans les </span></span>devtools, dont le contenu est spécifié par le fichier HTML. Il renvoie une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promise</a></code> qui résout un objet <code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ExtensionPanel">ExtensionPanel</a></code> représentant le nouveau panneau.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox brush:js">var creating = browser.devtools.panels.create( + title, // string + iconPath, // string + pagePath // string +) +</pre> + +<h3 id="Parametères">Parametères</h3> + +<dl> + <dt><code>title</code></dt> + <dd><code>string</code>. Le titre du panneau. Cela apparaitra dans la rangée des onglets le long du haut de la fenêtre des devtools, et c'est la principale façon dont l'utilisateur pourra identifier votre panneau.</dd> + <dt><code>iconPath</code></dt> + <dd><code>string</code>. Spécifie une icône qui sera affichée à côté du titre. Il est fourni sous forme d'URL vers un fichier image qui a été fourni avec votre extension. L'URL est résolue par rapport à la page d'extension courante (sauf si elle est exprimée en url absolue, par exemple "/icons/panel.png").</dd> + <dt><code>pagePath</code></dt> + <dd>string. Spécifie un fichier HTML qui définit le contenu réel du panneau. Il est fourni sous la forme d'une URL d'un fichier HTML qui a été regroupé avec votre extension. L'URL est résolue par rapport à la page d'extension courante (sauf si elle est exprimée en url absolue, par exemple "/devtools/panel.html"). Le fichier HTML peut include des fichiers CSS et JavaScript, juste comme une page web normale. Le JavaScript en cours d'éxécution dans le panneau pourra utiliser les API devtools. Voir <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extention des outils de développement</a>.</dd> +</dl> + +<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 avec un objet <code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ExtensionPanel">ExtensionPanel</a></code> représentant le nouveau panneau.</p> + +<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> + +<p>{{Compat("webextensions.api.devtools.panels.create")}}</p> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<p>Créer un nouveau panneau, et ajoute des auditeurs à ces événements onShown et onHidden :</p> + +<pre class="brush: js">function handleShown() { + console.log("panel is being shown"); +} + +function handleHidden() { + console.log("panel is being hidden"); +} + +browser.devtools.panels.create( + "My Panel", // title + "/icons/star.png", // icon + "/devtools/panel/panel.html" // content +).then((newPanel) => { + newPanel.onShown.addListener(handleShown); + newPanel.onHidden.addListener(handleHidden); +}); +</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> + +<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> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elements/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elements/index.html new file mode 100644 index 0000000000..18223b2718 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elements/index.html @@ -0,0 +1,29 @@ +--- +title: devtools.panels.elements +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/elements +tags: + - API + - Add-ons + - Elements + - Extensions + - Reference + - WebExtensions + - devtools.panels +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/elements +--- +<div>{{AddonSidebar()}}</div> + +<p>Un objet <code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel">ElementsPanel</a></code> qui représente l'inspecteur HTML/CSS du navigateur</p> + +<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.elements", 10)}}</p> + +<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> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/createsidebarpane/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/createsidebarpane/index.html new file mode 100644 index 0000000000..7eee52fff5 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/createsidebarpane/index.html @@ -0,0 +1,107 @@ +--- +title: devtools.panels.ElementsPanel.createSidebarPane() +slug: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/createSidebarPane +tags: + - API + - Add-ons + - DevTools + - Extensions + - Reference + - WebExtensions + - createSidebarPane + - devtools.panels +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/createSidebarPane +--- +<div>{{AddonSidebar()}}</div> + +<p>Ajoute un nouveau volet à la barre latérale dans l'inspecteur HTML / CSS.</p> + +<p>L'inspecteur HTML / CSS, appelé l'<a href="/fr/docs/Outils/Inspecteur">inspecteur de page</a> dans Firefox et le <a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles/">panneau éléments</a> dans Chrome, affiche la page DOM dans la partie principale de sa fenêtre et possède une barre latérale qui affiche divers autres aspects de la page HTML / CSS dans une interface à onglets. Par exemple, dans Firefox, la barre latérale peut afficher les règles CSS pour l'élément sélectionné, ou ses polices, ou son modèle de boîte.</p> + +<p>La fonction <code>createSidebarPane()</code> ajoute un nouveau volet à la barre latérale. ar exemple, la capture d'écran ci-dessous montre un nouveau volet intitulé "My pane", qui affiche un objet JSON :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15607/inspector-sidebar.png" style="display: block; height: 276px; margin-left: auto; margin-right: auto; width: 836px;"></p> + +<p>Cette fonction prend un argument, qui est une chaîne représentant le titre du volet. Il renvoie une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promise</a></code> qui se résout en un objet <code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane">ExtensionSidebarPane</a></code> représentant le nouveau volet. Vous pouvez utiliser cet objet pour définir le contenu et le comportement du volet.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox brush:js">var creating = browser.devtools.panels.elements.createSidebarPane( + title // string +) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>title</code></dt> + <dd><code>string</code>. Cela apparaîtra dans la rangée d'onglets en haut de la barre latérale, et c'est la principale façon pour l'utilisateur d'identifier votre panneau.</dd> +</dl> + +<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 avec un objet <code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane">ExtensionSidebarPane</a></code> représentant le nouveau volet.</p> + +<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> + +<p>{{Compat("webextensions.api.devtools.panels.ElementsPanel.createSidebarPane", 10)}}</p> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<p>Créez un nouveau volet et remplissez-le avec un objet JSON. Vous pouvez exécuter ce code dans un script chargé par la <a href="/fr/Add-ons/WebExtensions/manifest.json/devtools_page">page devtools</a>.</p> + +<pre class="brush: js">function onCreated(sidebarPane) { + sidebarPane.setObject({ + someBool: true, + someString: "hello there", + someObject: { + someNumber: 42, + someOtherString: "this is my pane's content" + } + }); +} + +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> + +<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> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/index.html new file mode 100644 index 0000000000..5c2a0413c7 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/index.html @@ -0,0 +1,73 @@ +--- +title: devtools.panels.ElementsPanel +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel +tags: + - API + - Add-ons + - DevTools + - Extensions + - Reference + - WebExtensions + - devtools.panels + - devtools.panelsElementsPanel +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel +--- +<div>{{AddonSidebar()}}</div> + +<p>Un <code>ElementsPanel</code> représente l'inspecteur HTML/CSS dans la devtools du navigateur. C'est ce qu'on appelle l'inspecteur de page dans Firefox et le panneau Éléments de Chrome.</p> + +<h2 id="Fonctions">Fonctions</h2> + +<dl> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/createSidebarPane">devtools.panels.ElementsPanel.createSidebarPane()</a></code></dt> + <dd>Crée un volet dans la barre latérale de l'inspecteur.</dd> + <dt> + <h2 id="Evénements">Evénements</h2> + </dt> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/onSelectionChanged">devtools.panels.ElementsPanel.onSelectionChanged</a></code></dt> + <dd>Appèle lorsque l'utilisateur sélectionne un élément différent dans la page, par exemple en utilisant l'élément de menu contextuel "inspect élément".</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.ElementsPanel", 10)}}</p> + +<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> + +<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> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/onselectionchanged/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/onselectionchanged/index.html new file mode 100644 index 0000000000..e753d5aba1 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/onselectionchanged/index.html @@ -0,0 +1,74 @@ +--- +title: onSelectionChanged +slug: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/onSelectionChanged +tags: + - API + - Add-ons + - DevTools + - Extensions + - Reference + - WebExtensions + - devtools.panels + - devtools.panelsElementsPanel +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/onSelectionChanged +--- +<div>{{AddonSidebar()}}</div> + +<p>Appelles lorsque l'utilisateur sélectionne un élément de page différent pour l'inspection avec les outils de développement du navigateur, par exemple en sélectionnant l'élément de menu contextuel "Inspect Element" dans Firefox.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox brush:js">browser.devtools.panels.elements.onSelectionChanged.addListener(listener) +browser.devtools.panels.elements.onSelectionChanged.removeListener(listener) +browser.devtools.panels.elements.onSelectionChanged.hasListener(listener) +</pre> + +<p>L'événement a trois fonctions :</p> + +<dl> + <dt><code>addListener(listener)</code></dt> + <dd>Ajoute une écoute à cet événement.</dd> + <dt><code>removeListener(listener)</code></dt> + <dd>Arrête une écoute à l'événement. L'argument de l'auditeur est un auditeur supprimer.</dd> + <dt><code>hasListener(listener)</code></dt> + <dd>Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie la valeur Vrai si elle l'écoute, sinon Faux.</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 lors de l'événement. La fonction ne passera pas d'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.ElementsPanel.onSelectionChanged", 10)}}</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Ecoutez la sélection des événements modifiés, et enregistrez le contenu du texte de l'élément nouvellement sélectionné :</p> + +<pre class="brush: js">function handleSelectedElement() { + browser.devtools.inspectedWindow.eval("$0.textContent") + .then((result) => { + console.log(result[0]); + }); +} + +browser.devtools.panels.elements.onSelectionChanged.addListener(handleSelectedElement);</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"><code>chrome.devtools</code></a>.</p> +</div> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionpanel/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionpanel/index.html new file mode 100644 index 0000000000..e083ff02b3 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionpanel/index.html @@ -0,0 +1,93 @@ +--- +title: devtools.panels.ExtensionPanel +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionPanel +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.panels +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionPanel +--- +<div>{{AddonSidebar()}}</div> + +<p>Une <code>ExtensionPanel</code> représente un panneau ajouté aux devtools. C'est la résolution de la <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promise</a></code> renvoyé par <code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/create">browser.devtools.panels.create()</a></code>.</p> + +<h2 id="Type">Type</h2> + +<p>Les valeurs de ce type sont des objets. Définissez deux événements, <code>onShown</code> et <code>onHidden</code>.</p> + +<ul> + <li><code>onShown</code> est émis lorsque le panneau est affiché dans les devtools (par exemple, quand l'utilisateur a cliqué sur le panneau dans la fenêtre des devtools).</li> + <li><code>onHidden</code> est émis lorsque le panneau est caché (par exemple, quand l'utilisateur a basculé sur un onglet différent dans la fenêtre devtools).</li> +</ul> + +<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> + +<p>{{Compat("webextensions.api.devtools.panels.ExtensionPanel")}}</p> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<p>Ce code crée un nouveau panneau, puis ajoute des gestionnaires pour ces événements <code>onShown</code> et <code>onHidden</code>.</p> + +<pre class="brush: js">function handleShown(e) { + console.log(e); + console.log("panel is being shown"); +} + +function handleHidden(e) { + console.log(e); + console.log("panel is being hidden"); +} + +browser.devtools.panels.create( + "My Panel", // title + "icons/star.png", // icon + "devtools/panel/panel.html" // content +).then((newPanel) => { + newPanel.onShown.addListener(handleShown); + newPanel.onHidden.addListener(handleHidden); +});</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> + +<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> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/index.html new file mode 100644 index 0000000000..02ee0a2073 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/index.html @@ -0,0 +1,89 @@ +--- +title: devtools.panels.ExtensionSidebarPane +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane +tags: + - API + - Add-ons + - DevTools + - Extensions + - Reference + - WebExtensions + - devtools.panels + - devtools.panels.ExtensionSidebarPane +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane +--- +<div>{{AddonSidebar}}</div> + +<p>L'objet <code>ExtensionSidebarPane</code> représente un volet qu'une extension a ajouté à la barre latérale dans l'inspecteur HTML/CSS du navigateur.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15607/inspector-sidebar.png" style="display: block; height: 276px; margin-left: auto; margin-right: auto; width: 836px;"></p> + +<p>Pour créer un <code>ExtensionSidebarPane</code>, appelez la fonction <code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/createSidebarPane">browser.devtools.panels.elements.createSidebarane()</a></code>.</p> + +<h2 id="Fonctions">Fonctions</h2> + +<dl> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setExpression">devtools.panels.ExtensionSidebarPane.setExpression()</a></code></dt> + <dd> + <p>Évaluer une expression JavaScript dans la page Web inspectée par l'inspecteur. Le résultat est affiché dans le volet de la barre latérale.</p> + </dd> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setObject">devtools.panels.ExtensionSidebarPane.setObject()</a></code></dt> + <dd> + <p>Définit un objet JSON qui sera affiché dans le volet de la barre latérale.</p> + </dd> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setPage">devtools.panels.ExtensionSidebarPane.setPage()</a></code></dt> + <dd> + <p>Charge la page pointée par l'URL fournie.</p> + </dd> +</dl> + +<h2 id="Evénements">Evénements</h2> + +<dl> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onShown">devtools.panels.ExtensionSidebarPane.onShown</a></code></dt> + <dd>Lancé lorsque le volet latéral est affiché.</dd> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onHidden">devtools.panels.ExtensionSidebarPane.onHidden</a></code></dt> + <dd>Lancé lorsque le volet de la barre latérale est masqué.</dd> +</dl> + +<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> + +<p>{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane", 10)}}</p> + +<p>{{WebExtExamples("h2")}}</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> + +<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> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onhidden/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onhidden/index.html new file mode 100644 index 0000000000..a1a18463e5 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onhidden/index.html @@ -0,0 +1,80 @@ +--- +title: devtools.panels.ExtensionSidebarPane.onHidden +slug: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onHidden +tags: + - API + - Add-ons + - ExtensionSidebarPane + - Extensions + - Reference + - WebExtensions + - devtools.panels + - onHidden +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onHidden +--- +<div>{{AddonSidebar()}}</div> + +<p>Appelé lorsque le volet de la barre latérale est masqué, suite à l'abandon de l'utilisateur.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox brush:js">browser.devtools.panels.onHidden.addListener(listener) +browser.devtools.panels.onHidden.removeListener(listener) +browser.devtools.panels.onHidden.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ête d'écouter cet événement. L'argument <code>listener</code> est l'écouteur à supprimer.</dd> + <dt><code>hasListener(listener)</code></dt> + <dd>Vérifie 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 appelée lorsque cet événement se produit. Cette 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.onHidden", 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(() => { + console.log("Shown"); + }); + + sidebarPane.onHidden.addListener(() => { + 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> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onshown/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onshown/index.html new file mode 100644 index 0000000000..3ca3412af2 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onshown/index.html @@ -0,0 +1,78 @@ +--- +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(() => { + console.log("Shown"); + }); + + sidebarPane.onHidden.addListener(() => { + 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> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setexpression/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setexpression/index.html new file mode 100644 index 0000000000..d2c97c5f82 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setexpression/index.html @@ -0,0 +1,106 @@ +--- +title: devtools.panels.ElementsPanel.setExpression() +slug: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setExpression +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.panels + - setExpression +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setExpression +--- +<div>{{AddonSidebar()}}</div> + +<p>Evalue une expression dans le contexte de la page inspectée et affiche le résultat dans le volet de la barre latérale d'extension.</p> + +<p>Le contexte d'exécution de l'expression est le même que celui de <code><a href="/fr/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval">inspectedWindow.eval()</a></code>.</p> + +<p> Les objets JSON et les noeuds DOM sont affichés en tant qu'arborescence extensible, comme dans la <a href="/fr/docs/Outils/JSON_viewer">visionneuse jSON</a> dans Firefox. Vous pouvez éventuellement spécifier une chaîne <code>rootTitle</code> : elle sera affichée comme le titre de la racine de l'arbre.</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="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox brush:js">var evaluating = browser.devtools.panels.setExpression( + expression, // string + rootTitle // string +) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>expression</code></dt> + <dd><code>string</code>. L'expression à évaluer.</dd> + <dt><code>rootTitle</code> {{optional_inline}}</dt> + <dd>string. Le titre de la racine de l'arbre dans lequel les résultats sont affichés.</dd> +</dl> + +<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> sera remplie sans arguments, une fois l'expression évaluée.</p> + +<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> + +<p>{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setExpression", 10)}}</p> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<p>Ce code crée un volet de barre latérale qui affiche le <code><a href="/fr/docs/Web/API/Element/tagName">tagName</a></code> de l'élément actuellement sélectionné :</p> + +<pre class="brush: js">function onCreated(sidebarPane) { + + browser.devtools.panels.elements.onSelectionChanged.addListener(() => { + const exp = "$0 && $0.tagName"; + const title = "Selected Element tagName"; + sidebarPane.setExpression(exp, title); + }); + +} + +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> + +<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> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setobject/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setobject/index.html new file mode 100644 index 0000000000..90252a0c2f --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setobject/index.html @@ -0,0 +1,104 @@ +--- +title: devtools.panels.ExtensionSidebarPane.setObject() +slug: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setObject +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.panels + - setObject +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setObject +--- +<div>{{AddonSidebar()}}</div> + +<p>Affiche un objet JSON dans le volet de la barre latérale de l'extension.</p> + +<p>L'objet est affiché en tant qu'arborescence extensible, comme dans le <a href="/fr/docs/Outils/JSON_viewer">JSON viewer</a> dans Firefox. Vous pouvez éventuellement spécifier une chaîne <code>rootTitle</code> : elle sera affichée comme le titre de la racine de l'arbre.</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="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox brush:js">var setting = browser.devtools.panels.setObject( + jsonObject, // string, array, or JSON object + rootTitle // string +) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>jsonObject</code></dt> + <dd><code>String</code> ou <code>Array</code> ou <code>Object</code>. L'objet à afficher. S'il s'agit d'un objet JSON-serialized, donc les propriétés comme les fonctions seront omises.</dd> + <dt><code>rootTitle</code> {{optional_inline}}</dt> + <dd><code>String</code>. Le titre de la racine de l'arbre dans lequel l'objet est affiché.</dd> +</dl> + +<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 accomplie sans arguments, une fois l'objet défini.</p> + +<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> + +<p>{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setObject", 10)}}</p> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<p>Créez un nouveau volet et remplissez-le avec un objet JSON. Vous pouvez exécuter ce code dans un script chargé par la <a href="/fr/Add-ons/WebExtensions/manifest.json/devtools_page">page devtools</a>. de votre extension</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">onCreated</span><span class="punctuation token">(</span>sidebarPane<span class="punctuation token">)</span> <span class="punctuation token">{</span> + sidebarPane<span class="punctuation token">.</span><span class="function token">setObject</span><span class="punctuation token">(</span><span class="punctuation token">{</span> + someBool<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span> + someString<span class="punctuation token">:</span> <span class="string token">"hello there"</span><span class="punctuation token">,</span> + someObject<span class="punctuation token">:</span> <span class="punctuation token">{</span> + someNumber<span class="punctuation token">:</span> <span class="number token">42</span><span class="punctuation token">,</span> + someOtherString<span class="punctuation token">:</span> <span class="string token">"this is my pane's content"</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +browser<span class="punctuation token">.</span>devtools<span class="punctuation token">.</span>panels<span class="punctuation token">.</span>elements<span class="punctuation token">.</span><span class="function token">createSidebarPane</span><span class="punctuation token">(</span><span class="string token">"My pane"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>onCreated<span class="punctuation token">)</span><span class="punctuation token">;</span></code></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> + +<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> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setpage/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setpage/index.html new file mode 100644 index 0000000000..e4f98e3ff3 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setpage/index.html @@ -0,0 +1,89 @@ +--- +title: devtools.panels.ExtensionSidebarPane.setPage() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setPage +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - setPage +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setPage +--- +<p>Définit une page HTML à afficher dans le volet latéral.</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="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox brush:js">browser.devtools.panels.setPage( + path // string containing relative path to page +) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>extensionPageURL</dt> + <dd><code>string</code>. Le chemin relatif d'une page HTML à afficher dans la barre latérale.</dd> +</dl> + +<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 tenue sans arguments, une fois l'URL définie.</p> + +<p>La page sélectionnée ne sera pas chargée tant que l'utilisateur n'aura pas sélectionné la barre latérale devtools.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Créez un nouveau volet et remplissez-le d'une page HTML. Vous pouvez exécuter ce code dans un script chargé par la <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/devtools_page">page devtools</a> de votre extension.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">onCreated</span><span class="punctuation token">(</span>sidebarPane<span class="punctuation token">)</span> <span class="punctuation token">{</span> + sidebarPane<span class="punctuation token">.</span><span class="function token">setPage</span><span class="punctuation token">('sidebar/sidebar.html'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> +</code></pre> + +<p>{{WebExtExamples}}</p> + +<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> + +<p>{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setPage", 10)}}</p> + +<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> + + + +<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> + +<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> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/index.html new file mode 100644 index 0000000000..9f2c06e2a0 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/index.html @@ -0,0 +1,103 @@ +--- +title: devtools.panels +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.panels +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels +--- +<div>{{AddonSidebar}}</div> + +<div class="note"> +<p>Bien que les API soient basées sur les <a href="https://developer.chrome.com/extensions/devtools">APIs de devtools de Chrome</a>, il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir les fonctionnalités actuellement manquantes, regarder <a href="/fr/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs">Limitations des APIs devtools</a>.</p> +</div> + +<p>L'API devtools.panels permet à une extension devtools de définir son interface utilisateur à l'intérieur de la fenêtre devtools.</p> + +<p>La fenêtre devtools héberge un certain nombre d'outils distincts - le débogueur JavaScript, le moniteur réseau, etc. Une rangée d'onglets sur le haut permet à l'utilisateur de basculer entre les différents outils. La fenêtre hébergeant l'interface utilisateur de chaque outil s'appelle un "panneau".</p> + +<p>Avec l'API devtools.panels, vous pouvez créer de nouveaux panneaux dans la fenêtre des devtools.</p> + +<p>Comme toutes les API de devtools, cette API est uniquement disponible pour le code exécuté dans le document défini dans la clé <a href="/fr/Add-ons/WebExtensions/manifest.json/devtools_page">devtools_page</a> du manifest.json, ou dans d'autres documents de déploiement créés par une extension (tel que le document du panneau). Voir <a href="/fr/Add-ons/WebExtensions/Extending_the_developer_tools">Extension des outils de développement</a> pour plus for d'informations.</p> + +<h2 id="Types">Types</h2> + +<dl> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel">devtools.panels.ElementsPanel</a></code></dt> + <dd>Représente l'inspecteur HTML/CSS dans le devtools du navigateur</dd> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ExtensionPanel">devtools.panels.ExtensionPanel</a></code></dt> + <dd>Représente un panneau de déploiement créé par l'extension.</dd> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane">devtools.panels.ExtensionSidebarPane</a></code></dt> + <dd>Représente un volet ajouté par une extension à l'inspecteur HTML/CC dans les devtools du navigateur.</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/elements">devtools.panels.elements</a></code></dt> + <dd>Une référence à un objet <code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel">ElementsPanel</a></code>.</dd> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/themeName">devtools.panels.themeName</a></code></dt> + <dd>Le nom du thème actuel des devtools.</dd> +</dl> + +<h2 id="Fonctions">Fonctions</h2> + +<dl> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/create">devtools.panels.create()</a></code></dt> + <dd>Créé un nouveau panneau de développement</dd> +</dl> + +<h2 id="Evénements">Evénements</h2> + +<dl> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.panels/onThemeChanged">devtools.panels.onThemeChanged</a></code></dt> + <dd>Mise en place lorsque le thème Devtools change.</dd> +</dl> + +<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> + +<p>{{Compat("webextensions.api.devtools.panels", 2)}}</p> + +<p>{{WebExtExamples("h2")}}</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> + +<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> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/onthemechanged/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/onthemechanged/index.html new file mode 100644 index 0000000000..75c9b94ccc --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/onthemechanged/index.html @@ -0,0 +1,72 @@ +--- +title: devtools.panels.onThemeChanged +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/onThemeChanged +tags: + - API + - Add-ons + - DevTools + - Reference + - WebExtensions + - devtools.panels + - onThemeChanged +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/onThemeChanged +--- +<div>{{AddonSidebar()}}</div> + +<p>Remplacement quand le thème de devtools change</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox brush:js">browser.devtools.panels.onThemeChanged.addListener(listener) +browser.devtools.panels.onThemeChanged.removeListener(listener) +browser.devtools.panels.onThemeChanged.hasListener(listener) +</pre> + +<p>Les événements ont trois fonctions :</p> + +<dl> + <dt><code>addListener(callback)</code></dt> + <dd>Ajoute un auditeur à cet événement</dd> + <dt><code>removeListener(listener)</code></dt> + <dd>Arrêtez d'écouter cet événement. L'argument de l'auditeur est l'auditeur à supprimer.</dd> + <dt><code>hasListener(listener)</code></dt> + <dd>Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie Vrai si elle écoute, sinon Faux.</dd> +</dl> + +<h2 id="Syntaxe_addListener">Syntaxe addListener</h2> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>callback</code></dt> + <dd> + <p>Function qui sera appelée lors de l'événement. La fonction passera les arguments suivants :</p> + + <dl class="reference-values"> + <dt><code>themeName</code></dt> + <dd><code>string</code>. Nom du nouveau thème : ce sera l'une des valeurs autorisées pour <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels/themeName">devtools.panels.themeName</a></code>.</dd> + </dl> + </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.onThemeChanged")}}</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">browser.devtools.panels.onThemeChanged.addListener((newThemeName) => { + console.log(`New theme: ${newThemeName}`); +}); +</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> + +<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> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/themename/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/themename/index.html new file mode 100644 index 0000000000..abddedc962 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/themename/index.html @@ -0,0 +1,39 @@ +--- +title: devtools.panels.themeName +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/themeName +tags: + - API + - Add-ons + - DevTools + - Reference + - WebExtensions + - devtools.panels + - themeName +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/themeName +--- +<div>{{AddonSidebar()}}</div> + +<p>Le nom du thème de <strong>devtools</strong> actuellement sélectionné.</p> + +<p>Il s'agit d'une chaîne dont les valeurs possibles sont :</p> + +<ul> + <li>"lumière"</li> + <li>"foncé"</li> + <li>"firebug"</li> +</ul> + +<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.themeName")}}</p> + +<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> + +<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> |