browser.devtools.recorder

Beschrijving

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

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

Ga naar Overzicht van DevTools API's voor een algemene inleiding over het gebruik van API's voor ontwikkelaarstools.

Beschikbaarheid

Chrome 105+ browser.* sinds Chrome 152

Concepten en gebruik

De exportfunctie aanpassen

Gebruik de functie registerRecorderExtensionPlugin om een extensieplug-in te registreren. Deze functie vereist een plug-inexemplaar, een name en een mediaType als parameters. De plug-inexemplaar moet 2 methoden implementeren: stringify en stringifyStep.

De name die door de extensie wordt geleverd, wordt getoond in het menu Exporteren in het deelvenster Recorder.

Afhankelijk van de exportcontext roept het deelvenster Recorder een van de 2 functies aan als de gebruiker op de exportoptie van de extensie klikt:

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

De knop voor opnieuw afspelen aanpassen

Gebruik de functie registerRecorderExtensionPlugin om de knop Opnieuw afspelen in de Recorder aan te passen. De plug-in moet de methode replay implementeren om de aanpassing door te voeren. Als de methode wordt gedetecteerd, verschijnt er een knop voor opnieuw afspelen in de Recorder. Als je op de knop klikt, wordt het huidige opnameobject als eerste argument doorgegeven aan de methode replay.

Op dit moment kan de extensie een RecorderView tonen om de herhaling te verwerken of andere extensie-API's gebruiken om het herhalingsverzoek te verwerken. Roep browser.devtools.recorder.createView aan om een nieuwe RecorderView te maken.

Voorbeelden

Exportplug-in

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

Replay-plug-in

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

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

Je vindt een compleet voorbeeld van een extensie op GitHub.

Typen

RecorderExtensionPlugin

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

Eigenschappen

  • opnieuw afspelen

    ongeldig

    Chrome 112+ -browser.* sinds Chrome 152

    Hiermee kan de extensie aangepaste herhalingsfunctionaliteit implementeren.

    De functie replay ziet er zo uit: 

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

  • stringify

    ongeldig

    Zet een opname van de indeling van het deelvenster Recorder om in een tekenreeks.

    De functie stringify ziet er zo uit: 

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

  • stringifyStep

    ongeldig

    Zet een stap van de opname van de indeling van het Recorder-deelvenster om in een tekenreeks.

    De functie stringifyStep ziet er zo uit: 

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

    • stap

      object

      Een stap van de opname van een gebruikersinteractie met de pagina. Dit moet overeenkomen met het stapschema van Puppeteer.

RecorderView

Chrome 112+ -browser.* sinds Chrome 152

Stelt een weergave voor die is gemaakt door een extensie om te worden ingesloten in het Recorder-deelvenster.

Eigenschappen

  • onHidden

    Event<functionvoidvoid>

    Wordt geactiveerd als de weergave is verborgen.

    De functie onHidden.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      () => void

  • onShown

    Event<functionvoidvoid>

    Wordt geactiveerd als de weergave wordt getoond.

    De functie onShown.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      () => void

  • weergeven

    ongeldig

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

    De functie show ziet er zo uit: 

    () => {...}

Methoden

createView()

Chrome 112+ -browser.* sinds Chrome 152 
browser.devtools.recorder.createView(
  title: string,
  pagePath: string,
): RecorderView

Maakt een weergave die de herhaling kan verwerken. Deze weergave wordt ingesloten in het Recorder-deelvenster.

Parameters

  • titel

    tekenreeks

    Titel die naast het extensie-icoon wordt getoond in de werkbalk van de tools voor ontwikkelaars.

  • pagePath

    tekenreeks

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

Retourzendingen

registerRecorderExtensionPlugin()

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

Registreert een plug-in voor de Recorder-extensie.

Parameters

  • Een instantie die de RecorderExtensionPlugin-interface implementeert.

  • name

    tekenreeks

    De naam van de plug-in.

  • mediaType

    tekenreeks

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