chrome.devtools.recorder

Description

devtools.recorder L'API est une fonctionnalité en preview qui vous permet d'étendre le panneau Enregistreur dans les Outils pour les développeurs Chrome.

Pour une introduction générale à l'utilisation des API des outils de développement, consultez le résumé des API des outils de développement.

Disponibilité

Concepts et utilisation

Personnaliser la fonctionnalité d'exportation

Pour enregistrer un plug-in d'extension, utilisez la fonction registerRecorderExtensionPlugin. Cette fonction nécessite une instance de plug-in, un name et un mediaType comme paramètres. L'instance de plug-in doit implémenter deux méthodes : stringify et stringifyStep.

Le name fourni par l'extension s'affiche dans le menu Exporter du panneau Enregistreur.

En fonction du 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 utilisateur
• stringifyStep 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 stringify et stringifyStep fonctions. Par exemple, application/javascript si le résultat est un programme JavaScript.

Personnaliser le bouton "Revoir"

Pour personnaliser le bouton "Revoir" dans l'Enregistreur, utilisez la fonction registerRecorderExtensionPlugin. Le plug-in doit implémenter la méthode replay pour que la personnalisation prenne effet. Si la méthode est détectée, un bouton "Revoir" 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.

Exemples

Plug-in d'exportation

Le code suivant implémente un plug-in d'extension qui transforme un enregistrement en chaîne à 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'
);

Plug-in de relecture

Le code suivant implémente un plug-in d'extension qui crée une vue d'enregistreur factice 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.

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

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