Ajouter un outil personnalisé dans Microsoft Edge DevTools

Cet article décrit le code de l’exemple DevTools personnalisé. Pour commencer par installer et exécuter l’exemple, consultez Exemple : outil DevTools personnalisé.

Introduction

Comme une extension standard, une extension DevTools a un fichier manifeste. C’est décrit 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 inclut é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 :

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

Voir aussi :

• Exemple : Page web contextuelle de la visionneuse d’images
• Vue d’ensemble de DevTools

Vue d’ensemble des fichiers

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

Les détails sont ci-dessous.

Interagir entre la page web et DevTools

Plusieurs fichiers sont nécessaires pour activer 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 façon que les 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’intègrent dans une extension :

Détecte content_script.js 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 transmet 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 que l’utilisateur clique sur une page web à l’aide d’un script de contenu. Le script de contenu transmet ces informations au devtools.js fichier, où les données sont affichées dans la console DevTools et l’outil personnalisé DevTools qui est une extension Microsoft Edge.

Code pour l’outil DevTools personnalisé

L’exemple DevTools personnalisé se compose des fichiers et du code suivants. Le code qui interagit avec la page web inspectée effectue les opérations suivantes :

• Affiche des informations de mémoire dans l’outil DevTools personnalisé .

• Affiche la position de clic de la souris dans l’outil DevTools personnalisé lorsque vous cliquez sur la page web.

• Affiche une alerte de salutation dans la page web inspectée, lorsque l’utilisateur clique sur le bouton Say Hello dans l’outil DevTools personnalisé .

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 :

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 utiliser les API d’extension. Des API spécifiques ont des autorisations associées.

Clés au sein du content_scripts membre :

Voir aussi :

• manifest.json : fichier source dans le dépôt.
• Informations de référence sur l’API Extensions

panel.html

Page web à afficher dans le panneau personnalisé dans 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 illustrent 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 de clic de souris s’affichent dans l’outil personnalisé DevTools.

Voir aussi :

• panel.html : fichier source dans le référentiel.

devtools.html

Fichier HTML non rendu qui est exécuté lors de l’ouverture de DevTools. Ce fichier est obligatoire.

Le nom devtools.html de fichier doit correspondre à la valeur du devtools_page 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 référentiel.

devtools.js

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

1. Crée un onglet et un panneau Outils personnalisés dans DevTools à l’aide chrome.devtools.panels.create()de .

2. Lorsque l’outil est affiché (panel.onShown écouteur), les availableMemoryCapacity éléments et totalMemoryCapacity sont récupérés à partir du DOM.

3. Définit un minuteur pour exécuter du code toutes les secondes après l’affichage du panneau.

4. Lorsque le minuteur 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
        });
    }
});

Appel create de méthode dans 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 bouton, devtools.js exécute le sayHello code directement dans la fenêtre inspectée, à l’aide de 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 et les informations de position de la souris.

Voir aussi :

• devtools.js : fichier source dans le référentiel.
• API prises en charge pour les extensions Microsoft Edge
  • chrome.devtools.panels
    • create()

content_script.js

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

Ce fichier effectue les opérations suivantes :

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

Le script de contenu transmet les coordonnées de clic de la souris au devtools.js fichier, où les coordonnées sont affichées à la fois 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 façon que les 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 référentiel.
• Scripts de contenu - Documentation Chrome.

icon.png

Icône à afficher sous 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 référentiel.

Voir aussi

• Exemple : outil DevTools personnalisé
• Vue d’ensemble de DevTools
• Vue d’ensemble et chronologie de la migration vers le manifeste V3
• API prises en charge pour les extensions Microsoft Edge
• Prise en main du développement d’une extension
• Exemple : Page web contextuelle de la visionneuse d’images

Documentation sur les extensions Chrome :

• Scripts de contenu
• Informations de référence sur l’API Extensions
  • chrome.devtools.panels
    • create()

Fichiers sources dans le référentiel :

• content_script.js
• devtools.html
• devtools.js
• icon.png
• manifest.json
• panel.html