chrome.devtools.recorder

Açıklama

Geliştirici Araçları'nda Kaydedici panelini özelleştirmek için chrome.devtools.recorder API'sini kullanın.

devtools.recorder API, Chrome Geliştirici Araçları'ndaki Kaydedici panelini genişletmenize olanak tanıyan bir önizleme özelliğidir.

Geliştirici Araçları API'lerinin kullanımına genel bir giriş için DevTools API'leri özetine bakın.

Kullanılabilirlik

Chrome 105 ve sonraki sürümler

Kavramlar ve kullanım

Dışa aktarma özelliğini özelleştirme

Bir uzantı eklentisi kaydetmek için registerRecorderExtensionPlugin işlevini kullanın. Bu işlev, parametre olarak bir eklenti örneği ve bir name ve mediaType gerektirir. Eklenti örneği iki yöntem uygulamalıdır: stringify ve stringifyStep.

Uzantı tarafından sağlanan name, Kaydedici panelindeki Dışa Aktar menüsünde görünür.

Dışa aktarma bağlamına bağlı olarak, kullanıcı, uzantı tarafından sağlanan dışa aktarma seçeneğini tıkladığında Kaydedici paneli iki işlevden birini çağırır:

mediaType parametresi, uzantının stringify ve stringifyStep işlevleriyle oluşturduğu çıkış türünü belirtmesine olanak tanır. Örneğin, sonuç bir JavaScript programıysa application/javascript.

Tekrar oynat düğmesini özelleştirme

Kaydedici'deki tekrar oynat düğmesini özelleştirmek için registerRecorderExtensionPlugin işlevini kullanın. Özelleştirmenin geçerli olması için eklentinin replay yöntemini uygulaması gerekir. Yöntem algılanırsa Kaydedici'de bir tekrar oynat düğmesi görünür. Düğme tıklandığında mevcut kayıt nesnesi, replay yöntemine ilk bağımsız değişken olarak aktarılır.

Bu noktada uzantı, tekrar oynatmayı işlemek için bir RecorderView gösterebilir veya tekrar oynatma isteğini işlemek için diğer uzantı API'lerini kullanabilir. Yeni bir RecorderView oluşturmak için chrome.devtools.recorder.createView yöntemini çağırın.

Örnekler

Eklentiyi dışa aktar

Aşağıdaki kod, JSON.stringify kullanarak bir kaydı dizeleyen bir uzantı eklentisi uygular:

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 eklentisi

Aşağıdaki kod, model bir Kaydedici görünümü oluşturan bir uzantı eklentisi uygular ve eklentiyi yeniden oynatma isteği üzerine görüntüler:

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

GitHub'da eksiksiz bir uzantı örneği bulabilirsiniz.

Türler

RecorderExtensionPlugin

Kaydedici panelinin Kaydedici panelini özelleştirmek için çağırdığı eklenti arayüzü.

Özellikler

  • yeniden oynat

    void

    Chrome 112 ve sonraki sürümler

    Uzantının, özel tekrar oynatma işlevi uygulamasına olanak tanır.

    replay işlevi şu şekilde görünür: 

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

  • dizelemek

    void

    Kaydedici panel biçimindeki bir kaydı dizeye dönüştürür.

    stringify işlevi şu şekilde görünür: 

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

  • stringifyStep

    void

    Kaydın bir adımını Kaydedici panel biçiminden dizeye dönüştürür.

    stringifyStep işlevi şu şekilde görünür: 

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

RecorderView

Chrome 112 ve sonraki sürümler

Kaydedici paneline yerleştirilecek, uzantı tarafından oluşturulan bir görünümü temsil eder.

Özellikler

  • onHidden

    Etkinlik<functionvoidvoid>

    Görünüm gizlendiğinde tetiklenir.

    onHidden.addListener işlevi şu şekilde görünür: 

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

    • geri çağırma

      işlev

      callback parametresi şu şekilde görünür: 

      ()=>void

  • onShown

    Etkinlik<functionvoidvoid>

    Görünüm gösterildiğinde tetiklenir.

    onShown.addListener işlevi şu şekilde görünür: 

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

    • geri çağırma

      işlev

      callback parametresi şu şekilde görünür: 

      ()=>void

  • göster

    void

    Uzantının, Kaydedici panelinde bu görünümü göstermek istediğini belirtir.

    show işlevi şu şekilde görünür: 

    ()=> {...}

Yöntemler

createView()

Chrome 112 ve sonraki sürümler 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

Tekrar oynatmayı işleyebilecek bir görünüm oluşturur. Bu görünüm, Kaydedici bölmesine yerleştirilir.

Parametreler

  • title

    dize

    Geliştirici Araçları araç çubuğundaki uzantı simgesinin yanında görüntülenen başlık.

  • pagePath

    dize

    Uzantı dizinine göre panelin HTML sayfasının yolu.

İlerlemeler

registerRecorderExtensionPlugin()

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

Kaydedici uzantı eklentisi kaydeder.

Parametreler

  • RecorderExtensionExtensionin arayüzünü uygulayan bir örnek.

  • ad

    dize

    Eklentinin adı.

  • mediaType

    dize

    Eklentinin oluşturduğu dize içeriğinin medya türü.