chrome.devtools.recorder

Description

Utilisez l'API chrome.devtools.recorder pour personnaliser le panneau "Enregistreur" dans les outils de développement.

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.

Consultez le résumé des API DevTools pour obtenir une présentation générale de l'utilisation des API Developer Tools.

Garantie de disponibilité

Chrome 105 et versions ultérieures

Concepts et utilisation

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:

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.

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.

Exemples

Exporter le plug-in

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

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érieure

    Permet à l'extension d'implémenter une fonctionnalité de relecture personnalisée.

    La fonction replay se présente comme suit : 

    (recording: object)=> {...}

  • Stringify

    void

    Convertit un enregistrement du format du panneau "Enregistreur" en chaîne.

    La fonction stringify se présente comme suit : 

    (recording: object)=> {...}

  • 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

Chrome 112 ou version ultérieure

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 112 ou version ultérieure 
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

  • 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.