Description
Utilisez l'API chrome.devtools.recorder
pour personnaliser le panneau "Enregistreur" dans les outils de développement.
Garantie de disponibilité
Consultez le résumé des API DevTools pour obtenir une présentation générale de l'utilisation des API Developer Tools.
Présentation
L'API devtools.recorder
est une fonctionnalité en preview qui vous permet d'étendre le panneau "Enregistreur" dans les outils pour les développeurs Chrome.
À partir de Chrome M105, vous pouvez étendre la fonctionnalité d'exportation. À partir de Chrome M112, vous pouvez étendre le bouton de relecture.
Personnalisation de la fonctionnalité d'exportation
Pour enregistrer un plug-in d'extension, utilisez la fonction registerRecorderExtensionPlugin
. Cette fonction nécessite une instance de plug-in, name
et mediaType
comme paramètres. L'instance du plug-in doit implémenter deux méthodes: stringify
et stringifyStep
.
Le name
fourni par l'extension s'affiche dans le menu Export (Exporter) du panneau Recorder (Enregistreur).
Selon le contexte d'exportation, lorsque l'utilisateur clique sur l'option d'exportation fournie par l'extension, le panneau Enregistreur appelle l'une des deux fonctions suivantes:
stringify
qui reçoit un enregistrement complet du flux utilisateurstringifyStep
qui reçoit une seule étape enregistrée
Le paramètre mediaType
permet à l'extension de spécifier le type de sortie qu'elle génère avec les fonctions stringify
et stringifyStep
. Par exemple, application/javascript
si le résultat est un programme JavaScript.
Exemple de plug-in d'exportation
Le code suivant implémente un plug-in d'extension qui chaîne un enregistrement à l'aide de JSON.stringify
:
class MyPlugin {
stringify(recording) {
return Promise.resolve(JSON.stringify(recording));
}
stringifyStep(step) {
return Promise.resolve(JSON.stringify(step));
}
}
chrome.devtools.recorder.registerRecorderExtensionPlugin(
new MyPlugin(),
/*name=*/'MyPlugin',
/*mediaType=*/'application/json'
);
Personnalisation du bouton de nouvelle lecture
Pour personnaliser le bouton de relecture dans l'Enregistreur, utilisez la fonction registerRecorderExtensionPlugin
. Pour que la personnalisation soit prise en compte, le plug-in doit implémenter la méthode replay
.
Si la méthode est détectée, un bouton de nouvelle lecture s'affiche dans l'Enregistreur.
Lorsque vous cliquez sur le bouton, l'objet d'enregistrement actuel est transmis en tant que premier argument de la méthode replay
.
À ce stade, l'extension peut afficher un RecorderView
pour gérer la relecture ou utiliser d'autres API d'extension pour traiter la requête de relecture. Pour créer un RecorderView
, appelez chrome.devtools.recorder.createView
.
Exemple de plug-in Replay
Le code suivant implémente un plug-in d'extension qui crée une vue factice de l'Enregistreur et l'affiche lors d'une requête de relecture:
const view = await chrome.devtools.recorder.createView(
/* name= */ 'ExtensionName',
/* pagePath= */ 'Replay.html'
);
let latestRecording;
view.onShown.addListener(() => {
// Recorder has shown the view. Send additional data to the view if needed.
chrome.runtime.sendMessage(JSON.stringify(latestRecording));
});
view.onHidden.addListener(() => {
// Recorder has hidden the view.
});
export class RecorderPlugin {
replay(recording) {
// Share the data with the view.
latestRecording = recording;
// Request to show the view.
view.show();
}
}
chrome.devtools.recorder.registerRecorderExtensionPlugin(
new RecorderPlugin(),
/* name=*/ 'CoffeeTest'
);
Vous trouverez un exemple d'extension complet sur GitHub.
Types
RecorderExtensionPlugin
Interface de plug-in que le panneau "Enregistreur" appelle pour personnaliser ce panneau.
Propriétés
-
revoir
void
Chrome 112 ou version ultérieurePermet à l'extension d'implémenter une fonctionnalité de relecture personnalisée.
La fonction
replay
se présente comme suit :(recording: object) => {...}
-
d'enregistrer
objet
Enregistrement de l'interaction de l'utilisateur avec la page. Il doit correspondre au schéma d'enregistrement de Puppeteer.
-
-
Stringify
void
Convertit un enregistrement du format du panneau "Enregistreur" en chaîne.
La fonction
stringify
se présente comme suit :(recording: object) => {...}
-
d'enregistrer
objet
Enregistrement de l'interaction de l'utilisateur avec la page. Il doit correspondre au schéma d'enregistrement de Puppeteer.
-
-
stringifyStep
void
Convertit une étape de l'enregistrement du format du panneau "Enregistreur" en chaîne.
La fonction
stringifyStep
se présente comme suit :(step: object) => {...}
-
étape
objet
Une étape de l'enregistrement d'une interaction de l'utilisateur avec la page. Elles doivent correspondre au schéma d'étape de Puppeteer.
-
RecorderView
Représente une vue créée par une extension à intégrer dans le panneau "Enregistreur".
Propriétés
-
onHidden
Événement<functionvoidvoid>
Déclenché lorsque la vue est masquée
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 la vue est affichée
La fonction
onShown.addListener
se présente comme suit :(callback: function) => {...}
-
rappel
function
Le paramètre
callback
se présente comme suit :() => void
-
-
afficher
void
Indique que l'extension souhaite afficher cette vue dans le panneau "Enregistreur".
La fonction
show
se présente comme suit :() => {...}
Méthodes
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
Crée une vue capable de gérer la relecture. Cette vue sera intégrée dans le panneau "Enregistreur".
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.
-
pagePath
chaîne
Chemin de la page HTML du panneau par rapport au répertoire de l'extension.
Renvoie
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
Enregistre un plug-in d'extension Recorder.
Paramètres
-
plugin
Instance mettant en œuvre l'interface RecorderExtensionPlugin.
-
name
chaîne
Nom du plug-in.
-
mediaType
chaîne
Type de contenu de la chaîne générée par le plug-in.