chrome.devtools.recorder

Description

Disponibilité

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

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 prolonger 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, ainsi que name et mediaType comme paramètres. L'instance de plug-in doit implémenter deux méthodes: stringify et stringifyStep.

Le fichier name fourni par l'extension s'affiche dans le menu Export (Exporter) du panneau 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:

• stringify qui reçoit un enregistrement de l'intégralité du parcours utilisateur
• stringifyStep qui reçoit un seul pas enregistré

Le paramètre mediaType permet à l'extension de spécifier le type de sortie qu'elle génère avec le Fonctions stringify et stringifyStep. Par exemple, application/javascript si le résultat est un code JavaScript programme.

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'
);

Personnaliser le bouton de relecture

Pour personnaliser le bouton de relecture dans l'Enregistreur, utilisez la fonction registerRecorderExtensionPlugin. Le plug-in doit implémenter la méthode replay pour que la personnalisation prenne effet. Si cette 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 à 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'
);

Recherchez un exemple d'extension complet sur GitHub.

chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

chrome.devtools.recorder.registerRecorderExtensionPlugin(
  plugin: RecorderExtensionPlugin,
  name: string,
  mediaType: string,
)