From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../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 ++++++++ 15 files changed, 1246 insertions(+) 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 (limited to 'files/fr/mozilla/add-ons/webextensions/api/devtools.panels') 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.

+
-- cgit v1.2.3-54-g00ecf