From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../api/browsersettings/proxyconfig/index.html | 73 ------- .../api/devtools.inspectedwindow/eval/index.html | 219 --------------------- .../api/devtools.inspectedwindow/index.html | 82 -------- .../api/devtools.inspectedwindow/reload/index.html | 100 ---------- .../api/devtools.inspectedwindow/tabid/index.html | 85 -------- .../api/devtools.network/gethar/index.html | 88 --------- .../webextensions/api/devtools.network/index.html | 75 ------- .../api/devtools.network/onnavigated/index.html | 103 ---------- .../devtools.network/onrequestfinished/index.html | 112 ----------- .../api/devtools.panels/create/index.html | 110 ----------- .../api/devtools.panels/elements/index.html | 29 --- .../elementspanel/createsidebarpane/index.html | 107 ---------- .../api/devtools.panels/elementspanel/index.html | 73 ------- .../elementspanel/onselectionchanged/index.html | 74 ------- .../api/devtools.panels/extensionpanel/index.html | 93 --------- .../extensionsidebarpane/index.html | 89 --------- .../extensionsidebarpane/onhidden/index.html | 80 -------- .../extensionsidebarpane/onshown/index.html | 78 -------- .../extensionsidebarpane/setexpression/index.html | 106 ---------- .../extensionsidebarpane/setobject/index.html | 104 ---------- .../extensionsidebarpane/setpage/index.html | 89 --------- .../webextensions/api/devtools.panels/index.html | 103 ---------- .../api/devtools.panels/onthemechanged/index.html | 72 ------- .../api/devtools.panels/themename/index.html | 39 ---- .../api/devtools/inspectedwindow/eval/index.html | 219 +++++++++++++++++++++ .../api/devtools/inspectedwindow/index.html | 82 ++++++++ .../api/devtools/inspectedwindow/reload/index.html | 100 ++++++++++ .../api/devtools/inspectedwindow/tabid/index.html | 85 ++++++++ .../api/devtools/network/gethar/index.html | 88 +++++++++ .../webextensions/api/devtools/network/index.html | 75 +++++++ .../api/devtools/network/onnavigated/index.html | 103 ++++++++++ .../devtools/network/onrequestfinished/index.html | 112 +++++++++++ .../api/devtools/panels/create/index.html | 110 +++++++++++ .../api/devtools/panels/elements/index.html | 29 +++ .../elementspanel/createsidebarpane/index.html | 107 ++++++++++ .../api/devtools/panels/elementspanel/index.html | 73 +++++++ .../elementspanel/onselectionchanged/index.html | 74 +++++++ .../api/devtools/panels/extensionpanel/index.html | 93 +++++++++ .../panels/extensionsidebarpane/index.html | 89 +++++++++ .../extensionsidebarpane/onhidden/index.html | 80 ++++++++ .../panels/extensionsidebarpane/onshown/index.html | 78 ++++++++ .../extensionsidebarpane/setexpression/index.html | 106 ++++++++++ .../extensionsidebarpane/setobject/index.html | 104 ++++++++++ .../panels/extensionsidebarpane/setpage/index.html | 89 +++++++++ .../webextensions/api/devtools/panels/index.html | 103 ++++++++++ .../api/devtools/panels/onthemechanged/index.html | 72 +++++++ .../api/devtools/panels/themename/index.html | 39 ++++ .../api/menus/menus.overridecontext()/index.html | 62 ------ .../webextensions/api/proxy/onerror/index.html | 60 ++++++ .../api/proxy/onproxyerror/index.html | 60 ------ .../webextensions/api/proxy/settings/index.html | 73 +++++++ .../api/userscripts/apiscript/index.html | 43 ---- .../registereduserscript.unregister()/index.html | 49 ----- .../travailler_avec_userscripts/index.html | 115 ----------- .../working_with_userscripts/index.html | 115 +++++++++++ 55 files changed, 2358 insertions(+), 2512 deletions(-) delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/browsersettings/proxyconfig/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/reload/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.network/gethar/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.network/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.network/onnavigated/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.network/onrequestfinished/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/create/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elements/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/createsidebarpane/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/onselectionchanged/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionpanel/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onhidden/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onshown/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setexpression/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setobject/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setpage/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/onthemechanged/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/themename/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/network/gethar/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elements/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/createsidebarpane/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/onselectionchanged/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionpanel/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onhidden/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onshown/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setexpression/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setobject/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setpage/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/onthemechanged/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/themename/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/menus/menus.overridecontext()/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/proxy/onerror/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/proxy/onproxyerror/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/proxy/settings/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/registereduserscript.unregister()/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/userscripts/travailler_avec_userscripts/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.html (limited to 'files/fr/mozilla/add-ons/webextensions/api') diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/proxyconfig/index.html b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/proxyconfig/index.html deleted file mode 100644 index 8ebc5822c2..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/proxyconfig/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: browserSettings.proxyConfig -slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/proxyConfig -tags: - - API - - Add-ons - - Extensions - - Property - - Reference - - WebExtensions - - browserSettings - - proxyConfig -translation_of: Mozilla/Add-ons/WebExtensions/API/proxy/settings ---- -
{{AddonSidebar()}}
- -

Un objet {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} qui peut être utilisé pour modifier les paramètres de proxy du navigateur.

- -
-

Note: La possibilité de modifier les paramètres de proxy nécessite un accès à une fenêtre privée car les paramètres de proxy affectent à la fois les fenêtres privées et non privées. Par conséquent, si une extension n'a pas reçu l'autorisation de fenêtre privée, les appels à  proxy.settings.set() lanceront une exception.

-
- -

La valeur sous-jacente est un objet avec les propriétés énumérées ci-dessous.

- -

Lors de la définition de cet objet, toutes les propriétés sont facultatives. Notez que les propriétés omises seront réinitialisées à leur valeur par défaut.

- -
-
autoConfigUrl{{optional_inline}}
-
string. Une URL à utiliser pour configurer le proxy.
-
autoLogin{{optional_inline}}
-
boolean. Ne pas demander l'authentification si le mot de passe est enregistré. Par défaut à false.
-
ftp{{optional_inline}}
-
string. L'adresse du proxy FTP. Peut inclure un port.
-
http{{optional_inline}}
-
string. L'adresse du proxy HTTP. Peut inclure un port.
-
httpProxyAll{{optional_inline}}
-
boolean. Utilisez le serveur proxy HTTP pour tous les protocoles. Par défaut à false.
-
passthrough{{optional_inline}}
-
string. Une liste d'hôtes séparés par des virgules qui ne doivent pas être mandatés. La valeur par défaut est "localhost, 127.0.0.1".
-
proxyDNS{{optional_inline}}
-
boolean. DNS proxy lors de l'utilisation de SOCKS5. Par défaut à false.
-
proxyType{{optional_inline}}
-
string. Le type de proxy à utiliser. Cela peut prendre l'une des valeurs suivantes : "none", "autoDetect", "system", "manual", "autoConfig". Par défaut à "system".
-
socks{{optional_inline}}
-
string. L'adresse du proxy SOCKS. Peut inclure un port.
-
socksVersion{{optional_inline}}
-
integer. La version du proxy SOCKS. Peut être 4 ou 5. Par défaut à 5.
-
ssl{{optional_inline}}
-
string. L'adresse du proxy SSL. Peut inclure un port.
-
- -

 

- -

Exemples

- -
let proxySettings = {
-  proxyType: "manual",
-  http: "http://proxy.org:8080",
-  socksVersion: 4,
-  passthrough: ".example.org"
-};
-
-browser.proxy.settings.set({value: proxySettings});
- -

{{WebExtExamples}}

- -

 

- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.proxy.settings", 10)}}

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 deleted file mode 100644 index f6cf7e86bb..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

Exécute JavaScript dans la fenêtre à laquelle les devtools sont attachés.

- -

C'est un peu comme utiliser {{WebExtAPIRef("tabs.executeScript()")}} pour joindre un script de contenu, mais avec deux différences principales:

- -

Tout d'abord, le JavaScript peut utiliser un ensemble de commandes spéciales que les navigateurs fournissent généralement dans leur implémentation de console devtools : par exemple, en utilisant "$0" pour designer l'élément actuellement sélectionné dans l'inspecteur.

- -

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 telle qu'elle existerait si aucun script de page n'était pas chargé. 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().

- -

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.

- -

Vous ne pouvez pas appeler eval() sur les fenêtres de navigateur privilégiées telles que "about: addons".

- -

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.

- -

La fonction eval() renvoie une Promise qui résout le résultat évalué du script ou une erreur.

- -

Aides

- -

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:

- -
-
$0
-
Contient une référence à l'élément actuellement sélectionné dans l'inspecteur Devtools.
-
inspect()
-
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.
-
- -

Voir quelques exemples.

- -

Syntaxe

- -
var evaluating = browser.devtools.inspectedWindow.eval(
-  expression,       // string
-  options           // object
-)
-
- -

Paramètres

- -
-
expression
-
string. 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.
-
options{{optional_inline}}
-
object. Options pour la fonction  (Notez que Firefox ne supporte pas encore cette option), comme suit :
-
-
-
frameURL{{optional_inline}}
-
string. 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.
-
useContentScriptContext{{optional_inline}}
-
boolean. 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.
-
contextSecurityOrigin {{optional_inline}}
-
string. 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 useContentScriptContext.
-
-
-
- -

Valeur retournée

- -

Une Promise qui sera remplie avec un tableau contenant deux éléments.

- -

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.

- -

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 :

- - - -

Compatibilité des navigateurs

- -

{{Compat("webextensions.api.devtools.inspectedWindow.eval")}}

- - - -

Exemples

- -

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.

- -
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);
-});
- -

Exemples d'aide

- -

Cela utilise l'aide de $0 pour définir la couleur d'arrière-plan de l'élément, actuellement sélectionné dans l'inspecteur :

- -
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);
-});
-
- -

Cela utilise l'assistant l'inspection() pour sélectionner le premier élément <h1> dans la page:

- -
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);
-});
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.

- -

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.

-
- - 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 deleted file mode 100644 index 2f077b4e9d..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -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 ---- -
{{AddonSidebar}}
- -
-

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 APIs de devtools de Chrome, 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  Limitations des APIs devtools.

-
- -

L'API devtools.inspectedWindow permet à un extension de devtools d'interagir avec la fenêtre sur laquelle les outils de développement sont attachés.

- -

Comme toutes les APIs de devtools, cette API n'est disponible que pour exécuter le code dans le document défini dans la clé devtools_page 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 Extension des outils de développement  pour plus d'informations.

- -

Propriétés

- -
-
devtools.inspectedWindow.tabId
-
L'ID de la fenêtre sur laquelle sont attachés les outils du développeur.
-
- -

Fonctions

- -
-
devtools.inspectedWindow.eval()
-
Evaluez certains JavaScript dans la fenêtre de destination.
-
devtools.inspectedWindow.reload()
-
Rechargez le document de la fenêtre destination.
-
- -

Comptatibilité navigateur

- -

{{Compat("webextensions.api.devtools.inspectedWindow")}}

- -

{{WebExtExamples("h2")}}

- - - -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.inspectedWindow.

- -

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.

-
- - 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 deleted file mode 100644 index f2f7b8cdc8..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/reload/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

Recharge la fenêtre à laquelle les devtools sont attachés.

- -

Syntaxe

- -
browser.devtools.inspectedWindow.reload(
-  reloadOptions       // object
-)
-
- -

Paramètres

- -
-
reloadOptions{{optional_inline}}
-
object. Options pour la fonction, comme suit
-
-
-
ignoreCache{{optional_inline}}
-
boolean. S'il est vrai, cela fait que le rechargement ignore le cache du navigateur (comme si l'utilisateur avait appuyé sur Shift+Ctrl+R).
-
userAgent{{optional_inline}}
-
string. Définissez un agent utilisateur personnalisé pour la page. Ici, la chaîne fournie sera envoyée dans l'en-tête de l'Agent utilisateur, et sera renvoyée par les appels à navigator.userAgent réalisé par des scripts s'exécutant sur la page.
-
injectedScript {{optional_inline}}
-
string. Injectez l'expression JavaScript donnée dans toutes les images de la page, avant tout autre script.
-
-
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.inspectedWindow.reload")}}

- - - -

Exemples

- -

Rechargez la fenêtre inspectée, définissez l'agent utilisateur et injectez un script

- -
const reloadButton = document.querySelector("#reload-button");
-
-reloadButton.addEventListener("click", () => {
-  browser.devtools.inspectedWindow.reload({
-    injectedScript:"alert(navigator.userAgent);",
-    userAgent: "Not a real UA"
-  });
-});
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.

- -

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.

-
- - 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 deleted file mode 100644 index b5b3d3b0b2..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

L'ID de {{WebExtAPIRef("tabs.Tab", "tab")}} est que cette instance des devtools est jointe, représenté comme un nombre.

- -

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 :

- -
// 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
-  });
-});
- -
// background.js
-
-function handleMessage(request, sender, sendResponse) {
-  browser.tabs.executeScript(request.tabId, {
-    code: request.script
-  });
-}
-
-browser.runtime.onMessage.addListener(handleMessage);
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.inspectedWindow.tabId")}}

- - - -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.

- -

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.

-
- - 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 deleted file mode 100644 index abcdf667e6..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/gethar/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

Obtenez un journal HAR pour la page chargée dans l'onglet en cours.

- -

C'est une fonction asynchrone qui renvoie une Promise.

- -

Syntaxe

- -
var getting = browser.devtools.network.getHAR()
-
- -

Paramètres

- -

None.

- -

Valeur retournée

- -

Une Promise 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 spécification HAR.

- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.network.getHAR")}}

- -

Exemples

- -

Consignez les URL des demandes contenues dans le journal HAR :

- -
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);
-
- -

{{WebExtExamples}}

- -
Remerciements : - -

Cette API est basée sur l'API Chromium chrome.devtools.network.

-
- - 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 deleted file mode 100644 index 580a823371..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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 ---- -
{{AddonSidebar}}
- -

L'API devtools.network 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).

- -

Comme toutes les APIs de devtools, cette API est uniquement disponible pour le code exécuté dans le document défini dans la clé devtools_page du manifest.json, ou dans d'autres documents de devtools créés par l'extension (tel que le document du panneau). Voir Extension des outils de développement pour plus d'informations.

- -

Fonctions

- -
-
devtools.network.getHAR()
-
Obtenez le  journal HAR pour la page chargée dans l'onglet en cours..
-
- -

Evénements

- -
-
devtools.network.onNavigated
-
Attiré lorsque l'utilisateur navigue dans la fenêtre inspectée vers une nouvelle page.
-
devtools.network.onRequestFinished
-
Lancé lorsque la demande réseau est terminée et que ses détails sont disponibles pour l'extension.
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.network")}}

- -

{{WebExtExamples("h2")}}

- -
Remerciements : - -

Cette API est basée sur l'API Chromium chrome.devtools.network.

-
- - 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 deleted file mode 100644 index b7f0d0af31..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/onnavigated/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

Mise en place lorsque l'utilisateur navigue dans la fenêtre inspectée vers une nouvelle page

- -

Syntaxe

- -
browser.devtools.network.onNavigated.addListener(listener)
-browser.devtools.network.onNavigated.removeListener(listener)
-browser.devtools.network.onNavigated.hasListener(listener)
-
- -

Les événements ont trois fonctions :

- -
-
addListener(listener)
-
Ajouter un auditeur à cet événement.
-
removeListener(listener)
-
Arrêter d'écouter un événement. L'argument de l'auditeur est l'auditeur à supprimer.
-
hasListener(listener)
-
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie vrai si elle écoute, sinon faux.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction qui sera appelée lors de l'événement. La fonction passera les arguments suivants :

- -
-
url
-
string. La nouvelle URL pour la fenêtre.
-
-
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.network.onNavigated")}}

- - - -

Exemples

- -
function handleNavigated(url) {
-  console.log(url);
-}
-
-browser.devtools.network.onNavigated.addListener(handleNavigated);
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API chrome.devtools de Chromium.

- -

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.

-
- - 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 deleted file mode 100644 index e2b4d930fc..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/onrequestfinished/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

Lancé lorsqu'une requête réseau est terminée et que ses détails sont disponibles pour l'extension.

- -

La requête est donnée en tant qu'objet d'entrée HAR, qui est également doté d'une méthode getContent() asynchrone qui récupère le contenu du corps de la réponse.

- -

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 moniteur réseau du navigateur au moins une fois.

- -

Syntaxe

- -
browser.devtools.network.onRequestFinished.addListener(listener)
-browser.devtools.network.onRequestFinished.removeListener(listener)
-browser.devtools.network.onRequestFinished.hasListener(listener)
-
- -

Les événements ont trois fonctions

- -
-
addListener(listener)
-
Ajoute un écouteur à cet événement.
-
removeListener(listener)
-
Arrêtez d'écouter cet événement. L'argument de listener  est l'écouteur à supprimer.
-
hasListener(listener)
-
Vérifiez si listener est enregistré pour cet événement. Renvoie trues'il écoute, sinon false.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction qui sera appelée lorsque cet événement se produit. La fonction recevra les arguments suivants :

- -
-
request
-
object. Un objet représentant la requête. Cet objet est un seul objet d'entrée HAR. Il définit également une méthode getContent() asynchrone, qui renvoie une Promise qui se résout avec le corps de la réponse.
-
-
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.network.onRequestFinished")}}

- - - -

Examples

- -

Ajoutez un écouteur qui consigne l'adresse IP du serveur et le corps de la réponse pour chaque requête réseau.

- -
function handleRequestFinished(request) {
-  console.log("Server IP: ", request.serverIPAddress);
-  request.getContent().then(content => {
-    console.log("Content: ", content);
-  });
-}
-
-browser.devtools.network.onRequestFinished.addListener(handleRequestFinished);
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API chrome.devtools de Chromium.

-
- - 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 deleted file mode 100644 index 60de8f3871..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/create/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

Ajoute un nouveau panneau aux devtools.

- -

Cette fonction prend : un titre, une URL vers un fichier d'icône et une URL vers un fichier HTML. Il crée un nouveau panneau dans les devtools, dont le contenu est spécifié par le fichier HTML. Il renvoie une Promise qui résout un objet ExtensionPanel représentant le nouveau panneau.

- -

Syntaxe

- -
var creating = browser.devtools.panels.create(
-  title,       // string
-  iconPath,    // string
-  pagePath     // string
-)
-
- -

Parametères

- -
-
title
-
string. 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.
-
iconPath
-
string. 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").
-
pagePath
-
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 Extention des outils de développement.
-
- -

Valeur retournée

- -

Une Promise qui sera remplie avec un objet ExtensionPanel représentant le nouveau panneau.

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.create")}}

- - - -

Exemples

- -

Créer un nouveau panneau, et ajoute des auditeurs à ces événements onShown et  onHidden :

- -
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);
-});
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

- -

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.

-
- - 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 deleted file mode 100644 index 18223b2718..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elements/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

Un objet ElementsPanel qui représente l'inspecteur HTML/CSS du navigateur

- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.elements", 10)}}

- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
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 deleted file mode 100644 index 7eee52fff5..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/createsidebarpane/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

Ajoute un nouveau volet à la barre latérale dans l'inspecteur HTML / CSS.

- -

L'inspecteur HTML / CSS, appelé l'inspecteur de page dans Firefox et le panneau éléments 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.

- -

La fonction createSidebarPane() 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 :

- -

- -

Cette fonction prend un argument, qui est une chaîne représentant le titre du volet. Il renvoie une Promise qui se résout en un objet ExtensionSidebarPane représentant le nouveau volet. Vous pouvez utiliser cet objet pour définir le contenu et le comportement du volet.

- -

Syntaxe

- -
var creating = browser.devtools.panels.elements.createSidebarPane(
-  title       // string
-)
-
- -

Paramètres

- -
-
title
-
string. 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.
-
- -

Valeur retournée

- -

Une Promise qui sera remplie avec un objet ExtensionSidebarPane représentant le nouveau volet.

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ElementsPanel.createSidebarPane", 10)}}

- - - -

Exemples

- -

Créez un nouveau volet et remplissez-le avec un objet JSON. Vous pouvez exécuter ce code dans un script chargé par la page devtools.

- -
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);
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - 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 deleted file mode 100644 index 5c2a0413c7..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

Un ElementsPanel 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.

- -

Fonctions

- -
-
devtools.panels.ElementsPanel.createSidebarPane()
-
Crée un volet dans la barre latérale de l'inspecteur.
-
-

Evénements

-
-
devtools.panels.ElementsPanel.onSelectionChanged
-
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".
-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.ElementsPanel", 10)}}

- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - 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 deleted file mode 100644 index e753d5aba1..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/onselectionchanged/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

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.

- -

Syntaxe

- -
browser.devtools.panels.elements.onSelectionChanged.addListener(listener)
-browser.devtools.panels.elements.onSelectionChanged.removeListener(listener)
-browser.devtools.panels.elements.onSelectionChanged.hasListener(listener)
-
- -

L'événement a trois fonctions :

- -
-
addListener(listener)
-
Ajoute une écoute à cet événement.
-
removeListener(listener)
-
Arrête une écoute à l'événement. L'argument de l'auditeur est un auditeur supprimer.
-
hasListener(listener)
-
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie la valeur Vrai si elle l'écoute, sinon Faux.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction qui sera appelée lors de l'événement. La fonction ne passera pas d'arguments.

-
-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.ElementsPanel.onSelectionChanged", 10)}}

- -

Exemples

- -

Ecoutez la sélection des événements modifiés, et enregistrez le contenu du texte de l'élément nouvellement sélectionné :

- -
function handleSelectedElement() {
-  browser.devtools.inspectedWindow.eval("$0.textContent")
-    .then((result) => {
-      console.log(result[0]);
-    });
-}
-
-browser.devtools.panels.elements.onSelectionChanged.addListener(handleSelectedElement);
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.

-
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 deleted file mode 100644 index e083ff02b3..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionpanel/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

Une ExtensionPanel représente un panneau ajouté aux devtools. C'est la résolution de la Promise renvoyé par browser.devtools.panels.create().

- -

Type

- -

Les valeurs de ce type sont des objets. Définissez deux événements, onShown et onHidden.

- - - -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ExtensionPanel")}}

- - - -

Exemples

- -

Ce code crée un nouveau panneau, puis ajoute des gestionnaires pour ces événements onShown et onHidden.

- -
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);
-});
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

- -

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.

-
- - 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 deleted file mode 100644 index 02ee0a2073..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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 ---- -
{{AddonSidebar}}
- -

L'objet ExtensionSidebarPane représente un volet qu'une extension a ajouté à la barre latérale dans l'inspecteur HTML/CSS du navigateur.

- -

- -

Pour créer un ExtensionSidebarPane, appelez la fonction browser.devtools.panels.elements.createSidebarane().

- -

Fonctions

- -
-
devtools.panels.ExtensionSidebarPane.setExpression()
-
-

É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.

-
-
devtools.panels.ExtensionSidebarPane.setObject()
-
-

Définit un objet JSON qui sera affiché dans le volet de la barre latérale.

-
-
devtools.panels.ExtensionSidebarPane.setPage()
-
-

Charge la page pointée par l'URL fournie.

-
-
- -

Evénements

- -
-
devtools.panels.ExtensionSidebarPane.onShown
-
Lancé lorsque le volet latéral est affiché.
-
devtools.panels.ExtensionSidebarPane.onHidden
-
Lancé lorsque le volet de la barre latérale est masqué.
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane", 10)}}

- -

{{WebExtExamples("h2")}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - 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 deleted file mode 100644 index a1a18463e5..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onhidden/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

Appelé lorsque le volet de la barre latérale est masqué, suite à l'abandon de l'utilisateur.

- -

Syntaxe

- -
browser.devtools.panels.onHidden.addListener(listener)
-browser.devtools.panels.onHidden.removeListener(listener)
-browser.devtools.panels.onHidden.hasListener(listener)
-
- -

Les événements ont trois fonctions:

- -
-
addListener(callback)
-
Ajoute un écouteur à cet événement.
-
removeListener(listener)
-
Arrête d'écouter cet événement. L'argument listener est l'écouteur à supprimer.
-
hasListener(listener)
-
Vérifie si listener est enregistré pour cet événement. Renvoie true s'il écoute,  sinon false.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction appelée lorsque cet événement se produit. Cette fonction sera passée sans arguments.

-
-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.onHidden", 10)}}

- -

Exemples

- -

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

- -
function onCreated(sidebarPane) {
-
-  sidebarPane.onShown.addListener(() => {
-    console.log("Shown");
-  });
-
-  sidebarPane.onHidden.addListener(() => {
-    console.log("Hidden");
-  });
-
-}
-
-browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
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 deleted file mode 100644 index 3ca3412af2..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onshown/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

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

- -

Syntaxe

- -
browser.devtools.panels.onShown.addListener(listener)
-browser.devtools.panels.onShown.removeListener(listener)
-browser.devtools.panels.onShown.hasListener(listener)
-
- -

Les événements ont trois fonctions :

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

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction qui sera appelée lorsque cet événement se produit. La fonction sera passée sans arguments.

-
-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.onShown", 10)}}

- -

Exemples

- -

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

- -
function onCreated(sidebarPane) {
-
-  sidebarPane.onShown.addListener(() => {
-    console.log("Shown");
-  });
-
-  sidebarPane.onHidden.addListener(() => {
-    console.log("Hidden");
-  });
-
-}
-
-browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
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 deleted file mode 100644 index d2c97c5f82..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setexpression/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

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.

- -

Le contexte d'exécution de l'expression est le même que celui de inspectedWindow.eval().

- -

 Les objets JSON et les noeuds DOM sont affichés en tant qu'arborescence extensible, comme dans la visionneuse jSON dans Firefox. Vous pouvez éventuellement spécifier une chaîne rootTitle : elle sera affichée comme le titre de la racine de l'arbre.

- -

C'est une fonction asynchrone qui renvoie une Promise.

- -

Syntaxe

- -
var evaluating = browser.devtools.panels.setExpression(
-  expression,       // string
-  rootTitle         // string
-)
-
- -

Paramètres

- -
-
expression
-
string. L'expression à évaluer.
-
rootTitle {{optional_inline}}
-
string. Le titre de la racine de l'arbre dans lequel les résultats sont affichés.
-
- -

Valeur retournée

- -

Une Promise sera remplie sans arguments, une fois l'expression évaluée.

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setExpression", 10)}}

- - - -

Exemples

- -

Ce code crée un volet de barre latérale qui affiche le tagName de l'élément actuellement sélectionné :

- -
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);
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - 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 deleted file mode 100644 index 90252a0c2f..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setobject/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

Affiche un objet JSON dans le volet de la barre latérale de l'extension.

- -

L'objet est affiché en tant qu'arborescence extensible, comme dans le JSON viewer dans Firefox. Vous pouvez éventuellement spécifier une chaîne rootTitle : elle sera affichée comme le titre de la racine de l'arbre.

- -

C'est une fonction asynchrone qui renvoie une Promise.

- -

Syntaxe

- -
var setting = browser.devtools.panels.setObject(
-  jsonObject,       // string, array, or JSON object
-  rootTitle         // string
-)
-
- -

Paramètres

- -
-
jsonObject
-
String ou Array ou Object. L'objet à afficher. S'il s'agit d'un objet JSON-serialized, donc les propriétés comme les fonctions seront omises.
-
rootTitle {{optional_inline}}
-
String. Le titre de la racine de l'arbre dans lequel l'objet est affiché.
-
- -

Valeur retournée

- -

Une Promise qui sera accomplie sans arguments, une fois l'objet défini.

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setObject", 10)}}

- - - -

Exemples

- -

Créez un nouveau volet et remplissez-le avec un objet JSON. Vous pouvez exécuter ce code dans un script chargé par la page devtools. de votre extension

- -
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);
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - 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 deleted file mode 100644 index e4f98e3ff3..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setpage/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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 ---- -

Définit une page HTML à afficher dans le volet latéral.

- -

C'est une fonction asynchrone qui renvoie une Promise.

- -

Syntaxe

- -
browser.devtools.panels.setPage(
-  path // string containing relative path to page
-)
-
- -

Paramètres

- -
-
extensionPageURL
-
string. Le chemin relatif d'une page HTML à afficher dans la barre latérale.
-
- -

Valeur retournée

- -

Une Promise qui sera tenue sans arguments, une fois l'URL définie.

- -

La page sélectionnée ne sera pas chargée tant que l'utilisateur n'aura pas sélectionné la barre latérale devtools.

- -

Exemples

- -

Créez un nouveau volet et remplissez-le d'une page HTML. Vous pouvez exécuter ce code dans un script chargé par la page devtools de votre extension.

- -
function onCreated(sidebarPane) {
-  sidebarPane.setPage('sidebar/sidebar.html');
-}
-
- -

{{WebExtExamples}}

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setPage", 10)}}

- - - - - -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - 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 deleted file mode 100644 index 9f2c06e2a0..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -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 ---- -
{{AddonSidebar}}
- -
-

Bien que les API soient basées sur les APIs de devtools de Chrome, 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  Limitations des APIs devtools.

-
- -

L'API devtools.panels permet à une extension devtools de définir son interface utilisateur à l'intérieur de la fenêtre devtools.

- -

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".

- -

Avec l'API devtools.panels, vous pouvez créer de nouveaux panneaux dans la fenêtre des devtools.

- -

Comme toutes les API de devtools, cette API est uniquement disponible pour le code exécuté dans le document défini dans la clé devtools_page du manifest.json, ou dans d'autres documents de déploiement créés par une extension (tel que le document du panneau). Voir Extension des outils de développement pour plus for d'informations.

- -

Types

- -
-
devtools.panels.ElementsPanel
-
Représente l'inspecteur HTML/CSS dans le devtools du navigateur
-
devtools.panels.ExtensionPanel
-
Représente un panneau de déploiement créé par l'extension.
-
devtools.panels.ExtensionSidebarPane
-
Représente un volet ajouté par une extension à l'inspecteur HTML/CC dans les devtools du navigateur.
-
- -

Propriétés

- -
-
devtools.panels.elements
-
Une référence à un objet ElementsPanel.
-
devtools.panels.themeName
-
Le nom du thème actuel des devtools.
-
- -

Fonctions

- -
-
devtools.panels.create()
-
Créé un nouveau panneau de développement
-
- -

Evénements

- -
-
devtools.panels.onThemeChanged
-
Mise en place lorsque le thème Devtools change.
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels", 2)}}

- -

{{WebExtExamples("h2")}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

- -

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.

-
- - 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 deleted file mode 100644 index 75c9b94ccc..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/onthemechanged/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

Remplacement quand le thème de devtools change

- -

Syntaxe

- -
browser.devtools.panels.onThemeChanged.addListener(listener)
-browser.devtools.panels.onThemeChanged.removeListener(listener)
-browser.devtools.panels.onThemeChanged.hasListener(listener)
-
- -

Les événements ont trois fonctions :

- -
-
addListener(callback)
-
Ajoute un auditeur à cet événement
-
removeListener(listener)
-
Arrêtez d'écouter cet événement. L'argument de l'auditeur est l'auditeur à supprimer.
-
hasListener(listener)
-
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie Vrai si elle écoute, sinon Faux.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Function qui sera appelée lors de l'événement. La fonction passera les arguments suivants :

- -
-
themeName
-
string. Nom du nouveau thème : ce sera l'une des valeurs autorisées pour  devtools.panels.themeName.
-
-
-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.onThemeChanged")}}

- -

Exemples

- -
browser.devtools.panels.onThemeChanged.addListener((newThemeName) => {
-  console.log(`New theme: ${newThemeName}`);
-});
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

- -

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.

-
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 deleted file mode 100644 index abddedc962..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/themename/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -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 ---- -
{{AddonSidebar()}}
- -

Le nom du thème de devtools actuellement sélectionné.

- -

Il s'agit d'une chaîne dont les valeurs possibles sont :

- - - -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.themeName")}}

- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

- -

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.

-
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 +--- +
{{AddonSidebar()}}
+ +

Exécute JavaScript dans la fenêtre à laquelle les devtools sont attachés.

+ +

C'est un peu comme utiliser {{WebExtAPIRef("tabs.executeScript()")}} pour joindre un script de contenu, mais avec deux différences principales:

+ +

Tout d'abord, le JavaScript peut utiliser un ensemble de commandes spéciales que les navigateurs fournissent généralement dans leur implémentation de console devtools : par exemple, en utilisant "$0" pour designer l'élément actuellement sélectionné dans l'inspecteur.

+ +

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 telle qu'elle existerait si aucun script de page n'était pas chargé. 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().

+ +

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.

+ +

Vous ne pouvez pas appeler eval() sur les fenêtres de navigateur privilégiées telles que "about: addons".

+ +

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.

+ +

La fonction eval() renvoie une Promise qui résout le résultat évalué du script ou une erreur.

+ +

Aides

+ +

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:

+ +
+
$0
+
Contient une référence à l'élément actuellement sélectionné dans l'inspecteur Devtools.
+
inspect()
+
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.
+
+ +

Voir quelques exemples.

+ +

Syntaxe

+ +
var evaluating = browser.devtools.inspectedWindow.eval(
+  expression,       // string
+  options           // object
+)
+
+ +

Paramètres

+ +
+
expression
+
string. 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.
+
options{{optional_inline}}
+
object. Options pour la fonction  (Notez que Firefox ne supporte pas encore cette option), comme suit :
+
+
+
frameURL{{optional_inline}}
+
string. 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.
+
useContentScriptContext{{optional_inline}}
+
boolean. 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.
+
contextSecurityOrigin {{optional_inline}}
+
string. 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 useContentScriptContext.
+
+
+
+ +

Valeur retournée

+ +

Une Promise qui sera remplie avec un tableau contenant deux éléments.

+ +

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.

+ +

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 :

+ + + +

Compatibilité des navigateurs

+ +

{{Compat("webextensions.api.devtools.inspectedWindow.eval")}}

+ + + +

Exemples

+ +

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.

+ +
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);
+});
+ +

Exemples d'aide

+ +

Cela utilise l'aide de $0 pour définir la couleur d'arrière-plan de l'élément, actuellement sélectionné dans l'inspecteur :

+ +
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);
+});
+
+ +

Cela utilise l'assistant l'inspection() pour sélectionner le premier élément <h1> dans la page:

+ +
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);
+});
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.

+ +

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.

+
+ + 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 +--- +
{{AddonSidebar}}
+ +
+

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 APIs de devtools de Chrome, 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  Limitations des APIs devtools.

+
+ +

L'API devtools.inspectedWindow permet à un extension de devtools d'interagir avec la fenêtre sur laquelle les outils de développement sont attachés.

+ +

Comme toutes les APIs de devtools, cette API n'est disponible que pour exécuter le code dans le document défini dans la clé devtools_page 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 Extension des outils de développement  pour plus d'informations.

+ +

Propriétés

+ +
+
devtools.inspectedWindow.tabId
+
L'ID de la fenêtre sur laquelle sont attachés les outils du développeur.
+
+ +

Fonctions

+ +
+
devtools.inspectedWindow.eval()
+
Evaluez certains JavaScript dans la fenêtre de destination.
+
devtools.inspectedWindow.reload()
+
Rechargez le document de la fenêtre destination.
+
+ +

Comptatibilité navigateur

+ +

{{Compat("webextensions.api.devtools.inspectedWindow")}}

+ +

{{WebExtExamples("h2")}}

+ + + +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.inspectedWindow.

+ +

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.

+
+ + 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 +--- +
{{AddonSidebar()}}
+ +

Recharge la fenêtre à laquelle les devtools sont attachés.

+ +

Syntaxe

+ +
browser.devtools.inspectedWindow.reload(
+  reloadOptions       // object
+)
+
+ +

Paramètres

+ +
+
reloadOptions{{optional_inline}}
+
object. Options pour la fonction, comme suit
+
+
+
ignoreCache{{optional_inline}}
+
boolean. S'il est vrai, cela fait que le rechargement ignore le cache du navigateur (comme si l'utilisateur avait appuyé sur Shift+Ctrl+R).
+
userAgent{{optional_inline}}
+
string. Définissez un agent utilisateur personnalisé pour la page. Ici, la chaîne fournie sera envoyée dans l'en-tête de l'Agent utilisateur, et sera renvoyée par les appels à navigator.userAgent réalisé par des scripts s'exécutant sur la page.
+
injectedScript {{optional_inline}}
+
string. Injectez l'expression JavaScript donnée dans toutes les images de la page, avant tout autre script.
+
+
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.inspectedWindow.reload")}}

+ + + +

Exemples

+ +

Rechargez la fenêtre inspectée, définissez l'agent utilisateur et injectez un script

+ +
const reloadButton = document.querySelector("#reload-button");
+
+reloadButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.reload({
+    injectedScript:"alert(navigator.userAgent);",
+    userAgent: "Not a real UA"
+  });
+});
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.

+ +

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.

+
+ + 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 +--- +
{{AddonSidebar()}}
+ +

L'ID de {{WebExtAPIRef("tabs.Tab", "tab")}} est que cette instance des devtools est jointe, représenté comme un nombre.

+ +

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 :

+ +
// 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
+  });
+});
+ +
// background.js
+
+function handleMessage(request, sender, sendResponse) {
+  browser.tabs.executeScript(request.tabId, {
+    code: request.script
+  });
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.inspectedWindow.tabId")}}

+ + + +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.

+ +

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.

+
+ + 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 +--- +
{{AddonSidebar()}}
+ +

Obtenez un journal HAR pour la page chargée dans l'onglet en cours.

+ +

C'est une fonction asynchrone qui renvoie une Promise.

+ +

Syntaxe

+ +
var getting = browser.devtools.network.getHAR()
+
+ +

Paramètres

+ +

None.

+ +

Valeur retournée

+ +

Une Promise 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 spécification HAR.

+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.network.getHAR")}}

+ +

Exemples

+ +

Consignez les URL des demandes contenues dans le journal HAR :

+ +
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);
+
+ +

{{WebExtExamples}}

+ +
Remerciements : + +

Cette API est basée sur l'API Chromium chrome.devtools.network.

+
+ + 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 +--- +
{{AddonSidebar}}
+ +

L'API devtools.network 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).

+ +

Comme toutes les APIs de devtools, cette API est uniquement disponible pour le code exécuté dans le document défini dans la clé devtools_page du manifest.json, ou dans d'autres documents de devtools créés par l'extension (tel que le document du panneau). Voir Extension des outils de développement pour plus d'informations.

+ +

Fonctions

+ +
+
devtools.network.getHAR()
+
Obtenez le  journal HAR pour la page chargée dans l'onglet en cours..
+
+ +

Evénements

+ +
+
devtools.network.onNavigated
+
Attiré lorsque l'utilisateur navigue dans la fenêtre inspectée vers une nouvelle page.
+
devtools.network.onRequestFinished
+
Lancé lorsque la demande réseau est terminée et que ses détails sont disponibles pour l'extension.
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.network")}}

+ +

{{WebExtExamples("h2")}}

+ +
Remerciements : + +

Cette API est basée sur l'API Chromium chrome.devtools.network.

+
+ + 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 +--- +
{{AddonSidebar()}}
+ +

Mise en place lorsque l'utilisateur navigue dans la fenêtre inspectée vers une nouvelle page

+ +

Syntaxe

+ +
browser.devtools.network.onNavigated.addListener(listener)
+browser.devtools.network.onNavigated.removeListener(listener)
+browser.devtools.network.onNavigated.hasListener(listener)
+
+ +

Les événements ont trois fonctions :

+ +
+
addListener(listener)
+
Ajouter un auditeur à cet événement.
+
removeListener(listener)
+
Arrêter d'écouter un événement. L'argument de l'auditeur est l'auditeur à supprimer.
+
hasListener(listener)
+
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie vrai si elle écoute, sinon faux.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction qui sera appelée lors de l'événement. La fonction passera les arguments suivants :

+ +
+
url
+
string. La nouvelle URL pour la fenêtre.
+
+
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.network.onNavigated")}}

+ + + +

Exemples

+ +
function handleNavigated(url) {
+  console.log(url);
+}
+
+browser.devtools.network.onNavigated.addListener(handleNavigated);
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API chrome.devtools de Chromium.

+ +

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.

+
+ + 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 +--- +
{{AddonSidebar()}}
+ +

Lancé lorsqu'une requête réseau est terminée et que ses détails sont disponibles pour l'extension.

+ +

La requête est donnée en tant qu'objet d'entrée HAR, qui est également doté d'une méthode getContent() asynchrone qui récupère le contenu du corps de la réponse.

+ +

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 moniteur réseau du navigateur au moins une fois.

+ +

Syntaxe

+ +
browser.devtools.network.onRequestFinished.addListener(listener)
+browser.devtools.network.onRequestFinished.removeListener(listener)
+browser.devtools.network.onRequestFinished.hasListener(listener)
+
+ +

Les événements ont trois fonctions

+ +
+
addListener(listener)
+
Ajoute un écouteur à cet événement.
+
removeListener(listener)
+
Arrêtez d'écouter cet événement. L'argument de listener  est l'écouteur à supprimer.
+
hasListener(listener)
+
Vérifiez si listener est enregistré pour cet événement. Renvoie trues'il écoute, sinon false.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction qui sera appelée lorsque cet événement se produit. La fonction recevra les arguments suivants :

+ +
+
request
+
object. Un objet représentant la requête. Cet objet est un seul objet d'entrée HAR. Il définit également une méthode getContent() asynchrone, qui renvoie une Promise qui se résout avec le corps de la réponse.
+
+
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.network.onRequestFinished")}}

+ + + +

Examples

+ +

Ajoutez un écouteur qui consigne l'adresse IP du serveur et le corps de la réponse pour chaque requête réseau.

+ +
function handleRequestFinished(request) {
+  console.log("Server IP: ", request.serverIPAddress);
+  request.getContent().then(content => {
+    console.log("Content: ", content);
+  });
+}
+
+browser.devtools.network.onRequestFinished.addListener(handleRequestFinished);
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API chrome.devtools de Chromium.

+
+ + 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 +--- +
{{AddonSidebar()}}
+ +

Ajoute un nouveau panneau aux devtools.

+ +

Cette fonction prend : un titre, une URL vers un fichier d'icône et une URL vers un fichier HTML. Il crée un nouveau panneau dans les devtools, dont le contenu est spécifié par le fichier HTML. Il renvoie une Promise qui résout un objet ExtensionPanel représentant le nouveau panneau.

+ +

Syntaxe

+ +
var creating = browser.devtools.panels.create(
+  title,       // string
+  iconPath,    // string
+  pagePath     // string
+)
+
+ +

Parametères

+ +
+
title
+
string. 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.
+
iconPath
+
string. 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").
+
pagePath
+
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 Extention des outils de développement.
+
+ +

Valeur retournée

+ +

Une Promise qui sera remplie avec un objet ExtensionPanel représentant le nouveau panneau.

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.create")}}

+ + + +

Exemples

+ +

Créer un nouveau panneau, et ajoute des auditeurs à ces événements onShown et  onHidden :

+ +
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);
+});
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+ +

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.

+
+ + 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 +--- +
{{AddonSidebar()}}
+ +

Un objet ElementsPanel qui représente l'inspecteur HTML/CSS du navigateur

+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.elements", 10)}}

+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
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 +--- +
{{AddonSidebar()}}
+ +

Ajoute un nouveau volet à la barre latérale dans l'inspecteur HTML / CSS.

+ +

L'inspecteur HTML / CSS, appelé l'inspecteur de page dans Firefox et le panneau éléments 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.

+ +

La fonction createSidebarPane() 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 :

+ +

+ +

Cette fonction prend un argument, qui est une chaîne représentant le titre du volet. Il renvoie une Promise qui se résout en un objet ExtensionSidebarPane représentant le nouveau volet. Vous pouvez utiliser cet objet pour définir le contenu et le comportement du volet.

+ +

Syntaxe

+ +
var creating = browser.devtools.panels.elements.createSidebarPane(
+  title       // string
+)
+
+ +

Paramètres

+ +
+
title
+
string. 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.
+
+ +

Valeur retournée

+ +

Une Promise qui sera remplie avec un objet ExtensionSidebarPane représentant le nouveau volet.

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ElementsPanel.createSidebarPane", 10)}}

+ + + +

Exemples

+ +

Créez un nouveau volet et remplissez-le avec un objet JSON. Vous pouvez exécuter ce code dans un script chargé par la page devtools.

+ +
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);
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + 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 +--- +
{{AddonSidebar()}}
+ +

Un ElementsPanel 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.

+ +

Fonctions

+ +
+
devtools.panels.ElementsPanel.createSidebarPane()
+
Crée un volet dans la barre latérale de l'inspecteur.
+
+

Evénements

+
+
devtools.panels.ElementsPanel.onSelectionChanged
+
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".
+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.ElementsPanel", 10)}}

+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + 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 +--- +
{{AddonSidebar()}}
+ +

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.

+ +

Syntaxe

+ +
browser.devtools.panels.elements.onSelectionChanged.addListener(listener)
+browser.devtools.panels.elements.onSelectionChanged.removeListener(listener)
+browser.devtools.panels.elements.onSelectionChanged.hasListener(listener)
+
+ +

L'événement a trois fonctions :

+ +
+
addListener(listener)
+
Ajoute une écoute à cet événement.
+
removeListener(listener)
+
Arrête une écoute à l'événement. L'argument de l'auditeur est un auditeur supprimer.
+
hasListener(listener)
+
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie la valeur Vrai si elle l'écoute, sinon Faux.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction qui sera appelée lors de l'événement. La fonction ne passera pas d'arguments.

+
+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.ElementsPanel.onSelectionChanged", 10)}}

+ +

Exemples

+ +

Ecoutez la sélection des événements modifiés, et enregistrez le contenu du texte de l'élément nouvellement sélectionné :

+ +
function handleSelectedElement() {
+  browser.devtools.inspectedWindow.eval("$0.textContent")
+    .then((result) => {
+      console.log(result[0]);
+    });
+}
+
+browser.devtools.panels.elements.onSelectionChanged.addListener(handleSelectedElement);
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.

+
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 +--- +
{{AddonSidebar()}}
+ +

Une ExtensionPanel représente un panneau ajouté aux devtools. C'est la résolution de la Promise renvoyé par browser.devtools.panels.create().

+ +

Type

+ +

Les valeurs de ce type sont des objets. Définissez deux événements, onShown et onHidden.

+ + + +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ExtensionPanel")}}

+ + + +

Exemples

+ +

Ce code crée un nouveau panneau, puis ajoute des gestionnaires pour ces événements onShown et onHidden.

+ +
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);
+});
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+ +

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.

+
+ + 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 +--- +
{{AddonSidebar}}
+ +

L'objet ExtensionSidebarPane représente un volet qu'une extension a ajouté à la barre latérale dans l'inspecteur HTML/CSS du navigateur.

+ +

+ +

Pour créer un ExtensionSidebarPane, appelez la fonction browser.devtools.panels.elements.createSidebarane().

+ +

Fonctions

+ +
+
devtools.panels.ExtensionSidebarPane.setExpression()
+
+

É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.

+
+
devtools.panels.ExtensionSidebarPane.setObject()
+
+

Définit un objet JSON qui sera affiché dans le volet de la barre latérale.

+
+
devtools.panels.ExtensionSidebarPane.setPage()
+
+

Charge la page pointée par l'URL fournie.

+
+
+ +

Evénements

+ +
+
devtools.panels.ExtensionSidebarPane.onShown
+
Lancé lorsque le volet latéral est affiché.
+
devtools.panels.ExtensionSidebarPane.onHidden
+
Lancé lorsque le volet de la barre latérale est masqué.
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane", 10)}}

+ +

{{WebExtExamples("h2")}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + 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 +--- +
{{AddonSidebar()}}
+ +

Appelé lorsque le volet de la barre latérale est masqué, suite à l'abandon de l'utilisateur.

+ +

Syntaxe

+ +
browser.devtools.panels.onHidden.addListener(listener)
+browser.devtools.panels.onHidden.removeListener(listener)
+browser.devtools.panels.onHidden.hasListener(listener)
+
+ +

Les événements ont trois fonctions:

+ +
+
addListener(callback)
+
Ajoute un écouteur à cet événement.
+
removeListener(listener)
+
Arrête d'écouter cet événement. L'argument listener est l'écouteur à supprimer.
+
hasListener(listener)
+
Vérifie si listener est enregistré pour cet événement. Renvoie true s'il écoute,  sinon false.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction appelée lorsque cet événement se produit. Cette fonction sera passée sans arguments.

+
+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.onHidden", 10)}}

+ +

Exemples

+ +

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

+ +
function onCreated(sidebarPane) {
+
+  sidebarPane.onShown.addListener(() => {
+    console.log("Shown");
+  });
+
+  sidebarPane.onHidden.addListener(() => {
+    console.log("Hidden");
+  });
+
+}
+
+browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
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 +--- +
{{AddonSidebar()}}
+ +

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

+ +

Syntaxe

+ +
browser.devtools.panels.onShown.addListener(listener)
+browser.devtools.panels.onShown.removeListener(listener)
+browser.devtools.panels.onShown.hasListener(listener)
+
+ +

Les événements ont trois fonctions :

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

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction qui sera appelée lorsque cet événement se produit. La fonction sera passée sans arguments.

+
+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.onShown", 10)}}

+ +

Exemples

+ +

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

+ +
function onCreated(sidebarPane) {
+
+  sidebarPane.onShown.addListener(() => {
+    console.log("Shown");
+  });
+
+  sidebarPane.onHidden.addListener(() => {
+    console.log("Hidden");
+  });
+
+}
+
+browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
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 +--- +
{{AddonSidebar()}}
+ +

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.

+ +

Le contexte d'exécution de l'expression est le même que celui de inspectedWindow.eval().

+ +

 Les objets JSON et les noeuds DOM sont affichés en tant qu'arborescence extensible, comme dans la visionneuse jSON dans Firefox. Vous pouvez éventuellement spécifier une chaîne rootTitle : elle sera affichée comme le titre de la racine de l'arbre.

+ +

C'est une fonction asynchrone qui renvoie une Promise.

+ +

Syntaxe

+ +
var evaluating = browser.devtools.panels.setExpression(
+  expression,       // string
+  rootTitle         // string
+)
+
+ +

Paramètres

+ +
+
expression
+
string. L'expression à évaluer.
+
rootTitle {{optional_inline}}
+
string. Le titre de la racine de l'arbre dans lequel les résultats sont affichés.
+
+ +

Valeur retournée

+ +

Une Promise sera remplie sans arguments, une fois l'expression évaluée.

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setExpression", 10)}}

+ + + +

Exemples

+ +

Ce code crée un volet de barre latérale qui affiche le tagName de l'élément actuellement sélectionné :

+ +
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);
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + 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 +--- +
{{AddonSidebar()}}
+ +

Affiche un objet JSON dans le volet de la barre latérale de l'extension.

+ +

L'objet est affiché en tant qu'arborescence extensible, comme dans le JSON viewer dans Firefox. Vous pouvez éventuellement spécifier une chaîne rootTitle : elle sera affichée comme le titre de la racine de l'arbre.

+ +

C'est une fonction asynchrone qui renvoie une Promise.

+ +

Syntaxe

+ +
var setting = browser.devtools.panels.setObject(
+  jsonObject,       // string, array, or JSON object
+  rootTitle         // string
+)
+
+ +

Paramètres

+ +
+
jsonObject
+
String ou Array ou Object. L'objet à afficher. S'il s'agit d'un objet JSON-serialized, donc les propriétés comme les fonctions seront omises.
+
rootTitle {{optional_inline}}
+
String. Le titre de la racine de l'arbre dans lequel l'objet est affiché.
+
+ +

Valeur retournée

+ +

Une Promise qui sera accomplie sans arguments, une fois l'objet défini.

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setObject", 10)}}

+ + + +

Exemples

+ +

Créez un nouveau volet et remplissez-le avec un objet JSON. Vous pouvez exécuter ce code dans un script chargé par la page devtools. de votre extension

+ +
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);
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + 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 +--- +

Définit une page HTML à afficher dans le volet latéral.

+ +

C'est une fonction asynchrone qui renvoie une Promise.

+ +

Syntaxe

+ +
browser.devtools.panels.setPage(
+  path // string containing relative path to page
+)
+
+ +

Paramètres

+ +
+
extensionPageURL
+
string. Le chemin relatif d'une page HTML à afficher dans la barre latérale.
+
+ +

Valeur retournée

+ +

Une Promise qui sera tenue sans arguments, une fois l'URL définie.

+ +

La page sélectionnée ne sera pas chargée tant que l'utilisateur n'aura pas sélectionné la barre latérale devtools.

+ +

Exemples

+ +

Créez un nouveau volet et remplissez-le d'une page HTML. Vous pouvez exécuter ce code dans un script chargé par la page devtools de votre extension.

+ +
function onCreated(sidebarPane) {
+  sidebarPane.setPage('sidebar/sidebar.html');
+}
+
+ +

{{WebExtExamples}}

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setPage", 10)}}

+ + + + + +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + 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 +--- +
{{AddonSidebar}}
+ +
+

Bien que les API soient basées sur les APIs de devtools de Chrome, 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  Limitations des APIs devtools.

+
+ +

L'API devtools.panels permet à une extension devtools de définir son interface utilisateur à l'intérieur de la fenêtre devtools.

+ +

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".

+ +

Avec l'API devtools.panels, vous pouvez créer de nouveaux panneaux dans la fenêtre des devtools.

+ +

Comme toutes les API de devtools, cette API est uniquement disponible pour le code exécuté dans le document défini dans la clé devtools_page du manifest.json, ou dans d'autres documents de déploiement créés par une extension (tel que le document du panneau). Voir Extension des outils de développement pour plus for d'informations.

+ +

Types

+ +
+
devtools.panels.ElementsPanel
+
Représente l'inspecteur HTML/CSS dans le devtools du navigateur
+
devtools.panels.ExtensionPanel
+
Représente un panneau de déploiement créé par l'extension.
+
devtools.panels.ExtensionSidebarPane
+
Représente un volet ajouté par une extension à l'inspecteur HTML/CC dans les devtools du navigateur.
+
+ +

Propriétés

+ +
+
devtools.panels.elements
+
Une référence à un objet ElementsPanel.
+
devtools.panels.themeName
+
Le nom du thème actuel des devtools.
+
+ +

Fonctions

+ +
+
devtools.panels.create()
+
Créé un nouveau panneau de développement
+
+ +

Evénements

+ +
+
devtools.panels.onThemeChanged
+
Mise en place lorsque le thème Devtools change.
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels", 2)}}

+ +

{{WebExtExamples("h2")}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+ +

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.

+
+ + 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 +--- +
{{AddonSidebar()}}
+ +

Remplacement quand le thème de devtools change

+ +

Syntaxe

+ +
browser.devtools.panels.onThemeChanged.addListener(listener)
+browser.devtools.panels.onThemeChanged.removeListener(listener)
+browser.devtools.panels.onThemeChanged.hasListener(listener)
+
+ +

Les événements ont trois fonctions :

+ +
+
addListener(callback)
+
Ajoute un auditeur à cet événement
+
removeListener(listener)
+
Arrêtez d'écouter cet événement. L'argument de l'auditeur est l'auditeur à supprimer.
+
hasListener(listener)
+
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie Vrai si elle écoute, sinon Faux.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Function qui sera appelée lors de l'événement. La fonction passera les arguments suivants :

+ +
+
themeName
+
string. Nom du nouveau thème : ce sera l'une des valeurs autorisées pour  devtools.panels.themeName.
+
+
+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.onThemeChanged")}}

+ +

Exemples

+ +
browser.devtools.panels.onThemeChanged.addListener((newThemeName) => {
+  console.log(`New theme: ${newThemeName}`);
+});
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+ +

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.

+
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 +--- +
{{AddonSidebar()}}
+ +

Le nom du thème de devtools actuellement sélectionné.

+ +

Il s'agit d'une chaîne dont les valeurs possibles sont :

+ + + +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.themeName")}}

+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+ +

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.

+
diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/menus.overridecontext()/index.html b/files/fr/mozilla/add-ons/webextensions/api/menus/menus.overridecontext()/index.html deleted file mode 100644 index 8d8463f069..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/menus/menus.overridecontext()/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: menus.overrideContext() -slug: Mozilla/Add-ons/WebExtensions/API/menus/menus.overrideContext() -tags: - - API - - Add-ons - - Extensions - - Méthode - - WebExtensions - - contextMenus -translation_of: Mozilla/Add-ons/WebExtensions/API/menus/menus.overrideContext() ---- -
{{AddonSidebar()}}
- -

Cette API permet aux extensions de masquer tous les éléments de menu par défaut de Firefox afin de fournir une interface utilisateur de menu contextuel personnalisée. Ce menu contextuel peut comprendre plusieurs éléments de menu de niveau supérieur de l'extension et éventuellement inclure des éléments de menu contextuel d'onglet ou de signet provenant d'autres extensions. Cela doit être appelé lors d'un gestionnaire d'événements DOM du menu contextmenu, et s'applique uniquement au menu qui s'ouvre après cet événement.

- -

Cette API ne peut être appelée que si l'addon dispose de la permission "menus.overrideContext".

- -

Syntaxe

- -
browser.menus.overrideContext(
-  contextOptions // object
-)
-
- -

Paramètres

- -
-
contextOptions
-
object.Propriétés qui définissent le contexte du menu contextuel.
-
-
-
bookmarkId {{optional_inline}}
-
string Requis lorsque le contexte est un signet. Nécessite la permission  "bookmark" .
-
context {{optional_inline}}
-
string. pour passer outre, pour autoriser les éléments de menu d'autres extensions dans le menu. Actuellement, seuls "bookmark" et "tab" sont supportés. showDefaults ne peut pas être utilisé avec cette option.
-
showDefaults {{optional_inline}}
-
boolean. S'il faut également inclure des éléments de menu par défaut dans le menu.
-
tabId {{optional_inline}}
-
string Requis lorsque le contexte est "tab". Nécessite la permission "tabs" .
-
-
-
- -

Exemples

- -

Ouvrez le menu contextuel de l'onglet de votre interface utilisateur personnalisée, dans ce cas :

- -
document.addEventListener('contextmenu', event => {
-  const foo = event.target.closest('.foo');
-  if (foo) {
-    // When the context menu is opened on an element with the foo class
-    // set the context to "opening a tab context menu".
-    browser.menus.overrideContext({
-      context: 'tab',
-      tabId: parseInt(foo.dataset.tabId)
-    });
-  }
-}, { capture: true });
-
- -

Voir ce billet de blog pour plus de détails.

diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/onerror/index.html b/files/fr/mozilla/add-ons/webextensions/api/proxy/onerror/index.html new file mode 100644 index 0000000000..fb5e7df4e5 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/proxy/onerror/index.html @@ -0,0 +1,60 @@ +--- +title: proxy.onProxyError +slug: Mozilla/Add-ons/WebExtensions/API/proxy/onProxyError +tags: + - API + - Add-ons + - Event + - Proxy + - Reference + - WebExtensions + - onProxyError +translation_of: Mozilla/Add-ons/WebExtensions/API/proxy/onError +--- +
{{AddonSidebar()}}
+ +

Lancé en cas d'erreur lors de l'évaluation du fichier PAC ou l'écouteur onRequest.

+ +

L'erreur peut être déclenchée en lançant ou renvoyant une valeur invalide dans le gestionnaire d'événements proxy.onRequest.

+ +

Syntaxe

+ +
browser.proxy.onError.addListener(listener)
+browser.proxy.onError.removeListener(listener)
+browser.proxy.onError.hasListener(listener)
+
+ +

Les événements ont trois fonctions :

+ +
+
addListener(listener)
+
Ajoute un écouteur à cet événement.
+
removeListener(listener)
+
Arrêtez d'écouter cet événement. L'argument listener est l'écouteur à supprimer.
+
hasListener(listener)
+
Vérifiez si l'écouteur est enregistré pour cet événement. Renvoie true s'il écoute, sinon false.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction qui sera appelée lorsque cet événement se produit. La fonction recevra les arguments suivants :

+ +
+
newState
+
Object. Un objet Error représentant l'erreur.
+
+
+
+ +

{{WebExtExamples}}

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.proxy.onError")}}

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/onproxyerror/index.html b/files/fr/mozilla/add-ons/webextensions/api/proxy/onproxyerror/index.html deleted file mode 100644 index fb5e7df4e5..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/proxy/onproxyerror/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: proxy.onProxyError -slug: Mozilla/Add-ons/WebExtensions/API/proxy/onProxyError -tags: - - API - - Add-ons - - Event - - Proxy - - Reference - - WebExtensions - - onProxyError -translation_of: Mozilla/Add-ons/WebExtensions/API/proxy/onError ---- -
{{AddonSidebar()}}
- -

Lancé en cas d'erreur lors de l'évaluation du fichier PAC ou l'écouteur onRequest.

- -

L'erreur peut être déclenchée en lançant ou renvoyant une valeur invalide dans le gestionnaire d'événements proxy.onRequest.

- -

Syntaxe

- -
browser.proxy.onError.addListener(listener)
-browser.proxy.onError.removeListener(listener)
-browser.proxy.onError.hasListener(listener)
-
- -

Les événements ont trois fonctions :

- -
-
addListener(listener)
-
Ajoute un écouteur à cet événement.
-
removeListener(listener)
-
Arrêtez d'écouter cet événement. L'argument listener est l'écouteur à supprimer.
-
hasListener(listener)
-
Vérifiez si l'écouteur est enregistré pour cet événement. Renvoie true s'il écoute, sinon false.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction qui sera appelée lorsque cet événement se produit. La fonction recevra les arguments suivants :

- -
-
newState
-
Object. Un objet Error représentant l'erreur.
-
-
-
- -

{{WebExtExamples}}

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.proxy.onError")}}

- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/settings/index.html b/files/fr/mozilla/add-ons/webextensions/api/proxy/settings/index.html new file mode 100644 index 0000000000..8ebc5822c2 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/proxy/settings/index.html @@ -0,0 +1,73 @@ +--- +title: browserSettings.proxyConfig +slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/proxyConfig +tags: + - API + - Add-ons + - Extensions + - Property + - Reference + - WebExtensions + - browserSettings + - proxyConfig +translation_of: Mozilla/Add-ons/WebExtensions/API/proxy/settings +--- +
{{AddonSidebar()}}
+ +

Un objet {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} qui peut être utilisé pour modifier les paramètres de proxy du navigateur.

+ +
+

Note: La possibilité de modifier les paramètres de proxy nécessite un accès à une fenêtre privée car les paramètres de proxy affectent à la fois les fenêtres privées et non privées. Par conséquent, si une extension n'a pas reçu l'autorisation de fenêtre privée, les appels à  proxy.settings.set() lanceront une exception.

+
+ +

La valeur sous-jacente est un objet avec les propriétés énumérées ci-dessous.

+ +

Lors de la définition de cet objet, toutes les propriétés sont facultatives. Notez que les propriétés omises seront réinitialisées à leur valeur par défaut.

+ +
+
autoConfigUrl{{optional_inline}}
+
string. Une URL à utiliser pour configurer le proxy.
+
autoLogin{{optional_inline}}
+
boolean. Ne pas demander l'authentification si le mot de passe est enregistré. Par défaut à false.
+
ftp{{optional_inline}}
+
string. L'adresse du proxy FTP. Peut inclure un port.
+
http{{optional_inline}}
+
string. L'adresse du proxy HTTP. Peut inclure un port.
+
httpProxyAll{{optional_inline}}
+
boolean. Utilisez le serveur proxy HTTP pour tous les protocoles. Par défaut à false.
+
passthrough{{optional_inline}}
+
string. Une liste d'hôtes séparés par des virgules qui ne doivent pas être mandatés. La valeur par défaut est "localhost, 127.0.0.1".
+
proxyDNS{{optional_inline}}
+
boolean. DNS proxy lors de l'utilisation de SOCKS5. Par défaut à false.
+
proxyType{{optional_inline}}
+
string. Le type de proxy à utiliser. Cela peut prendre l'une des valeurs suivantes : "none", "autoDetect", "system", "manual", "autoConfig". Par défaut à "system".
+
socks{{optional_inline}}
+
string. L'adresse du proxy SOCKS. Peut inclure un port.
+
socksVersion{{optional_inline}}
+
integer. La version du proxy SOCKS. Peut être 4 ou 5. Par défaut à 5.
+
ssl{{optional_inline}}
+
string. L'adresse du proxy SSL. Peut inclure un port.
+
+ +

 

+ +

Exemples

+ +
let proxySettings = {
+  proxyType: "manual",
+  http: "http://proxy.org:8080",
+  socksVersion: 4,
+  passthrough: ".example.org"
+};
+
+browser.proxy.settings.set({value: proxySettings});
+ +

{{WebExtExamples}}

+ +

 

+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.proxy.settings", 10)}}

diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html deleted file mode 100644 index 1af1fed65e..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: APIScript -slug: Mozilla/Add-ons/WebExtensions/API/userScripts/APIScript -tags: - - APIScript - - Add-ons - - Custimisation - - Extensions - - Firefox - - Reference - - WebExtensions - - userScripts -translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts/APIScript ---- -

{{AddOnSidebar}}

- -

L'APIScript userScripts est un type spécial d'extension Content Script.

- -

Comme un script de contenu d'extension régulier :

- - - -

Contrairement à une extension régulière Content Script :

- - - -
manifest.json
-{
-  ...
-  "user_scripts": {
-     "api_script": "apiscript.js"
-  }
-}
- -

Il est exécuté automatiquement sur n'importe quelle page Web correspondant à userScript enregistrée par la même extension, avant qu'un userScript correspondant ne soit exécuté.

- -

Il a accès à l'API Event browser.userScripts.onBeforeScript que l'APIScript peut utiliser pour inscrire un auditeur à appeler juste avant qu'un userScript correspondant soit exécuté, ce qui permet à l'APIScript d'exporter un ensemble de méthodes API personnalisées pour le rendre disponible à l'userScript.

diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/registereduserscript.unregister()/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/registereduserscript.unregister()/index.html deleted file mode 100644 index 0a71ce921b..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/registereduserscript.unregister()/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: unregister -slug: >- - Mozilla/Add-ons/WebExtensions/API/userScripts/RegisteredUserScript/RegisteredUserScript.unregister() -tags: - - API - - Extensions - - Reference - - RegisteredUserScript - - Type - - unregister - - userScripts -translation_of: >- - Mozilla/Add-ons/WebExtensions/API/userScripts/RegisteredUserScript/RegisteredUserScript.unregister() ---- -

{{AddonSidebar}}

- -

La méhode unregister() de l'interface  {{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}}désenregistre le script utilisateur représenté par cette instance d'interface et précédemment enregistré via {{WebExtAPIRef("userScripts.register","userScripts.register()")}}.

- -
-

Note: Les scripts utilisateur sont automatiquement désenregistrés lorsque la page d'extension correspondante (à partir de laquelle les scripts utilisateur ont été enregistrés) est déchargée, vous devez donc enregistrer un script utilisateur depuis une page d'extension qui persiste au moins aussi longtemps que vous voulez que les scripts utilisateur restent enregistrés..

-
- -

Syntaxe

- -
const registeredUserScript = await browser.userScripts.register(
-  userScriptOptions       // object
-);
-…
-await registeredUserScript.unregister()
- -

Paramètres

- -

Aucun.

- -

Valeur retournée

- -

Une {{JSxRef("Promise")}} qui sera résolu une fois le script utilisateur désenregistré. La promesse ne rapporte rien.

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.userScripts.RegisteredUserScript.unregister")}}

- -

Voir aussi

- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/travailler_avec_userscripts/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/travailler_avec_userscripts/index.html deleted file mode 100644 index 8cf9fcc2b2..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/travailler_avec_userscripts/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Travailler avec userScripts -slug: Mozilla/Add-ons/WebExtensions/API/userScripts/travailler_avec_userScripts -tags: - - API - - Extensions - - How-to - - Tutorial - - userScripts -translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts/Working_with_userScripts ---- -

{{draft}}

- -

{{AddonSidebar}}

- -

En implémentant userScripts, les développeurs d'extension peuvent modifier l'apparence et/ou le fonctionnement des sites pour mieux répondre aux besoins des utilisateurs.

- -

Implémentez userScripts dans votre extension en suivant les étapes suivantes :

- -
    -
  1. Définissez le script dans le manifeste de l'extension à l'aide de la clé "user_scripts".
    2. -
  2. Enregistrer le userScript
    3. -
  3. Implémenter les fonctions userScript
    4. -
- -

Passons en revue les processus à l'aide d'un petit exemple d'extension Web qui illustre le processus. L'exemple est disponible dans le dépôt webextensions-examples sur GitHub.

- -

Manifest userScripts

- -

Un script utilisateur est identifié par le contenu de la clé user_scripts du manifeste des extensions. L'information minimale pour la clé user_scripts serait :

- -
  "user_scripts": {
-    "api_script": "customUserScriptAPIs.js"
-  }
- -

La propriété "api_script" indique le chemin d'accès au fichier JavaScript qui contient le code du userScript.

- -

Charge l'extension d'exemple

- -

Une fois que vous avez téléchargé l'exemple  :

- -

Naviguez jusqu'à about:debugging, cliquez sur Charger temporairement une extension... et double-cliquez sur le manifest des extensions.

- -

/Le code par défaut inclus dans l'exemple vous permet de charger un userScript qui va "manger" le contenu des pages correspondant à l'entrée Hosts. Effectuez tous les changements que vous voulez faire avant de cliquer sur le bouton Enregistrer le script au bas du panneau.

- -

Dans l'image suivante, l'extension va "manger" le contenu des pages dont le nom de domaine se termine par.org. C'est le comportement par défaut pour cette extension.

- -

- -

Rien ne se passera tant que vous n'aurez pas cliqué sur le bouton Enregistrer le script. Le bouton implémente le script utilisateur en fonction des paramètres de cette boîte de dialogue. Cela signifie que vous pouvez expérimenter le comportement du script sans avoir à implémenter une extension vous-même.

- -

Register the userScript

- -

Avant qu'un userScript puisse être exécuté, il doit être enregistré en utilisant la méthode  userScripts.register(). Voici le code pour enregistrer l'extension d'exemple :

- -
async function registerScript() {
-  const params = {
-    hosts: stringToArray(hostsInput.value),
-    code: codeInput.value,
-    excludeMatches: stringToArray(excludeMatchesInput.value),
-    includeGlobs: stringToArray(includeGlobsInput.value),
-    excludeGlobs: stringToArray(excludeGlobsInput.value),
-    runAt: runAtInput.value,
-    matchAboutBlank: stringToBool(matchAboutBlankInput.value),
-    allFrames: stringToBool(allFramesInput.value),
-    scriptMetadata: {name: scriptNameInput.value || null},
-  };
-
-  // Store the last submitted values to the extension storage
-  // (so that they can be restored when the popup is opened
-  // the next time).
-  await browser.storage.local.set({
-    lastSetValues: params,
-  });
-
-  try {
-    // Clear the last userScripts.register result.
-    lastResultEl.textContent = "";
-
-    await browser.runtime.sendMessage(params);
-    lastResultEl.textContent = "UserScript successfully registered";
-    // Clear the last userScripts.register error.
-    lastErrorEl.textContent = "";
-
-    // Clear the last error stored.
-    await browser.storage.local.remove("lastError");
-  } catch (e) {
-    // There was an error on registering the userScript,
-    // let's show the error message in the popup and store
-    // the last error into the extension storage.
-
-    const lastError = `${e}`;
-    // Show the last userScripts.register error.
-    lastErrorEl.textContent = lastError;
-
-    // Store the last error.
-    await browser.storage.local.set({lastError});
-  }
-}
- -

Ce code initialise d'abord l'objet params pour passer les valeurs à la méthode  userScripts.register.

- -

Implementer les fonctions userScript

- -

Une fois le script enregistré, naviguez vers une page dont le nom de domaine se termine par .org, et vous verrez quelque chose comme ceci :

- -

- -

Voir aussi

- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.html new file mode 100644 index 0000000000..8cf9fcc2b2 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.html @@ -0,0 +1,115 @@ +--- +title: Travailler avec userScripts +slug: Mozilla/Add-ons/WebExtensions/API/userScripts/travailler_avec_userScripts +tags: + - API + - Extensions + - How-to + - Tutorial + - userScripts +translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts/Working_with_userScripts +--- +

{{draft}}

+ +

{{AddonSidebar}}

+ +

En implémentant userScripts, les développeurs d'extension peuvent modifier l'apparence et/ou le fonctionnement des sites pour mieux répondre aux besoins des utilisateurs.

+ +

Implémentez userScripts dans votre extension en suivant les étapes suivantes :

+ +
    +
  1. Définissez le script dans le manifeste de l'extension à l'aide de la clé "user_scripts".
    2. +
  2. Enregistrer le userScript
    3. +
  3. Implémenter les fonctions userScript
    4. +
+ +

Passons en revue les processus à l'aide d'un petit exemple d'extension Web qui illustre le processus. L'exemple est disponible dans le dépôt webextensions-examples sur GitHub.

+ +

Manifest userScripts

+ +

Un script utilisateur est identifié par le contenu de la clé user_scripts du manifeste des extensions. L'information minimale pour la clé user_scripts serait :

+ +
  "user_scripts": {
+    "api_script": "customUserScriptAPIs.js"
+  }
+ +

La propriété "api_script" indique le chemin d'accès au fichier JavaScript qui contient le code du userScript.

+ +

Charge l'extension d'exemple

+ +

Une fois que vous avez téléchargé l'exemple  :

+ +

Naviguez jusqu'à about:debugging, cliquez sur Charger temporairement une extension... et double-cliquez sur le manifest des extensions.

+ +

/Le code par défaut inclus dans l'exemple vous permet de charger un userScript qui va "manger" le contenu des pages correspondant à l'entrée Hosts. Effectuez tous les changements que vous voulez faire avant de cliquer sur le bouton Enregistrer le script au bas du panneau.

+ +

Dans l'image suivante, l'extension va "manger" le contenu des pages dont le nom de domaine se termine par.org. C'est le comportement par défaut pour cette extension.

+ +

+ +

Rien ne se passera tant que vous n'aurez pas cliqué sur le bouton Enregistrer le script. Le bouton implémente le script utilisateur en fonction des paramètres de cette boîte de dialogue. Cela signifie que vous pouvez expérimenter le comportement du script sans avoir à implémenter une extension vous-même.

+ +

Register the userScript

+ +

Avant qu'un userScript puisse être exécuté, il doit être enregistré en utilisant la méthode  userScripts.register(). Voici le code pour enregistrer l'extension d'exemple :

+ +
async function registerScript() {
+  const params = {
+    hosts: stringToArray(hostsInput.value),
+    code: codeInput.value,
+    excludeMatches: stringToArray(excludeMatchesInput.value),
+    includeGlobs: stringToArray(includeGlobsInput.value),
+    excludeGlobs: stringToArray(excludeGlobsInput.value),
+    runAt: runAtInput.value,
+    matchAboutBlank: stringToBool(matchAboutBlankInput.value),
+    allFrames: stringToBool(allFramesInput.value),
+    scriptMetadata: {name: scriptNameInput.value || null},
+  };
+
+  // Store the last submitted values to the extension storage
+  // (so that they can be restored when the popup is opened
+  // the next time).
+  await browser.storage.local.set({
+    lastSetValues: params,
+  });
+
+  try {
+    // Clear the last userScripts.register result.
+    lastResultEl.textContent = "";
+
+    await browser.runtime.sendMessage(params);
+    lastResultEl.textContent = "UserScript successfully registered";
+    // Clear the last userScripts.register error.
+    lastErrorEl.textContent = "";
+
+    // Clear the last error stored.
+    await browser.storage.local.remove("lastError");
+  } catch (e) {
+    // There was an error on registering the userScript,
+    // let's show the error message in the popup and store
+    // the last error into the extension storage.
+
+    const lastError = `${e}`;
+    // Show the last userScripts.register error.
+    lastErrorEl.textContent = lastError;
+
+    // Store the last error.
+    await browser.storage.local.set({lastError});
+  }
+}
+ +

Ce code initialise d'abord l'objet params pour passer les valeurs à la méthode  userScripts.register.

+ +

Implementer les fonctions userScript

+ +

Une fois le script enregistré, naviguez vers une page dont le nom de domaine se termine par .org, et vous verrez quelque chose comme ceci :

+ +

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf