panneaux devtools

Note : Cette fonctionnalité deviendra disponible dans Firefox 54.

Lorsqu'une extension fournit des outils utiles aux développeurs, il est possible d'ajouter une interface utilisateur pour les outils de développement du navigateur en tant que nouveau panneau.

Spécification d'un panneau d'outils de développement

Un panneau d'outils de développement est ajouté à l'aide de l'API devtools.panels, qui, à son tour, doit être exécutée à partir d'une page spéciale devtools.

Ajoutez la page devtools en incluant la clé devtools_page dans l'extension manifest.json et fournissez l'emplacement du fichier de la page HTML dans l'extension :

json

"devtools_page": "devtools-page.html"

Dans la page des devtools, appelez un script qui ajoutera un panneau dans devtools:

html

<body>
  <script src="devtools.js"></script>
</body>

Dans le script, créez un panneau devtools en spécifiant le titre, l'icône et le fichier HTML du panneau qui fournit le contenu du panneau:

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

L'extension peut maintenant exécuter un code dans la fenêtre inspectée à l'aide de devtools.inspectedWindow.eval() ou en injectant un script de contenu via le script en arrière en passant un message. Vous pouvez trouver plus de détails sur la façon de procéder dans l'Extension des outils de développement.

devtools-panels utilise la création d'un panneau dans devtools

panneaux devtools

Spécification d'un panneau d'outils de développement

Conception du panneau de développement

Icônes

Exemples