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.
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 pour les développeurs" ont accès à toutes les parties de l'API chrome.devtools
, ainsi qu'à toutes
et d'autres API d'extension.
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é.
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.
Fichier manifeste
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
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");
}
);
La capture d'écran illustre l'effet de cet exemple 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](https://developer.chrome.google.cn/static/docs/extensions/reference/api/devtools/panels/images/devtools-panels.png?authuser=8&hl=fr)
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
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
-
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
Objet ExtensionSidebarPane pour le volet de barre latérale créé.
-
-
Propriétés
elements
Panneau "Éléments".
Type
sources
Panneau "Sources"
Type
themeName
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
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érieureSpé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
Un objet
devtools.inspectedWindow.Resource
pour la ressource sur laquelle l'utilisateur a cliqué.
-