chrome.devtools.recorder

Beschrijving

Gebruik de chrome.devtools.recorder API om het Recorder-paneel in DevTools aan te passen.

Beschikbaarheid

Chroom 105+

Zie het overzicht van DevTools API's voor een algemene inleiding tot het gebruik van Developer Tools API's.

Overzicht

devtools.recorder API is een preview-functie waarmee u het Recorder-paneel in Chrome DevTools kunt uitbreiden. Vanaf Chrome M105 kunt u de exportfunctionaliteit uitbreiden. Vanaf Chrome M112 kun je de replay-knop uitbreiden.

De exportfunctie aanpassen

Om een ​​extensieplug-in te registreren, gebruikt u de functie registerRecorderExtensionPlugin . Deze functie vereist een plug-ininstantie, een name en een mediaType als parameters. De plug-ininstantie moet twee methoden implementeren: stringify en stringifyStep .

De name die door de extensie wordt verstrekt, verschijnt in het menu Exporteren in het Recorder- paneel.

Afhankelijk van de exportcontext, wanneer de gebruiker op de exportoptie van de extensie klikt, roept het Recorder- paneel een van de twee functies op:

Met de parameter mediaType kan de extensie het soort uitvoer opgeven dat wordt gegenereerd met de functies stringify en stringifyStep . Bijvoorbeeld application/javascript als het resultaat een JavaScript-programma is.

Voorbeeld van plug-in exporteren

De volgende code implementeert een extensieplug-in die een opname samenvoegt met behulp van 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'
);

De herhalingsknop aanpassen

Om de afspeelknop in de Recorder aan te passen, gebruikt u de functie registerRecorderExtensionPlugin . De plug-in moet de replay methode implementeren om de aanpassing van kracht te laten worden. Als de methode wordt gedetecteerd, verschijnt er een herhalingsknop in de Recorder . Als u op de knop klikt, wordt het huidige opnameobject doorgegeven als het eerste argument voor de replay .

Op dit punt kan de extensie een RecorderView weergeven voor het afhandelen van de herhaling of andere extensie-API's gebruiken om de herhalingsaanvraag te verwerken. Om een ​​nieuwe RecorderView te maken, roept u chrome.devtools.recorder.createView aan.

Voorbeeld van plug-in opnieuw afspelen

De volgende code implementeert een uitbreidingsplug-in die een dummy Recorder-weergave maakt en deze weergeeft bij een herhalingsverzoek:

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

Vind een compleet extensievoorbeeld op GitHub.

Soorten

RecorderExtensionPlugin

Een plug-ininterface die het Recorder-paneel aanroept om het Recorder-paneel aan te passen.

Eigenschappen

  • opnieuw afspelen

    leegte

    Chroom 112+

    Hiermee kan de extensie aangepaste herhalingsfunctionaliteit implementeren.

    De replay functie ziet er als volgt uit: 

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

  • stringeren

    leegte

    Converteert een opname vanuit het Recorder-paneelformaat naar een tekenreeks.

    De stringify functie ziet er als volgt uit: 

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

  • stringifyStep

    leegte

    Converteert een stap van de opname vanuit het Recorder-paneelformaat naar een tekenreeks.

    De stringifyStep functie ziet er als volgt uit: 

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

RecorderView

Chroom 112+

Vertegenwoordigt een weergave die is gecreëerd door uitbreiding en die moet worden ingebed in het Recorder-paneel.

Eigenschappen

  • opVerborgen

    Gebeurtenis<functionvoidvoid>

    Wordt geactiveerd wanneer de weergave verborgen is.

    De onHidden.addListener -functie ziet er als volgt uit: 

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

    • terugbellen

      functie

      De callback parameter ziet er als volgt uit: 

      () => void

  • opGetoond

    Gebeurtenis<functionvoidvoid>

    Wordt geactiveerd wanneer de weergave wordt getoond.

    De onShown.addListener -functie ziet er als volgt uit: 

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

    • terugbellen

      functie

      De callback parameter ziet er als volgt uit: 

      () => void

  • show

    leegte

    Geeft aan dat de extensie deze weergave wil weergeven in het Recorder-paneel.

    De show ziet er als volgt uit: 

    () => {...}

Methoden

createView()

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

Creëert een weergave die de herhaling aankan. Deze weergave wordt ingebed in het Recorder-paneel.

Parameters

  • titel

    snaar

    Titel die wordt weergegeven naast het extensiepictogram op de werkbalk Ontwikkelaarstools.

  • paginaPad

    snaar

    Pad van de HTML-pagina van het paneel ten opzichte van de extensiemap.

Retouren

registerRecorderExtensionPlugin()

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

Registreert een Recorder-extensieplug-in.

Parameters

  • Een exemplaar dat de RecorderExtensionPlugin-interface implementeert.

  • naam

    snaar

    De naam van de plug-in.

  • mediatype

    snaar

    Het mediatype van de tekenreeksinhoud die de plug-in produceert.