Ajouter un outil personnalisé dans Microsoft Edge DevTools

Cet article décrit le code de l’exemple Custom DevTools. Pour installer et exécuter l’exemple pour la première fois, consultez Exemple : outil DevTools personnalisé.

Introduction

Comme une extension standard, une extension DevTools dispose d’un fichier manifeste. Cette procédure est décrite dans Prise en main du développement d’une extension, qui présente un exemple d’extension de base avec lequel vous pouvez commencer.

Une extension qui étend DevTools comprend également :

Fichier HTML rendu à afficher dans le panneau de l’outil dans DevTools.
Fichier HTML non rendu qui s’exécute lorsque DevTools est ouvert et qui gère généralement la communication entre l’outil DevTools personnalisé et la page web inspectée.

Cet exemple d’extension DevTools communique entre DevTools et la page web inspectée, et appelle les API DevTools.

L’exemple d’extension DevTools affiche un outil personnalisé dans DevTools, y compris un onglet personnalisé dans la barre d’activité et un panneau connecté à l’onglet :

Onglet personnalisé

Un panneau est une page d’outil dans Microsoft Edge DevTools, avec l’onglet de l’outil dans la barre d’activité.

Voir aussi :

Vue d’ensemble des fichiers

L’exemple d’extension DevTools contient les fichiers suivants :

Fichier	Description
`manifest.json`	Informations sur l’extension : nom, description, version, version du manifeste et page HTML à afficher dans DevTools.
`panel.html`	Page web à afficher dans le panneau personnalisé de DevTools.
`devtools.html`	Fichier HTML non rendu qui est exécuté lorsque DevTools est ouvert, pour charger les fichiers JavaScript de l’extension.
`devtools.js`	Logique principale de la page DevTools personnalisée.
`content_script.js`	Code que l’extension injecte dans la page Web inspectée. Ajoute un écouteur d’événements de clic à la page qui enverra un message avec la position du clic de souris. `devtools.js` écoute ce message et affiche la position dans le panneau personnalisé.
`icon.png`	Icône à afficher dans l’onglet de l’outil dans la barre d’activité de DevTools et dans le menu Plus d’outils .
`README.md`	Informations de base pour les développeurs sur l’utilisation de l’exemple.

Les détails sont ci-dessous.

Interagir entre la page web et DevTools

Plusieurs fichiers sont nécessaires pour permettre l’interaction entre la page web inspectée et DevTools. Ces fichiers s’exécutent dans différents contextes :

devtools.js s’exécute dans le contexte du panneau d’outils personnalisé, dans DevTools.
content_script.js est un script de contenu, ce qui signifie qu’il s’exécute dans le contexte de la page web inspectée. De la même manière que d’autres scripts sont chargés par la page web, un script de contenu a accès au DOM et peut le modifier.

La page DevTools, la page inspectée et le script de contenu s’emboîtent dans une extension :

Diagramme montrant l’anatomie d’une extension DevTools

Le content_script.js détecte l’emplacement où l’utilisateur clique sur la page Web inspectée :

document.addEventListener("click", event => {
  chrome.runtime.sendMessage({
    click: true,
    xPosition: event.clientX + document.body.scrollLeft,
    yPosition: event.clientY + document.body.scrollTop
  });
});

Le script de contenu relaie ces informations au devtools.js fichier, où les données sont affichées dans DevTools, dans l’outil personnalisé et dans l’outil Console .

Détectez les clics de l’utilisateur sur une page web à l’aide d’un script de contenu. Le script de contenu relaie ces informations dans le devtools.js fichier, où les données sont affichées à la fois dans la console DevTools et dans l’outil personnalisé DevTools qui est une extension de Microsoft Edge.

Code pour l’outil Custom DevTools

L’exemple Custom DevTools se compose des fichiers et du code suivants. Le code qui interagit avec la page web inspectée :

Affiche les informations de mémoire dans l’outil Custom DevTools.
Affiche la position du clic de souris dans l’outil Custom DevTools, lorsque l’utilisateur clique sur la page web.
Affiche une alerte d’accueil dans la page Web inspectée, lorsque l’utilisateur clique sur le boutonDire bonjour dans l’outil Custom DevTools.

`manifest.json`

Informations sur l’extension : nom, description, version, version du manifeste et page HTML à afficher dans DevTools.

Le fichier manifeste contient des paires clé/valeur. Les clés de niveau supérieur sont appelées membres.

Ce fichier est obligatoire pour une extension. Le manifeste contient les informations suivantes sur l’extension :

Member	Description
`name`	Nom de l’extension qui apparaîtra sous `edge://extensions/`.
`description`	Description de l’extension qui sera affichée sous le nom de l’extension.
`version`	Version de l’extension qui s’affiche en regard du nom de l’extension.
`manifest_version`	Détermine l’ensemble de fonctionnalités que l’extension utilisera, telles que la modification de la demande de réseau. La version actuelle est la version `3`. Pour en savoir plus sur cette version et les différences avec la version `2`, consultez Chronologie de la migration vers le manifeste V3.
`devtools_page`	Chemin d’accès à un fichier HTML exécuté chaque fois que DevTools est ouvert et charge les fichiers JavaScript de l’extension. Cette page n’est pas rendue dans DevTools.
`content_scripts`	Fichiers JavaScript ou CSS à utiliser lorsque l’utilisateur ouvre des pages web spécifiées. Consultez Scripts de contenu dans la documentation Chrome.
`permissions`	L’appareil local nécessite des autorisations pour afficher la capacité de mémoire de son système, car le script appelle l’API à cette fin.

manifest.json:

{
    "name": "Custom DevTools Tool",
    "description": "A DevTools extension interacting with the inspected page",
    "manifest_version": 3,
    "version": "1.0",
    "devtools_page": "devtools.html",
    "content_scripts": [{
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "run_at": "document_idle",
        "js": [
            "content_script.js"
        ]
    }],
    "permissions": [
        "system.memory"
    ]
}

Le permissions membre manifeste dans manifest.json définit les autorisations que l’extension exige de l’utilisateur. Certaines autorisations sont nécessaires pour utiliser certaines API d’extension. L’autorisation system-memory est requise pour pouvoir utiliser les API d’extension. Les API spécifiques ont des autorisations associées.

Clés dans le content_scripts membre :

Clé	Valeur
`matches`	Spécifie les pages dans lesquelles ce script de contenu sera injecté.
`run_at`	Indique quand le navigateur injecte le script sur la page.
`js`	Fichiers javascript à injecter.

Voir aussi :

manifest.json - fichier source dans le référentiel.
Informations de référence sur l’API Extensions

`panel.html`

Page web à afficher dans le panneau personnalisé de DevTools.

Ce fichier est obligatoire. Il s’agit de la page web à afficher dans le panneau personnalisé de DevTools.

panel.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h2>Custom DevTools tool</h2>

    <h3>Memory</h3>
    <div>
      <b>Available Memory Capacity:</b> <span id="availableMemoryCapacity"></span>
    </div>
    <div>
      <b>Total Memory Capacity:</b> <span id="totalMemoryCapacity"></span>
    </div>

    <h3>Send message from DevTools to inspected page</h3>
    <input type="button" id="sayHello" value="Say hello to the inspected page">
    <h3>Send message from inspected page to DevTools</h3>
    <p>Click somewhere in the inspected webpage.</p>
    <div>
      <b>Coordinates:</b> <span id="youClickedOn"></span>
    </div>

  </body>
</html>

panel.html est référencé dans l’appel de chrome.devtools.panels.create méthode dans devtools.js. La panel.html page web contient l’interface utilisateur du panneau de l’outil personnalisé.

Les éléments ci-dessus démontrent l’interaction entre la page inspectée et le panneau DevTools.

Lorsque l’utilisateur clique sur le sayHello bouton dans l’extension DevTools, une alerte s’affiche dans la fenêtre inspectée.

Lorsque l’utilisateur clique n’importe où dans la page inspectée, les coordonnées du clic de souris s’affichent dans l’outil personnalisé DevTools.

Voir aussi :

panel.html - fichier source dans le dépôt.

`devtools.html`

Fichier HTML non rendu exécuté lorsque DevTools est ouvert. Ce fichier est obligatoire.

Le nom devtools.html de fichier doit correspondre à la devtools_page valeur du membre dans le fichier manifeste.

devtools.html contient un <script> élément qui charge devtools.js:

devtools.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script src="devtools.js"></script>
  </body>
</html>

Voir aussi :

devtools.html - fichier source dans le dépôt.

`devtools.js`

devtools.js contient la logique principale de la page DevTools personnalisée. devtools.js Effectue les opérations suivantes :

Crée un onglet et un panneau d’outil personnalisés dans DevTools à l’aide chrome.devtools.panels.create()de .
Lorsque l’outil est affiché (panel.onShown écouteur), les availableMemoryCapacity éléments et totalMemoryCapacity sont récupérés à partir du DOM.
Définit un minuteur pour exécuter du code toutes les secondes après l’affichage du panneau.
Lorsque la minuterie se déclenche, la chrome.system.memory.getInfo méthode est utilisée pour récupérer la capacité mémoire disponible et totale de l’appareil et ces valeurs sont affichées dans les éléments DOM correspondants.

devtools.js:

let availableMemoryCapacity;
let totalMemoryCapacity;
let youClickedOn;

chrome.devtools.panels.create("Custom", "icon.png", "panel.html", panel => {
    // Code invoked on panel creation.
    panel.onShown.addListener( (extPanelWindow) => {
        // Memory API.
        availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity');
        totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity');
        // 2-way message sending.
        let sayHello = extPanelWindow.document.querySelector('#sayHello');
        youClickedOn = extPanelWindow.document.querySelector('#youClickedOn');
        sayHello.addEventListener("click", () => {
            // show a greeting alert in the inspected page
            chrome.devtools.inspectedWindow.eval('alert("Hello from the DevTools extension!");');
        });
    });
});

// Update the Memory display.
setInterval(() => {
    chrome.system.memory.getInfo((data) => {
        if (availableMemoryCapacity) {
            availableMemoryCapacity.innerHTML = data.availableCapacity;
        }
        if (totalMemoryCapacity) {
            totalMemoryCapacity.innerHTML = data.capacity;
        }
    });
}, 1000);

// Send a message from the inspected page to DevTools.
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    // Messages from content scripts should have sender.tab set.
    if (sender.tab && request.click == true) {
        console.log('I am here!');
        if (youClickedOn) {
            youClickedOn.innerHTML = `(${request.xPosition}, ${request.yPosition})`;
        }
        sendResponse({
            xPosition: request.xPosition,
            yPosition: request.yPosition
        });
    }
});

La create méthode appelle devtools.js:

chrome.devtools.panels.create("Custom", "icon.png", "panel.html", panel => {
    // code invoked on panel creation
});

La create méthode a la signature suivante :

chrome.devtools.panels.create(
    title: string, // Tool tab's label in Activity bar.
    iconPath: string, // Icon to display in tool's tab.
    pagePath: string, // Webpage to display in tool's panel.
    callback: function // Code to run when tool is opened.
)

Pour communiquer avec la page Web inspectée, devtools.js ajoute des écouteurs d’événements au bouton et youClickedOn à l’étiquette sayHello définis dans le panel.html fichier.

Lorsque l’utilisateur clique sur le sayHello bouton, devtools.js exécute le code directement dans la fenêtre inspectée, en utilisant la chrome.devtools.inspectedWindow.eval() méthode.

Lorsque l’utilisateur clique n’importe où dans la fenêtre inspectée, les extensions DevTools reçoivent un message avec request.click == true les informations de position de la souris.

Voir aussi :

devtools.js - fichier source dans le dépôt.
API prises en charge pour les extensions Microsoft Edge
- chrome.devtools.panels
  - créer()

`content_script.js`

Code injecté par l’outil DevTools personnalisé dans la page Web inspectée. Contient du code JavaScript injecté dans la page web inspectée (n’importe quelle page web).

Ce fichier procède comme suit :

Ajoute un écouteur d’événements de clic à la page Web inspectée, qui envoie un message contenant la position du clic de souris, en appelant chrome.runtime.sendMessage.
Écoute l’événement de clic de page via un écouteur d’événements.

Le script de contenu relaie les coordonnées d’un clic de souris dans le devtools.js fichier, où les coordonnées sont affichées dans l’outil Console et l’outil personnalisé dans DevTools.

Un script de contenu s’exécute dans le contexte de la page Web inspectée. De la même manière que d’autres scripts sont chargés par la page web, un script de contenu a accès au DOM et peut le modifier.

content_script.js:

document.addEventListener("click", (event) => {
  chrome.runtime.sendMessage({
      click: true,
      xPosition: event.clientX + document.body.scrollLeft,
      yPosition: event.clientY + document.body.scrollTop
    },
    response => {
      console.log("Received response", response);
    }
  );
});

Voir aussi :

content_script.js - fichier source dans le dépôt.
Scripts de contenu - Documents Chrome.

`icon.png`

Icône à afficher dans l’onglet de l’outil dans la barre d’activité de DevTools et dans le menu Plus d’outils .

icon.png est l’icône à afficher sous l’onglet de l’outil dans la barre d’activité de DevTools et dans le menu Plus d’outils :

Voir aussi :

icon.png - fichier source dans le dépôt.

Voir aussi

Documents sur les extensions Chrome :

Fichiers sources dans le référentiel :

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2026-08-13

Ajouter un outil personnalisé dans Microsoft Edge DevTools

Introduction

Vue d’ensemble des fichiers

Interagir entre la page web et DevTools

Code pour l’outil Custom DevTools

manifest.json

panel.html

devtools.html

devtools.js

content_script.js

icon.png

Voir aussi

Commentaires

Ressources supplémentaires

`manifest.json`

`panel.html`

`devtools.html`

`devtools.js`

`content_script.js`

`icon.png`