chrome.devtools.recorder

Açıklama

Geliştirici Araçları'ndaki 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'lerini kullanmaya ilişkin genel bir giriş için Geliştirici Araçları API'lerine genel bakış başlıklı makaleyi inceleyin.

Kullanılabilirlik

Chrome 105 veya daha yeni bir sürüm

Kavramlar ve kullanım

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

Uzantı eklentisi kaydetmek için registerRecorderExtensionPlugin işlevini kullanın. Bu işlev için parametre olarak bir eklenti örneği, bir name ve bir mediaType gerekir. 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österilir.

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 çıktı türünü belirtmesine olanak tanır. Örneğin, application/javascript sonuç bir JavaScript programıysa.

Tekrar oynat düğmesini özelleştirme

Kaydedici'deki tekrar oynatma 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 oynatma düğmesi gösterilir. Düğme tıklandığında, mevcut kayıt nesnesi replay yöntemine ilk bağımsız değişken olarak iletilir.

Bu noktada uzantı, tekrar oynatma işlemini gerçekleştirmek için 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 öğesini çağırın.

Örnekler

Dışa aktarma eklentisi

Aşağıdaki kod, JSON.stringify kullanarak kaydı dizeleştiren 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, sahte bir Kaydedici görünümü oluşturan ve yeniden oynatma isteği üzerine bu görünümü görüntüleyen bir uzantı eklentisi uygular:

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 tam bir uzantı örneği bulabilirsiniz.

Türler

RecorderExtensionPlugin

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

Özellikler

  • yeniden oynat

    geçersiz

    Chrome 112 veya daha yeni bir sürüm

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

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

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

  • stringify

    geçersiz

    Recorder paneli biçimindeki bir kaydı dizeye dönüştürür.

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

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

  • stringifyStep

    geçersiz

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

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

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

RecorderView

Chrome 112 veya daha yeni bir sürüm

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

Özellikler

  • onHidden

    Event<functionvoidvoid>

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

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

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

    • callback

      işlev

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

      () => void

  • onShown

    Event<functionvoidvoid>

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

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

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

    • callback

      işlev

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

      () => void

  • göster

    geçersiz

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

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

    () => {...}

Yöntemler

createView()

Chrome 112 veya daha yeni bir sürüm 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
): RecorderView

Yeniden oynatmayı işleyebilecek bir görünüm oluşturur. Bu görünüm, Kaydedici panelinin içine yerleştirilir.

Parametreler

  • title

    dize

    Geliştirici Araçları araç çubuğunda uzantı simgesinin yanında gösterilen başlık.

  • pagePath

    dize

    Panelin HTML sayfasının uzantı dizinine göre yolu.

İadeler

registerRecorderExtensionPlugin()

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

Kaydedici uzantısı eklentisini kaydeder.

Parametreler

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

  • ad

    dize

    Eklentinin adı.

  • mediaType

    dize

    Eklentinin ürettiği dize içeriğinin medya türü.