chrome.devtools.panels

Description

Utilisez l'API chrome.devtools.panels pour intégrer votre extension dans 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.

Chaque panneau d'extension et chaque barre latérale s'affiche sur une page HTML distincte. Toutes les pages d'extension affichées dans la fenêtre "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 dans la fenêtre "Outils de développement", mais vous pouvez les appeler en envoyant une requête à la page d'arrière-plan de votre extension, comme 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 vers une ressource dans la fenêtre "Outils pour les développeurs"). Au maximum, l'un des gestionnaires installés est appelé. Les utilisateurs peuvent spécifier (à l'aide de la boîte de dialogue "Paramètres des outils de développement") 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é.

Consultez le résumé des API DevTools pour obtenir une présentation générale de l'utilisation des API Developer Tools.

Manifest

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

"devtools_page"

Exemple

Le code suivant ajoute un panneau contenu dans Panel.html, représenté par FontPicker.png dans la barre d'outils des outils de développement 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 (Propriétés de la police) au panneau "Elements", puis définit sa hauteur sur 8ex:

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

La capture d'écran illustre l'effet que cet exemple aurait sur la fenêtre des outils pour les développeurs:

Panneau des icônes des extensions dans la barre d'outils des outils de développement
Panneau des icônes d'extension dans la barre d'outils des outils de développement

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

Types

Button

Un bouton créé par l'extension.

Propriétés

  • onClicked

    Événement<functionvoidvoid>

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

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

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

    • rappel

      function

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

      ()=>void

  • update

    void

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

    La fonction update se présente comme suit : 

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

    • iconPath

      string facultatif

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

    • tooltipText

      string facultatif

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

    • désactivée

      Booléen facultatif

      Indique si le bouton est désactivé.

ElementsPanel

Représente le panneau "Elements".

Propriétés

  • onSelectionChanged

    Événement<functionvoidvoid>

    Déclenché lorsqu'un objet est sélectionné dans le panneau.

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

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

    • rappel

      function

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

      ()=>void

  • createSidebarPane

    void

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

    La fonction createSidebarPane se présente comme suit : 

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

    • title

      chaîne

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

    • rappel

      fonction facultative

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

      (result: ExtensionSidebarPane)=>void

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

ExtensionPanel

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

Propriétés

  • onHidden

    Événement<functionvoidvoid>

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

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

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

    • rappel

      function

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

      ()=>void

  • onSearch

    Événement<functionvoidvoid>

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

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

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

    • rappel

      function

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

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

      • action

        chaîne

      • queryString

        string facultatif

  • onShown

    Événement<functionvoidvoid>

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

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

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

    • rappel

      function

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

      (window: Window)=>void

      • fenêtre

        Fenêtre

  • createStatusBarButton

    void

    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 ; l'icône droite s'affiche lorsque l'utilisateur appuie dessus.

    • tooltipText

      chaîne

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

    • désactivée

      boolean

      Indique si le bouton est désactivé.

ExtensionSidebarPane

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

Propriétés

  • onHidden

    Événement<functionvoidvoid>

    Déclenché lorsque le volet de la barre latérale devient masqué à la suite du changement de mode de l'utilisateur par rapport au panneau qui l'héberge.

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

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

    • rappel

      function

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

      ()=>void

  • onShown

    Événement<functionvoidvoid>

    Déclenché lorsque le volet de la barre latérale devient visible suite au passage de l'utilisateur au panneau qui l'héberge.

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

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

    • rappel

      function

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

      (window: Window)=>void

      • fenêtre

        Fenêtre

  • setExpression

    void

    Définit une expression é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 ou à la montre.

    • rootTitle

      string facultatif

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

    • rappel

      fonction facultative

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

      ()=>void

  • setHeight

    void

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

    La fonction setHeight se présente comme suit : 

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

    • taille

      chaîne

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

  • setObject

    void

    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

      string facultatif

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

    • rappel

      fonction facultative

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

      ()=>void

  • setPage

    void

    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

    Événement<functionvoidvoid>

    Déclenché lorsqu'un objet est sélectionné dans le panneau.

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

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

    • rappel

      function

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

      ()=>void

  • createSidebarPane

    void

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

    La fonction createSidebarPane se présente comme suit : 

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

    • title

      chaîne

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

    • rappel

      fonction facultative

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

      (result: ExtensionSidebarPane)=>void

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

Propriétés

elements

Panneau "Elements".

Type

ElementsPanel

sources

Panneau des sources.

Type

SourcesPanel

themeName

Chrome 59 ou version ultérieure

Nom du thème de couleurs 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()

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

Crée un panneau d'extension.

Paramètres

  • title

    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 de l'icône du panneau par rapport au répertoire d'extensions.

  • pagePath

    chaîne

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

  • rappel

    fonction facultative

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

    (panel: ExtensionPanel)=>void

    • panneau

      ExtensionPanel

      Objet ExtensionPanel représentant le panneau créé.

openResource()

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

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

Paramètres

  • url

    chaîne

    URL de la ressource à ouvrir.

  • lineNumber

    number

    Spécifie le numéro de ligne à atteindre lors du chargement de la ressource.

  • columnNumber

    numéro facultatif

    Chrome 114 et versions ultérieures

    Spécifie le numéro de colonne à atteindre lors du chargement de la ressource.

  • rappel

    fonction facultative

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

    ()=>void

setOpenResourceHandler()

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

Spécifie la fonction à appeler lorsque l'utilisateur clique sur le lien d'une ressource dans la fenêtre "Outils de développement". Pour annuler la définition du gestionnaire, appelez la méthode sans paramètre ou transmettez la valeur null comme paramètre.

Paramètres