Cette page a été traduite par l'API Cloud Translation.

chrome.devtools.panels

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 le récapitulatif des API d'outils de développement pour obtenir une présentation générale de l'utilisation des API des outils de développement.

Présentation

Chaque panneau d'extension et chaque barre latérale s'affiche sous la forme d'une page HTML distincte. Toutes les pages d'extensions sont affichées dans la fenêtre "Outils de développement" ont accès à tous les modules de l'API chrome.devtools, ainsi qu'aux l'API chrome.extension. Les autres API d'extension ne sont pas disponibles pour les pages dans Developer , mais vous pouvez les appeler en envoyant une requête à la page d'arrière-plan de votre extension, de la même manière que 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 d'ouverture d'une ressource par les utilisateurs (généralement, un clic sur le lien d'une ressource dans "Outils pour les développeurs"). Au plus, l'un des gestionnaires installés est appelé ; les utilisateurs peuvent spécifier la boîte de dialogue "Paramètres des outils de développement"), soit le comportement par défaut, soit une extension permettant de gérer les ressources les demandes en cours. Si une extension appelle setOpenResourceHandler() plusieurs fois, seule la dernière est conservé.

Exemples

Le code suivant ajoute un panneau contenu dans Panel.html, représenté par FontPicker.png sur la Barre d'outils des outils de développement et intitulée 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) pour 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");
  }
);

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

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

Pour essayer cette API, installez l'exemple d'API Devtools panel à partir de chrome-extension-samples. un dépôt de clés.

Types

Button

Bouton créé par l'extension.

Propriétés

onClicked

Événement<functionvoid>

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

La fonction onClicked.addListener se présente comme suit:
```
(callback: function) => {...}
```
- rappel
  
  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 s'ils sont 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é
  
  Booléen facultatif
  
  Indique si le bouton est désactivé.

ElementsPanel

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

Propriétés

onSelectionChanged

Événement<functionvoid>

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

La fonction onSelectionChanged.addListener se présente comme suit:
```
(callback: function) => {...}
```
- rappel
  
  fonction
  
  Le paramètre callback se présente comme suit:
```
() => void
```
createSidebarPane

vide

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.
- rappel
  
  function facultatif
  
  Le paramètre callback se présente comme suit:
```
(result: ExtensionSidebarPane) => void
```
  - résultat
    
    ExtensionSidebarPane
    
    Objet ExtensionSidebarPane pour le volet de barre latérale créé.

ExtensionPanel

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

Propriétés

onHidden

Événement<functionvoid>

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

La fonction onHidden.addListener se présente comme suit:
```
(callback: function) => {...}
```
- rappel
  
  fonction
  
  Le paramètre callback se présente comme suit:
```
() => void
```
onSearch

Événement<functionvoid>

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) => {...}
```
- rappel
  
  fonction
  
  Le paramètre callback se présente comme suit:
```
(action: string, queryString?: string) => void
```
  - action
    
    chaîne
  - queryString
    
    chaîne facultatif
onShown

Événement<functionvoid>

Déclenché lorsque l'utilisateur accède au panneau.

La fonction onShown.addListener se présente comme suit:
```
(callback: function) => {...}
```
- rappel
  
  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. 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é.
- retours
  Button

ExtensionSidebarPane

Barre latérale créée par l'extension.

Propriétés

onHidden

Événement<functionvoid>

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

La fonction onHidden.addListener se présente comme suit:
```
(callback: function) => {...}
```
- rappel
  
  fonction
  
  Le paramètre callback se présente comme suit:
```
() => void
```
onShown

Événement<functionvoid>

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

La fonction onShown.addListener se présente comme suit:
```
(callback: function) => {...}
```
- rappel
  
  fonction
  
  Le paramètre callback se présente comme suit:
```
(window: Window) => void
```
  - fenêtre
    
    Fenêtre
setExpression

vide

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 s'affichent dans une arborescence extensible semblable à celle de la console ou de la montre.
- rootTitle
  
  chaîne facultatif
  
  Titre facultatif pour la racine de l'arborescence d'expressions.
- rappel
  
  function facultatif
  
  Le paramètre callback se présente comme suit:
```
() => void
```
setHeight

vide

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

La fonction setHeight se présente comme suit:
```
(height: string) => {...}
```
- hauteur
  
  chaîne
  
  Spécification de taille de type CSS, comme '100px' ou '12ex'.
setObject

vide

Définit un objet compatible 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.
- rappel
  
  function facultatif
  
  Le paramètre callback se présente comme suit:
```
() => void
```
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

Événement<functionvoid>

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

La fonction onSelectionChanged.addListener se présente comme suit:
```
(callback: function) => {...}
```
- rappel
  
  fonction
  
  Le paramètre callback se présente comme suit:
```
() => void
```
createSidebarPane

vide

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.
- rappel
  
  function facultatif
  
  Le paramètre callback se présente comme suit:
```
(result: ExtensionSidebarPane) => void
```
  - résultat
    
    ExtensionSidebarPane
    
    Objet ExtensionSidebarPane pour le volet de barre latérale créé.

Propriétés

elements

Panneau "Éléments".

Type

ElementsPanel

sources

Panneau "Sources"

Type

SourcesPanel

themeName

Chrome (version 59 ou 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 (valeur 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'extensions.

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

chaîne

Chemin de la page HTML du panneau relative au répertoire de l'extension.
rappel

function facultatif

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 le panneau des outils pour les développeurs.

Paramètres

url

chaîne

URL de la ressource à ouvrir.
lineNumber

Nombre

Spécifie le numéro de la ligne jusqu'à laquelle le défilement de la ressource est effectué.
columnNumber

numéro facultatif

Chrome 114 ou version ultérieure

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

function facultatif

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 un lien de ressource dans la fenêtre "Outils de développement". Pour désactiver le gestionnaire, appelez la méthode sans paramètre ou transmettez la valeur null comme paramètre.

Paramètres

rappel

function facultatif

Le paramètre callback se présente comme suit:
```
(resource: Resource) => void
```
- ressource
  
  Ressource
  
  Un objet devtools.inspectedWindow.Resource pour la ressource sur laquelle l'utilisateur a cliqué.