chrome.devtools.recorder

Beschrijving

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

devtools.recorder API is een previewfunctie waarmee je het Recorder-paneel in Chrome DevTools kunt uitbreiden.

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

Beschikbaarheid

Chrome 105+

Concepten en gebruik

De exportfunctie aanpassen

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

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

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

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

De herhaalknop aanpassen

Om de afspeelknop in de Recorder aan te passen, gebruikt u de functie registerRecorderExtensionPlugin . De plugin moet de replay methode implementeren om de aanpassing te laten werken. Als de methode wordt gedetecteerd, verschijnt er een afspeelknop in de Recorder . Wanneer u op de knop klikt, wordt het huidige opnameobject als eerste argument aan de replay methode doorgegeven.

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

Voorbeelden

Export-plug-in

De volgende code implementeert een extensieplugin die een opname omzet naar een tekenreeks 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'
);

Replay-plugin

De volgende code implementeert een extensieplugin die een dummy-recorderweergave creëert 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'
);

Een compleet voorbeeld van een extensie is te vinden op GitHub.

Soorten

RecorderExtensionPlugin

Een plugin-interface die het opnamepaneel aanroept om het opnamepaneel aan te passen.

Eigenschappen

  • opnieuw afspelen

    leegte

    Chrome 112+

    Hiermee kan de extensie aangepaste herhalingsfunctionaliteit implementeren.

    De replay ziet er als volgt uit: 

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

  • stringify

    leegte

    Converteert een opname vanuit het formaat van het paneel 'Recorder' naar een tekenreeks.

    De stringify functie ziet er als volgt uit: 

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

  • stringifyStep

    leegte

    Converteert een stap van de opname vanuit het formaat van het opnamepaneel naar een tekenreeks.

    De functie stringifyStep ziet er als volgt uit: 

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

RecorderView

Chrome 112+

Dit vertegenwoordigt een weergave die is gemaakt door een extensie en die in het Recorder-paneel kan worden ingesloten.

Eigenschappen

  • verborgen

    Event<functionvoidvoid>

    Wordt geactiveerd wanneer de weergave wordt verborgen.

    De functie onHidden.addListener ziet er als volgt uit: 

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

    • terugbelverzoek

      functie

      De callback parameter ziet er als volgt uit: 

      () => void

  • getoond

    Event<functionvoidvoid>

    Wordt geactiveerd wanneer de weergave wordt getoond.

    De functie onShown.addListener ziet er als volgt uit: 

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

    • terugbelverzoek

      functie

      De callback parameter ziet er als volgt uit: 

      () => void

  • show

    leegte

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

    De show ziet er als volgt uit: 

    () => {...}

Methoden

createView()

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

Hiermee wordt een weergave gemaakt die de herhaling kan verwerken. Deze weergave wordt ingesloten in het opnamepaneel.

Parameters

  • titel

    snaar

    De titel die naast het extensiepictogram in de werkbalk van de ontwikkelaarstools wordt weergegeven.

  • paginapad

    snaar

    Het pad van de HTML-pagina van het paneel, relatief ten opzichte van de extensiemap.

Retourneert

registerRecorderExtensionPlugin()

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

Registreert een Recorder-extensieplugin.

Parameters

  • Een instantie die de RecorderExtensionPlugin-interface implementeert.

  • naam

    snaar

    De naam van de plugin.

  • mediaType

    snaar

    Het mediatype van de tekenreeksinhoud die de plugin produceert.