diff options
Diffstat (limited to 'files/fr/mozilla/add-ons/webextensions/api/devtools')
23 files changed, 2110 insertions, 0 deletions
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html new file mode 100644 index 0000000000..f6cf7e86bb --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html @@ -0,0 +1,219 @@ +--- +title: devtools.inspectedWindow.eval() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval +tags: + - API + - Add-ons + - Devtools.inspectedWindows + - Extensions + - Reference + - WebExtensions + - eval +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval +--- +<div>{{AddonSidebar()}}</div> + +<p>Exécute JavaScript dans la fenêtre à laquelle les devtools sont attachés.</p> + +<p>C'est un peu comme utiliser {{WebExtAPIRef("tabs.executeScript()")}} pour joindre un script de contenu, mais avec deux différences principales:</p> + +<p>Tout d'abord, le JavaScript peut utiliser un ensemble de <a href="#Helpers">commandes spéciales que les navigateurs fournissent généralement dans leur implémentation de console devtools </a>: par exemple, en utilisant "$0" pour designer l'élément actuellement sélectionné dans l'inspecteur.</p> + +<p>Deuxièmement, le JavaScript que vous exécutez peut voir les modifications apportées à la page par des scripts que la page a chargés. Cela contraste avec les scripts de contenu, qui voient la page <a href="/fr/Add-ons/WebExtensions/Content_scripts#DOM_access">telle qu'elle existerait si aucun script de page n'était pas chargé</a>. Cependant, notez que l'isolement fourni par les scripts de contenu est une fonction de sécurité délibérée, destinée à rendre plus difficile la confusion ou la subversion des WebExtensions par des pages web malveillantes ou simplement non coopératives en redéfinissant les fonctions et les propriétés du DOM. Cela signifie que vous devez être très prudent si vous renoncez à cette protection en utilisant eval(), et devrait utiliser les scripts de contenu, sauf si vous devez utiliser eval().</p> + +<p>Le script est évalué par défaut dans le cadre principal de la page. Le script doit évaluer une valeur qui peut être représentée comme JSON (ce qui signifie que, par exemple, il peut ne pas évaluer une fonction ou un objet contenant des fonctions). Par défaut, le script ne voit pas les scripts de contenu attachés à la page.</p> + +<p>Vous ne pouvez pas appeler eval() sur les fenêtres de navigateur privilégiées telles que "about: addons".</p> + +<p>Vous pouvez éventuellement fournir un paramètre d'options, qui comprend des options pour évaluer le script dans une image différente ou dans le contexte des scripts de contenu attachés. Notez que Firefox ne supporte pas encore le paramètre d'options.</p> + +<p>La fonction eval() renvoie une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promise</a></code> qui résout le résultat évalué du script ou une erreur.</p> + +<h2 id="Aides">Aides</h2> + +<p>Le script accède à un certain nombre d'objets qui aident le script injecté à interagir avec les outils du développeur. Les assistants suivants sont actuellement pris en charge:</p> + +<dl> + <dt><code>$0</code></dt> + <dd>Contient une référence à l'élément actuellement sélectionné dans l'inspecteur Devtools.</dd> + <dt><code>inspect()</code></dt> + <dd>Etant donné un objet, s'il s'agit d'un élément DOM dans la page, sélectionnez-le dans l'inspecteur devtools, sinon il crée un aperçu de l'objet dans la webconsole.</dd> +</dl> + +<p><a href="#Examples">Voir quelques exemples.</a></p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox brush:js">var evaluating = browser.devtools.inspectedWindow.eval( + expression, // string + options // object +) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>expression</code></dt> + <dd><code>string</code>. L'expression JavaScript à évaluer. La chaîne doit évaluer un objet qui peut être représenté comme JSON, ou une exception sera lancée. Par exemple, l'expression ne doit pas évaluer une fonction.</dd> + <dt><code>options</code>{{optional_inline}}</dt> + <dd><code>object</code>. Options pour la fonction (Notez que Firefox ne supporte pas encore cette option), comme suit :</dd> + <dd> + <dl class="reference-values"> + <dt><code>frameURL</code>{{optional_inline}}</dt> + <dd><code>string</code>. L'URL du cadre dans lequel à évaluer l'expression. Si cela est supprimé, l'expression est évaluée dans la trame principale de la fenêtre.</dd> + <dt><code>useContentScriptContext</code>{{optional_inline}}</dt> + <dd><code>boolean</code>. Si c'est vrai, évaluez l'expression dans le contexte des scripts de contenu que cette extension a attachée à la page. Si vous définissez cette option, vous devez d'abord attacher certains scripts de contenu à la page ou une erreur Devtools sera lancée.</dd> + <dt><code>contextSecurityOrigin</code> {{optional_inline}}</dt> + <dd><code>string</code>. Evaluez l'expression dans le contexte d'un script de contenu attaché par une extension différente, dont l'origine correspond à la valeur donnée ici. Ces remplacements sont <code>useContentScriptContext</code>.</dd> + </dl> + </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 tableau contenant deux éléments.</p> + +<p>Si aucune erreur n'est survenue, l'élément 0 contiendra le résultat de l'évaluation de l'expression et l'élément 1 sera indéfini.</p> + +<p>Si une erreur s'est produite, l'élément 0 sera indéfini et l'élément 1 contiendra un objet donnant des détails sur l'erreur. Deux types différents d'erreurs sont distingués :</p> + +<ul> + <li>Des erreurs rencontrées lors de l'évaluation du JavaScript (par exemple, des erreurs de syntaxe dans l'expression). Dans ce cas, l'élément 1 contiendra : + <ul> + <li>Une propriété boolean isException, définie sur true</li> + <li>Une valeur de propriété de chaîne, en donnant plus de détails.</li> + </ul> + </li> + <li>D'autres erreurs (par exemple, une expression qui évalue sur un objet qui ne peut pas être représenté comme JSON). Dans ce cas, l'élément 1 contiendra: + <ul> + <li>Une propriété booléenne isError, définie sur true</li> + <li>Un code de propriété de chaîne contenant un code d'erreur.</li> + </ul> + </li> +</ul> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("webextensions.api.devtools.inspectedWindow.eval")}}</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>Ceci teste si jQuery est défini dans la fenêtre inspectée et enregistre le résultat. Notez que cela ne fonctionnerait pas dans un script de contenu, car même si jQuery était défini, le script de contenu ne le verrait pas.</p> + +<pre class="brush: js">function handleError(error) { + if (error.isError) { + console.log(`Devtools error: ${error.code}`); + } else { + console.log(`JavaScript error: ${error.value}`); + } +} + +function handleResult(result) { + console.log(result); + if (result[0] !== undefined) { + console.log(`jQuery: ${result[0]}`); + } else if (result[1]) { + handleError(result[1]); + } +} + +const checkjQuery = "typeof jQuery != 'undefined'"; + +evalButton.addEventListener("click", () => { + browser.devtools.inspectedWindow.eval(checkjQuery) + .then(handleResult); +});</pre> + +<h3 id="Exemples_d'aide">Exemples d'aide</h3> + +<p>Cela utilise l'aide de <code>$0</code> pour définir la couleur d'arrière-plan de l'élément, actuellement sélectionné dans l'inspecteur :</p> + +<pre class="brush: js">const evalButton = document.querySelector("#reddinate"); +const evalString = "$0.style.backgroundColor = 'red'"; + +function handleError(error) { + if (error.isError) { + console.log(`Devtools error: ${error.code}`); + } else { + console.log(`JavaScript error: ${error.value}`); + } +} + +function handleResult(result) { + if (result[1]) { + handleError(result[1]); + } +} + +evalButton.addEventListener("click", () => { + browser.devtools.inspectedWindow.eval(evalString) + .then(handleResult); +}); +</pre> + +<p>Cela utilise l'assistant l'inspection() pour sélectionner le premier élément <h1> dans la page:</p> + +<pre class="brush: js">const inspectButton = document.querySelector("#inspect"); +const inspectString = "inspect(document.querySelector('h1'))"; + +function handleError(error) { + if (error.isError) { + console.log(`Devtools error: ${error.code}`); + } else { + console.log(`JavaScript error: ${error.value}`); + } +} + +function handleResult(result) { + if (result[1]) { + handleError(result[1]); + } +} + +inspectButton.addEventListener("click", () => { + browser.devtools.inspectedWindow.eval(inspectString) + .then(handleResult); +}); +</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> + +<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/inspectedwindow/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html new file mode 100644 index 0000000000..2f077b4e9d --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html @@ -0,0 +1,82 @@ +--- +title: devtools.inspectedWindow +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow +tags: + - API + - Add-ons + - Devtools.inspectedWindows + - Extensions + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow +--- +<div>{{AddonSidebar}}</div> + +<div class="note"> +<p>Cette page décrit les API de développement de WebExtensions telles qu'elles existent dans Firefox 54. 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 <code>devtools.inspectedWindow</code> permet à un extension de devtools d'interagir avec la fenêtre sur laquelle les outils de développement sont attachés.</p> + +<p>Comme toutes les APIs de <code>devtools</code>, cette API n'est disponible que pour exécuter le code dans le document défini dans la clé <a href="/fr/Add-ons/WebExtensions/manifest.json/devtools_page">devtools_page</a> du manifest.json, où dans d'autres documents devtools créés par l'extension (tels que le document hébergé par un panneau, l'extension créée). Voir <a href="/fr/Add-ons/WebExtensions/Extending_the_developer_tools">Extension des outils de développement </a> pour plus d'informations.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId">devtools.inspectedWindow.tabId</a></code></dt> + <dd>L'ID de la fenêtre sur laquelle sont attachés les outils du développeur.</dd> +</dl> + +<h2 id="Fonctions">Fonctions</h2> + +<dl> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval">devtools.inspectedWindow.eval()</a></code></dt> + <dd>Evaluez certains JavaScript dans la fenêtre de destination.</dd> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.inspectedWindow/reload">devtools.inspectedWindow.reload()</a></code></dt> + <dd>Rechargez le document de la fenêtre destination.</dd> +</dl> + +<h2 id="Comptatibilité_navigateur">Comptatibilité navigateur</h2> + +<p>{{Compat("webextensions.api.devtools.inspectedWindow")}}</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_inspectedWindow"><code>chrome.devtools.inspectedWindow</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"> +<p>// Copyright 2015 The Chromium Authors. All rights reserved.<br> + //<br> + // Redistribution and use in source and binary forms, with or without<br> + // modification, are permitted provided that the following conditions are<br> + // met:<br> + //<br> + // * Redistributions of source code must retain the above copyright<br> + // notice, this list of conditions and the following disclaimer.<br> + // * Redistributions in binary form must reproduce the above<br> + // copyright notice, this list of conditions and the following disclaimer<br> + // in the documentation and/or other materials provided with the<br> + // distribution.<br> + // * Neither the name of Google Inc. nor the names of its<br> + // contributors may be used to endorse or promote products derived from<br> + // this software without specific prior written permission.<br> + //<br> + // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS<br> + // "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT<br> + // LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR<br> + // A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT<br> + // OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,<br> + // SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT<br> + // LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,<br> + // DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY<br> + // THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT<br> + // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE<br> + // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.</p> +</div> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.html new file mode 100644 index 0000000000..f2f7b8cdc8 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.html @@ -0,0 +1,100 @@ +--- +title: devtools.inspectedWindow.reload() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/reload +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.inspectedWindow + - reload +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/reload +--- +<div>{{AddonSidebar()}}</div> + +<p>Recharge la fenêtre à laquelle les devtools sont attachés.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox brush:js">browser.devtools.inspectedWindow.reload( + reloadOptions // object +) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>reloadOptions</code>{{optional_inline}}</dt> + <dd><code>object</code>. Options pour la fonction, comme suit</dd> + <dd> + <dl class="reference-values"> + <dt><code>ignoreCache</code>{{optional_inline}}</dt> + <dd><code>boolean</code>. S'il est vrai, cela fait que le rechargement ignore le cache du navigateur (comme si l'utilisateur avait appuyé sur Shift+Ctrl+R).</dd> + <dt><code>userAgent</code>{{optional_inline}}</dt> + <dd><code>string</code>. Définissez un agent utilisateur personnalisé pour la page. Ici, la chaîne fournie sera envoyée dans l'en-tête de l'<a href="/fr/docs/Web/HTTP/Headers/User-Agent">Agent utilisateur</a>, et sera renvoyée par les appels à <code><a href="/fr/docs/Web/API/NavigatorID/userAgent">navigator.userAgent</a></code> réalisé par des scripts s'exécutant sur la page.</dd> + <dt><code>injectedScript</code> {{optional_inline}}</dt> + <dd><code>string</code>. Injectez l'expression JavaScript donnée dans toutes les images de la page, avant tout autre script.</dd> + </dl> + </dd> +</dl> + +<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> + +<p>{{Compat("webextensions.api.devtools.inspectedWindow.reload")}}</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>Rechargez la fenêtre inspectée, définissez l'agent utilisateur et injectez un script</p> + +<pre class="brush: js">const reloadButton = document.querySelector("#reload-button"); + +reloadButton.addEventListener("click", () => { + browser.devtools.inspectedWindow.reload({ + injectedScript:"alert(navigator.userAgent);", + userAgent: "Not a real UA" + }); +}); +</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> + +<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/inspectedwindow/tabid/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html new file mode 100644 index 0000000000..b5b3d3b0b2 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html @@ -0,0 +1,85 @@ +--- +title: devtools.inspectedWindow.tabId +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.inpectedWindow + - tabId +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId +--- +<div>{{AddonSidebar()}}</div> + +<p>L'ID de {{WebExtAPIRef("tabs.Tab", "tab")}} est que cette instance des devtools est jointe, représenté comme un nombre.</p> + +<p>Cela peut être envoyé à la page de fond de l'extension, de sorte que la page d'arrière plan peut utiliser l'API {{WebExtAPIRef("tabs")}} pour interargir avec l'onglet :</p> + +<pre class="brush: js">// devtools-panel.js + +const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';"; + +attachContentScriptButton.addEventListener("click", () => { + browser.runtime.sendMessage({ + tabId: browser.devtools.inspectedWindow.tabId, + script: scriptToAttach + }); +});</pre> + +<pre class="brush: js">// background.js + +function handleMessage(request, sender, sendResponse) { + browser.tabs.executeScript(request.tabId, { + code: request.script + }); +} + +browser.runtime.onMessage.addListener(handleMessage);</pre> + +<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> + +<p>{{Compat("webextensions.api.devtools.inspectedWindow.tabId")}}</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> + +<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> + +<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/network/gethar/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/gethar/index.html new file mode 100644 index 0000000000..abcdf667e6 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/gethar/index.html @@ -0,0 +1,88 @@ +--- +title: devtools.network.getHAR() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.network/getHAR +tags: + - Add-ons + - Extensions + - WebExtensions + - devtools.network + - getHAR +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network/getHAR +--- +<div>{{AddonSidebar()}}</div> + +<p>Obtenez un <a href="http://www.softwareishard.com/blog/har-12-spec/#log">journal HAR</a> pour la page chargée dans l'onglet en cours.</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 getting = browser.devtools.network.getHAR() +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<p>None.</p> + +<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 contenant le journal HAR pour l'onglet en cours. Pour plus de détails sur ce que contient l'objet journal, reportez-vous à la <a href="http://www.softwareishard.com/blog/har-12-spec/#log">spécification HAR</a>.</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.network.getHAR")}}</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Consignez les URL des demandes contenues dans le journal HAR :</p> + +<pre class="brush: js">async function logRequests() { + let harLog = await browser.devtools.network.getHAR(); + console.log(`HAR version: ${harLog.version}`); + for (let entry of harLog.entries) { + console.log(entry.request.url); + } +} + +logRequestsButton.addEventListener("click", logRequests); +</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_network"><code>chrome.devtools.network</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/network/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.html new file mode 100644 index 0000000000..580a823371 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.html @@ -0,0 +1,75 @@ +--- +title: devtools.network +slug: Mozilla/Add-ons/WebExtensions/API/devtools.network +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.network +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network +--- +<div>{{AddonSidebar}}</div> + +<p>L'API <code>devtools.network</code> permet à une extension devtools d'obtenir des informations sur les demandes de réseau associées à la fenêtre à laquelle les devtools sont attachés (la fenêtre inspectée).</p> + +<p>Comme toutes les APIs 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 devtools créés par l'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 d'informations.</p> + +<h2 id="Fonctions">Fonctions</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.network/getHAR">devtools.network.getHAR()</a></dt> + <dd>Obtenez le <a class="external external-icon" href="http://www.softwareishard.com/blog/har-12-spec/#log" rel="noopener">journal HAR</a> pour la page chargée dans l'onglet en cours..</dd> +</dl> + +<h2 id="Evénements">Evénements</h2> + +<dl> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.network/onNavigated">devtools.network.onNavigated</a></code></dt> + <dd>Attiré lorsque l'utilisateur navigue dans la fenêtre inspectée vers une nouvelle page.</dd> + <dt><code><a href="/fr/Add-ons/WebExtensions/API/devtools.network/onRequestFinished">devtools.network.onRequestFinished</a></code></dt> + <dd>Lancé lorsque la demande réseau est terminée et que ses détails sont disponibles pour l'extension.</dd> +</dl> + +<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> + +<p>{{Compat("webextensions.api.devtools.network")}}</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_network"><code>chrome.devtools.network</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/network/onnavigated/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.html new file mode 100644 index 0000000000..b7f0d0af31 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.html @@ -0,0 +1,103 @@ +--- +title: devtools.network.onNavigated +slug: Mozilla/Add-ons/WebExtensions/API/devtools.network/onNavigated +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.network +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network/onNavigated +--- +<div>{{AddonSidebar()}}</div> + +<p>Mise en place lorsque l'utilisateur navigue dans la fenêtre inspectée vers une nouvelle page</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox brush:js">browser.devtools.network.onNavigated.addListener(listener) +browser.devtools.network.onNavigated.removeListener(listener) +browser.devtools.network.onNavigated.hasListener(listener) +</pre> + +<p>Les événements ont trois fonctions :</p> + +<dl> + <dt><code>addListener(listener)</code></dt> + <dd>Ajouter un auditeur à cet événement.</dd> + <dt><code>removeListener(listener)</code></dt> + <dd>Arrêter d'écouter un é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 <strong>vrai</strong> si elle écoute, sinon <strong>faux</strong>.</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 passera les arguments suivants :</p> + + <dl class="reference-values"> + <dt><code>url</code></dt> + <dd><code>string</code>. La nouvelle URL pour la fenêtre.</dd> + </dl> + </dd> +</dl> + +<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> + +<p>{{Compat("webextensions.api.devtools.network.onNavigated")}}</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> + +<pre class="brush: js">function handleNavigated(url) { + console.log(url); +} + +browser.devtools.network.onNavigated.addListener(handleNavigated);</pre> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Remerciements</strong> + +<p>Cette API est basée sur l'API <a href="https://developer.chrome.com/extensions/devtools"><code>chrome.devtools</code></a> de Chromium.</p> + +<p>Les données de compatibilité de Microsoft Edge sont fournies par Microsoft Corporation et sont incluses ici sous la licence Creative Commons Attribution 3.0 United States.</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/network/onrequestfinished/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.html new file mode 100644 index 0000000000..e2b4d930fc --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.html @@ -0,0 +1,112 @@ +--- +title: devtools.network.onRequestFinished +slug: Mozilla/Add-ons/WebExtensions/API/devtools.network/onRequestFinished +tags: + - API + - Add-ons + - Event + - Extensions + - Reference + - WebExtensions + - devtools.network + - onRequestFinished +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network/onRequestFinished +--- +<div>{{AddonSidebar()}}</div> + +<p>Lancé lorsqu'une requête réseau est terminée et que ses détails sont disponibles pour l'extension.</p> + +<p>La requête est donnée en tant qu'<a href="http://www.softwareishard.com/blog/har-12-spec/#entries">objet d'entrée HAR</a>, qui est également doté d'une méthode <code>getContent()</code> asynchrone qui récupère le contenu du corps de la réponse.</p> + +<p>Notez que bien que votre extension puisse ajouter un écouteur à tout moment,elle commencera seulement à se déclencher après que l'utilisateur a activé le <a href="/fr/docs/Outils/Moniteur_réseau">moniteur réseau</a> du navigateur au moins une fois.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox brush:js">browser.devtools.network.onRequestFinished.addListener(listener) +browser.devtools.network.onRequestFinished.removeListener(listener) +browser.devtools.network.onRequestFinished.hasListener(listener) +</pre> + +<p>Les événements ont trois fonctions</p> + +<dl> + <dt><code>addListener(listener)</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 recevra les arguments suivants :</p> + + <dl class="reference-values"> + <dt><code>request</code></dt> + <dd><code>object</code>. Un objet représentant la requête. Cet objet est un seul objet d'<a href="http://www.softwareishard.com/blog/har-12-spec/#entries">entrée HAR</a>. Il définit également une méthode <code>getContent()</code> asynchrone, qui renvoie une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promise</a></code> qui se résout avec le corps de la réponse.</dd> + </dl> + </dd> +</dl> + +<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> + +<p>{{Compat("webextensions.api.devtools.network.onRequestFinished")}}</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="Examples">Examples</h2> + +<p>Ajoutez un écouteur qui consigne l'adresse IP du serveur et le corps de la réponse pour chaque requête réseau.</p> + +<pre class="brush: js">function handleRequestFinished(request) { + console.log("Server IP: ", request.serverIPAddress); + request.getContent().then(content => { + console.log("Content: ", content); + }); +} + +browser.devtools.network.onRequestFinished.addListener(handleRequestFinished);</pre> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Remerciements</strong> + +<p>Cette API est basée sur l'API <a href="https://developer.chrome.com/extensions/devtools"><code>chrome.devtools</code></a> de Chromium.</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/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> |