browser.devtools.recorder

Description

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.

Pour obtenir une introduction générale à l'utilisation des API DevTools, consultez Résumé des API DevTools.

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 en tant que 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 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 suivantes :

• stringify qui reçoit un enregistrement complet du parcours utilisateur
• stringifyStep qui reçoit une seule étape enregistrée

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

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 la méthode est détectée, un bouton de relecture s'affiche dans l'onglet 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 rediffusion ou utiliser d'autres API d'extension pour traiter la demande de rediffusion. Pour créer un RecorderView, appelez browser.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));
  }
}

browser.devtools.recorder.registerRecorderExtensionPlugin(
  new MyPlugin(),
  /*name=*/'MyPlugin',
  /*mediaType=*/'application/json'
);

Plug-in Revoir

Le code suivant implémente un plug-in d'extension qui crée une vue Recorder factice et l'affiche lors d'une demande de relecture :

const view = await browser.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.
  browser.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();
  }
}

browser.devtools.recorder.registerRecorderExtensionPlugin(
  new RecorderPlugin(),
  /* name=*/ 'CoffeeTest'
);

Retrouvez 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