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

Disponibilité

Chrome 105 ou version ultérieure

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, 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:

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.

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.

Exemples

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

Relancer le plug-in

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.

Types

RecorderExtensionPlugin

Interface de plug-in appelée par le panneau "Enregistreur" pour personnaliser ce panneau.

Propriétés

  • revoir

    vide

    Chrome 112 et versions ultérieures

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

    La fonction replay se présente comme suit: 

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

  • chaîner

    vide

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

    La fonction stringify se présente comme suit: 

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

  • stringifyStep

    vide

    Convertit une étape de l'enregistrement au format du panneau "Enregistreur" en chaîne.

    La fonction stringifyStep se présente comme suit: 

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

    • étape

      objet

      Étape de l'enregistrement d'une interaction de l'utilisateur avec la page. Il doit correspondre au schéma de pas de Puppeteer.

RecorderView

Chrome 112 et versions ultérieures

Représente une vue créée par une extension à intégrer dans le panneau "Enregistreur".

Propriétés

  • onHidden

    Événement<functionvoid>

    Déclenché lorsque la vue est masquée

    La fonction onHidden.addListener se présente comme suit: 

    (callback: function) => {...}

    • rappel

      fonction

      Le paramètre callback se présente comme suit: 

      () => void

  • onShown

    Événement<functionvoid>

    Déclenché lorsque la vue est affichée.

    La fonction onShown.addListener se présente comme suit: 

    (callback: function) => {...}

    • rappel

      fonction

      Le paramètre callback se présente comme suit: 

      () => void

  • afficher

    vide

    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 et versions ultérieures 
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

  • titre

    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 relative au répertoire de l'extension.

Renvoie

registerRecorderExtensionPlugin()

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

Enregistre un plug-in d'extension Enregistreur.

Paramètres

  • Instance qui implémente l'interface RecorderExtensionPlugin.

  • nom

    chaîne

    Nom du plug-in.

  • mediaType

    chaîne

    Type de contenu du contenu de chaîne généré par le plug-in.