chrome.devtools.panels

refresh date: 2026-09-25 robots: noindex

Description

Utilisez l'API chrome.devtools.panels pour intégrer votre extension à l'interface utilisateur de la fenêtre des outils pour les développeurs : créez vos propres panneaux, accédez aux panneaux existants et ajoutez des barres latérales.

Fichier manifeste

Les clés suivantes doivent être déclarées dans le fichier manifeste pour utiliser cette API.

"devtools_page"

Consultez Résumé des API DevTools pour une présentation générale de l'utilisation des API des outils pour les développeurs.

Présentation

Chaque panneau d'extension et barre latérale s'affiche sous la forme d'une page HTML distincte. Toutes les pages d'extension affichées dans la fenêtre des outils pour les développeurs ont accès à tous les modules de l'API chrome.devtools, ainsi qu'à l'API chrome.extension. Les autres API d'extension ne sont pas disponibles pour les pages de la fenêtre "Outils pour les développeurs", mais vous pouvez les appeler en envoyant une requête à la page d'arrière-plan de votre extension, comme vous le feriez dans les scripts de contenu.

Vous pouvez utiliser la méthode devtools.panels.setOpenResourceHandler pour installer une fonction de rappel qui gère les requêtes des utilisateurs pour ouvrir une ressource (généralement, un clic sur un lien de ressource dans la fenêtre des outils pour les développeurs). Au maximum, un seul des gestionnaires installés est appelé. Les utilisateurs peuvent spécifier (à l'aide de la boîte de dialogue "Paramètres des outils pour les développeurs") le comportement par défaut ou une extension pour gérer les requêtes d'ouverture de ressources. Si une extension appelle setOpenResourceHandler() plusieurs fois, seul le dernier gestionnaire est conservé.

Exemples

Le code suivant ajoute un panneau contenu dans Panel.html, représenté par FontPicker.png dans la barre d'outils des outils pour les développeurs et intitulé Sélecteur de police :

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

Le code suivant ajoute un volet de barre latérale contenu dans Sidebar.html et intitulé Font Properties au panneau "Éléments", puis définit sa hauteur sur 8ex :

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

Cette capture d'écran montre l'effet des exemples ci-dessus sur la fenêtre des outils pour les développeurs :

Panneau de l'icône d'extension dans la barre d'outils des outils de développement

Pour essayer cette API, installez l'exemple d'API de panneaux des outils de développement à partir du dépôt chrome-extension-samples.

Types

Button

Un bouton créé par l'extension.

Propriétés

  • onClicked

    Event<functionvoidvoid>

    Déclenché lorsque l'utilisateur clique sur le bouton.

    La fonction onClicked.addListener se présente comme suit : 

    (callback: function) => {...}

    • callback

      fonction

      Le paramètre callback se présente comme suit : 

      () => void

  • update

    vide

    Met à jour les attributs du bouton. Si certains arguments sont omis ou définis sur null, les attributs correspondants ne sont pas mis à jour.

    La fonction update se présente comme suit : 

    (iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}

    • iconPath

      chaîne facultatif

      Chemin d'accès à la nouvelle icône du bouton.

    • tooltipText

      chaîne facultatif

      Texte affiché sous forme d'info-bulle lorsque l'utilisateur pointe sur le bouton.

    • désactivé

      boolean facultatif

      Indique si le bouton est désactivé.

ElementsPanel

Représente le panneau "Éléments".

Propriétés

  • onSelectionChanged

    Event<functionvoidvoid>

    Se déclenche lorsqu'un objet est sélectionné dans le panneau.

    La fonction onSelectionChanged.addListener se présente comme suit : 

    (callback: function) => {...}

    • callback

      fonction

      Le paramètre callback se présente comme suit : 

      () => void

  • createSidebarPane

    vide

    Promise

    Crée un volet dans la barre latérale du panneau.

    La fonction createSidebarPane se présente comme suit : 

    (title: string, callback?: function) => {...}

    • titre

      chaîne

      Texte affiché dans la légende de la barre latérale.

    • callback

      function facultatif

      Le paramètre callback se présente comme suit : 

      (result: ExtensionSidebarPane) => void

      • Objet ExtensionSidebarPane pour le volet de la barre latérale créé.

    • Renvoie

      Promise<ExtensionSidebarPane>

      Chrome 152 ou version ultérieure

      Rappel appelé lors de la création de la barre latérale.

      Les promesses ne sont compatibles qu'avec Manifest V3 et les versions ultérieures. Les autres plates-formes doivent utiliser des rappels.

ExtensionPanel

Représente un panneau créé par une extension.

Propriétés

  • onHidden

    Event<functionvoidvoid>

    Déclenché lorsque l'utilisateur quitte le panneau.

    La fonction onHidden.addListener se présente comme suit : 

    (callback: function) => {...}

    • callback

      fonction

      Le paramètre callback se présente comme suit : 

      () => void

  • onSearch

    Event<functionvoidvoid>

    Déclenché lors d'une action de recherche (début d'une nouvelle recherche, navigation dans les résultats de recherche ou annulation de la recherche).

    La fonction onSearch.addListener se présente comme suit : 

    (callback: function) => {...}

    • callback

      fonction

      Le paramètre callback se présente comme suit : 

      (action: string, queryString?: string) => void

      • action

        chaîne

      • queryString

        chaîne facultatif

  • onShown

    Event<functionvoidvoid>

    Déclenché lorsque l'utilisateur passe au panneau.

    La fonction onShown.addListener se présente comme suit : 

    (callback: function) => {...}

    • callback

      fonction

      Le paramètre callback se présente comme suit : 

      (window: Window) => void

      • fenêtre

        Fenêtre

  • createStatusBarButton

    vide

    Ajoute un bouton à la barre d'état du panneau.

    La fonction createStatusBarButton se présente comme suit : 

    (iconPath: string, tooltipText: string, disabled: boolean) => {...}

    • iconPath

      chaîne

      Chemin d'accès à l'icône du bouton. Le fichier doit contenir une image de 64 x 24 pixels composée de deux icônes de 32 x 24 pixels. L'icône de gauche est utilisée lorsque le bouton est inactif, tandis que l'icône de droite s'affiche lorsque l'utilisateur appuie sur le bouton.

    • tooltipText

      chaîne

      Texte affiché sous forme d'info-bulle lorsque l'utilisateur pointe sur le bouton.

    • désactivé

      booléen

      Indique si le bouton est désactivé.

  • afficher

    vide

    Chrome 140 ou version ultérieure

    Affiche le panneau en activant l'onglet correspondant.

    La fonction show se présente comme suit : 

    () => {...}

ExtensionSidebarPane

Une barre latérale créée par l'extension.

Propriétés

  • onHidden

    Event<functionvoidvoid>

    Déclenché lorsque le volet de la barre latérale est masqué parce que l'utilisateur quitte le panneau qui l'héberge.

    La fonction onHidden.addListener se présente comme suit : 

    (callback: function) => {...}

    • callback

      fonction

      Le paramètre callback se présente comme suit : 

      () => void

  • onShown

    Event<functionvoidvoid>

    Se déclenche lorsque le volet de la barre latérale devient visible, car l'utilisateur passe au panneau qui l'héberge.

    La fonction onShown.addListener se présente comme suit : 

    (callback: function) => {...}

    • callback

      fonction

      Le paramètre callback se présente comme suit : 

      (window: Window) => void

      • fenêtre

        Fenêtre

  • setExpression

    vide

    Promise

    Définit une expression qui est évaluée dans la page inspectée. Le résultat s'affiche dans le volet de la barre latérale.

    La fonction setExpression se présente comme suit : 

    (expression: string, rootTitle?: string, callback?: function) => {...}

    • expression

      chaîne

      Expression à évaluer dans le contexte de la page inspectée. Les objets JavaScript et les nœuds DOM sont affichés dans une arborescence extensible semblable à la console/surveillance.

    • rootTitle

      chaîne facultatif

      Titre facultatif pour la racine de l'arborescence d'expressions.

    • callback

      function facultatif

      Le paramètre callback se présente comme suit : 

      () => void

    • Renvoie

      Promise<void>

      Chrome 152 ou version ultérieure

      Rappel appelé après la mise à jour du volet de la barre latérale avec les résultats de l'évaluation de l'expression.

      Les promesses ne sont compatibles qu'avec Manifest V3 et les versions ultérieures. Les autres plates-formes doivent utiliser des rappels.

  • setHeight

    vide

    Définit la hauteur de la barre latérale.

    La fonction setHeight se présente comme suit : 

    (height: string) => {...}

    • height

      chaîne

      Spécification de taille de type CSS, telle que '100px' ou '12ex'.

  • setObject

    vide

    Promise

    Définit un objet conforme au format JSON à afficher dans le volet de la barre latérale.

    La fonction setObject se présente comme suit : 

    (jsonObject: string, rootTitle?: string, callback?: function) => {...}

    • jsonObject

      chaîne

      Objet à afficher dans le contexte de la page inspectée. Évalué dans le contexte de l'appelant (client API).

    • rootTitle

      chaîne facultatif

      Titre facultatif pour la racine de l'arborescence d'expressions.

    • callback

      function facultatif

      Le paramètre callback se présente comme suit : 

      () => void

    • Renvoie

      Promise<void>

      Chrome 152 ou version ultérieure

      Rappel invoqué après la mise à jour de la barre latérale avec l'objet.

      Les promesses ne sont compatibles qu'avec Manifest V3 et les versions ultérieures. Les autres plates-formes doivent utiliser des rappels.

  • setPage

    vide

    Définit une page HTML à afficher dans le volet de la barre latérale.

    La fonction setPage se présente comme suit : 

    (path: string) => {...}

    • chemin d'accès

      chaîne

      Chemin relatif d'une page d'extension à afficher dans la barre latérale.

SourcesPanel

Représente le panneau "Sources".

Propriétés

  • onSelectionChanged

    Event<functionvoidvoid>

    Se déclenche lorsqu'un objet est sélectionné dans le panneau.

    La fonction onSelectionChanged.addListener se présente comme suit : 

    (callback: function) => {...}

    • callback

      fonction

      Le paramètre callback se présente comme suit : 

      () => void

  • createSidebarPane

    vide

    Promise

    Crée un volet dans la barre latérale du panneau.

    La fonction createSidebarPane se présente comme suit : 

    (title: string, callback?: function) => {...}

    • titre

      chaîne

      Texte affiché dans la légende de la barre latérale.

    • callback

      function facultatif

      Le paramètre callback se présente comme suit : 

      (result: ExtensionSidebarPane) => void

      • Objet ExtensionSidebarPane pour le volet de la barre latérale créé.

    • Renvoie

      Promise<ExtensionSidebarPane>

      Chrome 152 ou version ultérieure

      Rappel appelé lors de la création de la barre latérale.

      Les promesses ne sont compatibles qu'avec Manifest V3 et les versions ultérieures. Les autres plates-formes doivent utiliser des rappels.

Theme

Chrome 99 ou version ultérieure

Thème utilisé par les outils de développement.

Énumération

"default"
Thème par défaut des outils de développement. Il s'agit toujours du thème clair.

"dark"
Thème sombre.

Propriétés

elements

Panneau "Éléments".

Type

ElementsPanel

sources

Panneau "Sources".

Type

SourcesPanel

themeName

Chrome 59 ou version ultérieure

Nom du thème de couleur défini dans les paramètres des outils de développement de l'utilisateur. Valeurs possibles : default (par défaut) et dark.

Type

chaîne

Méthodes

create()

Promise 
chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): Promise<ExtensionPanel>

Crée un panneau d'extension.

Paramètres

  • titre

    chaîne

    Titre affiché à côté de l'icône de l'extension dans la barre d'outils des outils pour les développeurs.

  • iconPath

    chaîne

    Chemin d'accès de l'icône du panneau par rapport au répertoire de l'extension.

  • pagePath

    chaîne

    Chemin d'accès de la page HTML du panneau par rapport au répertoire de l'extension.

  • callback

    function facultatif

    Le paramètre callback se présente comme suit : 

    (panel: ExtensionPanel) => void

    • panneau

      ExtensionPanel

      Objet ExtensionPanel représentant le panneau créé.

Renvoie

  • Promise<ExtensionPanel>

    Chrome 152 ou version ultérieure

    Fonction appelée lors de la création du panneau.

    Les promesses ne sont compatibles qu'avec Manifest V3 et les versions ultérieures. Les autres plates-formes doivent utiliser des rappels.

openResource()

Promise 
chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
): Promise<void>

Demande aux outils de développement d'ouvrir une URL dans un panneau des outils de développement.

Paramètres

  • url

    chaîne

    URL de la ressource à ouvrir.

  • lineNumber

    nombre

    Spécifie le numéro de ligne vers lequel faire défiler l'écran lorsque la ressource est chargée.

  • columnNumber

    number facultatif

    Chrome 114 ou version ultérieure

    Spécifie le numéro de colonne vers lequel faire défiler l'écran lorsque la ressource est chargée.

  • callback

    function facultatif

    Le paramètre callback se présente comme suit : 

    () => void

Renvoie

  • Promise<void>

    Chrome 152 ou version ultérieure

    Fonction appelée lorsque la ressource a bien été chargée.

    Les promesses ne sont compatibles qu'avec Manifest V3 et les versions ultérieures. Les autres plates-formes doivent utiliser des rappels.

setOpenResourceHandler()

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
): void

Spécifie la fonction à appeler lorsque l'utilisateur clique sur un lien de ressource dans la fenêtre des outils pour les développeurs. Pour annuler la définition du gestionnaire, appelez la méthode sans paramètre ou transmettez "null" comme paramètre.

Paramètres

  • callback

    function facultatif

    Le paramètre callback se présente comme suit : 

    (resource: Resource, lineNumber: number) => void

    • ressource

      Ressource

      Un objet devtools.inspectedWindow.Resource pour la ressource sur laquelle l'utilisateur a cliqué.

    • lineNumber

      nombre

      Spécifie le numéro de ligne de la ressource sur laquelle l'utilisateur a cliqué.

setThemeChangeHandler()

Chrome 99 ou version ultérieure 
chrome.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

Spécifie la fonction à appeler lorsque le thème actuel change dans les outils de développement. Pour annuler la définition du gestionnaire, appelez la méthode sans paramètre ou transmettez null en tant que paramètre.

Paramètres

  • callback

    function facultatif

    Le paramètre callback se présente comme suit : 

    (theme: Theme) => void

    • thème

      Thème

      Thème actuel dans les outils de développement.