Partager via

Créer une extension DevTools, en ajoutant un onglet et un panneau d’outils personnalisés

  • Article

Cet article fournit un exemple et une procédure pas à pas de code pour une extension Microsoft Edge qui ajoute un onglet d’outils et un panneau dans DevTools.

Cet article explique tout d’abord comment installer et exécuter l’exemple d’extension DevTools fourni, qui ajoute un onglet d’outils Panneau d’exemples dans DevTools dans Microsoft Edge. L’exemple est une extension DevTools opérationnelle qui crée son propre panneau et interagit avec les API DevTools.

Cet article présente ensuite un tutoriel qui montre comment vous pouvez éventuellement créer cet exemple à partir de zéro, et explique chaque étape de développement de l’exemple, ainsi que le fonctionnement du code ajouté. Ces étapes du didacticiel sont un bon moyen de découvrir tout ce qui est nécessaire pour le développement classique.

Voir aussi :

Télécharger, installer et exécuter l’exemple d’extension DevTools

Pour télécharger, installer, exécuter et tester l’exemple d’extension DevTools fourni et terminé :

  1. Téléchargez le code d’extension final en cliquant sur Demos-main.zip , puis en extrayant son contenu dans un dossier sur votre ordinateur.

  2. Ouvrez Microsoft Edge et accédez à edge://extensions/.

  3. Activez le bouton bascule Mode développeur .

  4. Cliquez sur Charger décompressé et accédez au dossier dans lequel vous avez extrait le fichier zip. Dans ce dossier, sélectionnez Demos-main>devtools-extension>sample 4, puis cliquez sur Sélectionner un dossier.

    Page edge://extensions dans Microsoft Edge, montrant le mode développeur et charger les boutons décompressés

    L’extension DevTools est chargée.

  5. Dans Microsoft Edge, ouvrez un nouvel onglet.

  6. Ouvrez DevTools (F12).

  7. Sélectionnez l’outil Exemple de panneau (onglet).

    L’outil Exemple de panneau s’ouvre :

    Microsoft Edge, montrant DevTools sur le côté, avec l’exemple de panneau de l’extension sélectionné

  8. Cliquez sur le bouton Say Hello à la page inspectée.

    Une alerte s’affiche dans la page inspectée :

    Microsoft Edge, montrant le nouveau panneau d’extension dans DevTools sur le côté et une fenêtre de boîte de dialogue d’alerte

  9. Cliquez sur le bouton OK pour fermer l’alerte.

  10. Cliquez n’importe où dans la page inspectée.

    Un message s’affiche dans le panneau d’extension : Vous avez cliqué sur la position (199, 509) dans la page inspectée :

    Exemple de panneau dans DevTools montrant le message de position cliqué

  11. Sélectionnez l’outil Console .

    Un message s’affiche dans l’outil console : Réponse > reçue {xPosition : 199, yPosition : 509} :

    L’outil console DevTools affichant le message de position cliqué

Vous avez téléchargé, installé, exécuté et testé l’exemple d’extension DevTools fourni et terminé. Dans les étapes suivantes, vous créez le même exemple en commençant à partir d’un répertoire vide. Les sections suivantes expliquent le fonctionnement du code.

Étape 1 : Créer une extension Microsoft Edge de base avec une page web DevTools

Si vous souhaitez créer les fichiers pour chaque étape principale ci-dessous, installez un éditeur de code comme Visual Studio Code, pour suivre les étapes du tutoriel ci-dessous afin de recréer manuellement l’exemple d’extension DevTools ci-dessus. Vous pouvez lire la procédure pas à pas du code ci-dessous, présentée sous la forme de quatre étapes ou phases principales.

Une extension de base pour Microsoft Edge se compose d’un fichier manifeste (manifest.json). Étant donné que cette extension particulière étend DevTools, cette extension inclut également un fichier de page web, devtools.html. Les deux fichiers sont fournis dans le Microsoft Edge / Demos répertoire du référentiel /devtools-extension/sample 1/.> Le répertoire contient les fichiers :

  • devtools.html
  • manifest.json

manifest.json

manifest.json est un fichier manifeste contenant des paires clé/valeur. Les clés de niveau supérieur sont appelées membres :

{
    "name": "DevTools Sample Extension",
    "description": "A Basic DevTools Extension",
    "manifest_version": 3,
    "version": "1.0",
    "devtools_page": "devtools.html"
}
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 des fonctionnalités que l’extension utilisera, telles que les workers de service ou la modification de requête 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 Vue d’ensemble et chronologies de la migration vers Manifest 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 affichée dans DevTools.

devtools.html

devtools.html correspond au devtools_page membre dans le fichier manifeste :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    A Basic DevTools Extension.
  </body>
</html>

Dans une étape ultérieure, vous ajouterez un <script> élément dans le fichier ci-dessus pour charger un fichier JavaScript. Ce fichier HTML n’est pas affiché dans DevTools.

Installer et tester l’extension Microsoft Edge de base

Le chargement et le test d’une extension Edge localement sont parfois appelés chargement indépendant d’une extension, par opposition à la distribution d’une extension aux utilisateurs.

Pour charger et tester votre extension de base localement dans Microsoft Edge :

  1. Dans Microsoft Edge, accédez à edge://extensions/.

  2. Activez le bouton bascule Mode développeur .

  3. Cliquez sur Charger décompressé, accédez au dossier dans lequel vous avez écrit le code de votre extension, puis cliquez sur le bouton Sélectionner un dossier .

    Votre extension DevTools est chargée.

  4. Ouvrez un nouvel onglet.

  5. Ouvrez DevTools (F12).

Votre extension est chargée, mais n’est pas encore affichée dans DevTools, car vous n’avez pas créé de panneau pour l’extension.

Voir aussi :

Étape 2 : Ajouter un outil personnalisé dans DevTools

Dans cette étape, vous allez créer un nouveau panneau (onglet Outil) dans DevTools. Vous pouvez :

  • Copiez et collez le code à partir du Microsoft Edge / Demos répertoire du référentiel /devtools-extension/sample 2/.> Ce répertoire contient les fichiers suivants :

    • devtools.html
    • devtools.js - Ajouté à l’étape 2.
    • manifest.json
    • panel.html - Ajouté à l’étape 2.

  • Copiez et collez le code des listes de codes ci-dessous.

Un panneau est un onglet d’outils dans la barre d’outils main de DevTools, semblable aux outils Éléments, Console et Sources présentés ci-dessous :

Volets et barres latérales DevTools

Pour créer une extension DevTools de base avec un exemple de panneau :

  1. Créez un fichier nommé devtools.js.

  2. Copiez et collez le code suivant dans devtools.js:

    chrome.devtools.panels.create("Sample Panel", "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.
)

    Référence:

    devtools.html :

  3. Créez un fichier nommé devtools.html.

  4. Copiez et collez le code suivant dans devtools.html:

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

    Dans le fichier manifeste (manifest.json), le devtools_page champ spécifie le fichier ci-dessus (devtools.html). devtools.html, ci-dessus, contient un <script> élément qui charge devtools.js.

    panel.html :

  5. Créez le panel.html fichier que vous avez référencé dans l’appel de méthode précédent chrome.devtools.panels.create . Cette page web contient l’interface utilisateur du panneau que votre extension ajoute à DevTools.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>A Basic DevTools Extension with Panel</h1>
  </body>
</html>

Recharger et tester l’extension DevTools

Pour tester vos modifications dans Microsoft Edge, rechargez votre extension à partir de la edge://extensions/ page :

  1. Accédez à edge://extensions/.

  2. En regard de l’exemple d’extension DevTools que vous avez installé avant d’écrire votre propre code, cliquez sur Recharger :

    Page extensions Microsoft Edge montrant où se trouve le bouton Recharger

    L’extension DevTools est rechargée, à l’aide des fichiers que vous avez créés ci-dessus, plutôt que de l’exemple fourni que vous avez téléchargé.

  3. Ouvrez un nouvel onglet dans Microsoft Edge.

  4. Ouvrez DevTools (F12).

  5. Dans la barre d’activité, sélectionnez l’outil Exemple de panneau (onglet) :

    Nouvel onglet et panneau d’outils dans DevTools

Étape 3 : Afficher les informations de mémoire en appelant des API d’extension

Dans cette étape, vous allez utiliser des API d’extension pour afficher des informations de mémoire dans votre panneau DevTools. Pour ce faire, nous devons mettre à jour dans permissions le fichier manifeste, l’interface du panneau et le script devtools. Vous pouvez copier les fichiers de code source pour cette étape à partir du Microsoft Edge / Demos répertoire /devtools-extension/sample 3/ du référentiel > ou créer vous-même les fichiers en suivant les instructions ci-dessous. Le répertoire contient les fichiers :

  • devtools.html
  • devtools.js - Mise à jour à l’étape 3.
  • manifest.json - Mise à jour à l’étape 3.
  • panel.html - Mise à jour à l’étape 3.

  1. Utilisez le membre de permissions manifeste dans votre manifest.json fichier. Ce membre définit les autorisations que votre extension requiert de l’utilisateur. Certaines autorisations sont nécessaires pour utiliser certaines API d’extension.

    "permissions": [
  "system.memory",
]

    L’autorisation system-memory est requise pour utiliser les API d’extension que vous utiliserez plus loin dans ce tutoriel. Pour en savoir plus sur les API disponibles et les autorisations associées, consultez Informations de référence sur les API pour les API d’extension.

    panel.html :

  2. Ajoutez ce qui suit au corps du panel.html fichier pour afficher les données dans le panneau.

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

    devtools.js :

  3. Mettez à jour le devtools.js fichier avec le code suivant.

    let availableMemoryCapacity;
let totalMemoryCapacity;

chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
    // code invoked on panel creation
    panel.onShown.addListener((extPanelWindow) => {
        availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity');
        totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity');
    });
});

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

L’extrait de code ci-dessus effectue les opérations suivantes :

  1. Crée un panneau Sample Panel dans DevTools.

  2. Lorsque le panneau 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.

Recharger et tester l’extension DevTools

Pour tester vos modifications dans Microsoft Edge, rechargez votre extension à partir de la edge://extensions/ page :

  1. Accédez à edge://extensions/.

  2. En regard de votre extension DevTools, cliquez sur Recharger.

    Votre extension DevTools est rechargée.

  3. Ouvrez un nouvel onglet.

  4. Ouvrez DevTools (F12).

  5. Sélectionnez l’outil Exemple de panneau .

    Votre extension DevTools affiche les capacités de mémoire disponibles et totales :

    Nouveau panneau d’extension dans DevTools, affichant des informations sur la mémoire

Voir aussi :

Étape 4 : Interagir entre la page web et DevTools

Dans cette étape du tutoriel, vous allez ajouter du code qui interagit avec la page web inspectée. Ce code :

  1. Écoutez les événements de clic qui se produisent sur la page web et connectez-les à l’outil console DevTools.
  2. Affichez la position du clic de la souris dans le panneau d’extension DevTools.
  3. Lorsque l’utilisateur clique sur un bouton dans le panneau de l’extension DevTools, affichez une alerte de salutation dans la page web inspectée.

Vous pouvez copier les fichiers qui sont le résultat final de cette étape à partir du Microsoft Edge / Demos répertoire / >devtools-extension/sample 4/ , ou créer les fichiers vous-même en suivant les instructions ci-dessous. Le répertoire contient les fichiers :

  • background.js - ajouté à l’étape 4.
  • content_script.js - ajouté à l’étape 4.
  • devtools.html
  • devtools.js - mise à jour à l’étape 4.
  • manifest.json - mise à jour à l’étape 4.
  • panel.html - mise à jour à l’étape 4.

L’outil DevTools (panneau) que vous avez créé jusqu’à présent n’a pas d’accès direct à la page web inspectée et ne s’exécute pas tant que DevTools n’est pas ouvert. Pour cela, vous allez utiliser un script de contenu et un worker de service en arrière-plan.

  • 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.
  • Un worker de service en arrière-plan est un script que le navigateur exécute dans un thread distinct. Ce script a accès aux API d’extension Microsoft Edge.

La page DevTools, la page inspectée, le script de contenu et le worker du service en arrière-plan s’intègrent dans une extension :

Diagramme montrant l’anatomie d’une extension DevTools

Dans cette partie du tutoriel, vous allez détecter les clics de l’utilisateur 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 seront affichées à la fois dans la console et le panneau d’extension DevTools.

  1. Ajoutez le code suivant dans le manifest.json fichier :

    "content_scripts": [{
  "matches": [
    "http://*/*",
    "https://*/*"
  ],
  "run_at": "document_idle",
  "js": [
    "content_script.js"
  ]
}],
"background": {
    "service_worker": "background.js"
}
    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.

    content_script.js :

  2. Créez un fichier nommé content_script.js.

  3. Copiez et collez le code suivant dans 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);
    }
  );
});

    L’extrait de code ci-dessus imprime un message sur la console lorsque le script est injecté dans la page. Il ajoute également un écouteur d’événements click à la page qui envoie un message avec une position de clic de souris dans la page inspectée à l’aide de l’API chrome.runtime.sendMessage .

    panel.html :

  4. Dans le panel.html fichier, ajoutez un sayHello bouton et une youClickedOn étiquette, comme suit :

    <button id="sayHello">Say Hello to the inspected page!</button>
<h2><span id="youClickedOn"></span></h2>

    Les deux éléments ci-dessus sont utilisés pour démontrer l’interaction entre la page inspectée, le panneau DevTools et le worker du service en arrière-plan. Lorsque l’utilisateur clique sur le sayHello bouton dans l’extension DevTools, un message d’accueil s’affiche dans la fenêtre inspectée. Lorsque l’utilisateur clique n’importe où dans la page inspectée, un message affiche la position du clic de la souris dans le panneau d’extension DevTools.

    devtools.js :

  5. Dans le devtools.js fichier (comme indiqué ci-dessous), utilisez la chrome.runtime.connect méthode pour créer une connexion au worker de service en arrière-plan, puis envoyez la fenêtre tabId inspectée au worker de service à l’aide de la backgroundPageConnection.postMessage méthode . Enfin, ajoutez des écouteurs d’événements au bouton et youClickedOn à l’étiquette sayHello définis dans le panel.html fichier, comme indiqué ci-dessous :

    let youClickedOn; 
chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
    // code invoked on panel creation
    panel.onShown.addListener( (extPanelWindow) => {
        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");');
        });             
    });
});

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 = `You clicked on position (${request.xPosition}, ${request.yPosition}) in the inspected page.`;
        }
        sendResponse({
            xPosition: request.xPosition,
            yPosition: request.yPosition
        });
    }
});

// Create a connection to the background service worker
const backgroundPageConnection = chrome.runtime.connect({
    name: "devtools-page"
});

// Relay the tab ID to the background service worker
backgroundPageConnection.postMessage({
    name: 'init',
    tabId: chrome.devtools.inspectedWindow.tabId
});

    Lorsque l’utilisateur clique sur le sayHello bouton, l’extension DevTools exécute un extrait de code de alert("Hello from the DevTools Extension"); dans la fenêtre inspectée en appelant la eval() méthode de la fenêtre chrome.devtools.inspectedWindowinspectée .

    Lorsque l’utilisateur clique n’importe où dans la fenêtre inspectée, l’extension DevTools reçoit un message, du worker du service en arrière-plan, avec request.click == true et les informations de position de la souris.

    background.js :

  6. Créez un fichier nommé background.js.

  7. Copiez et collez le code suivant dans background.js:

    let id = null;
const connections = {};

chrome.runtime.onConnect.addListener(devToolsConnection => {
    // Assign the listener function to a variable so we can remove it later
    let devToolsListener = (message, sender, sendResponse) => {
        if (message.name == "init") {
            id = message.tabId;
            connections[id] = devToolsConnection;
            // Send a message back to DevTools
            connections[id].postMessage("Connected!");
        }
    };

    // Listen to messages sent from the DevTools page
    devToolsConnection.onMessage.addListener(devToolsListener);

    devToolsConnection.onDisconnect.addListener(() => {
        devToolsConnection.onMessage.removeListener(devToolsListener);
    });
});

    Le code ci-dessus connecte le worker du service en arrière-plan à la page DevTools. Il écoute quand la page DevTools se connecte, enregistre la connexion et renvoie une réponse à la page DevTools.

    Cela est utile lorsque votre worker de service en arrière-plan collecte des données ou effectue des tâches en arrière-plan que vous souhaitez mettre à disposition dans votre extension DevTools.

Recharger et tester l’extension DevTools

Pour tester le nouveau sayHello bouton :

  1. Accédez à edge://extensions/.

  2. Recherchez l’entrée d’extension décompressée que vous avez chargée à l’étape 1.

  3. Cliquez sur le bouton Recharger .

  4. Ouvrez un nouvel onglet de navigateur, ouvrez DevTools (F12), puis cliquez sur l’outil Exemple de panneau (onglet).

  5. Cliquez sur le bouton Say Hello to The Inspected Page !.

    Une alerte s’affiche dans la page inspectée :

    Microsoft Edge, montrant le nouveau panneau d’extension dans DevTools sur le côté et une fenêtre de boîte de dialogue d’alerte

  6. Cliquez sur le bouton OK pour fermer l’alerte.

  7. Cliquez n’importe où dans la page inspectée.

    Un message s’affiche dans le panneau d’extension : Vous avez cliqué sur la position (199, 509) dans la page inspectée :

    Exemple de panneau dans DevTools montrant le message de position cliqué

  8. Sélectionnez l’outil Console .

    Un message s’affiche dans l’outil console : Réponse > reçue {xPosition : 199, yPosition : 509} :

    L’outil console DevTools affichant le message de position cliqué

Ceci termine le tutoriel et la procédure pas à pas pour la création d’une extension DevTools qui ajoute un onglet d’outils et un panneau dans DevTools dans Microsoft Edge.

Voir aussi :

Voir aussi