chrome.devtools.recorder

Açıklama

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

Kullanılabilirlik

Chrome 105 ve sonraki sürümler 'nı inceleyin.

Geliştirici Araçları API'lerinin kullanımıyla ilgili genel bilgiler için Geliştirici Araçları API'leri özeti sayfasına bakın.

Genel Bakış

devtools.recorder API, Chrome Geliştirici Araçları'ndaki Kaydedici panelini genişletmenize olanak tanıyan bir önizleme özelliğidir. Chrome M105 sürümünden itibaren dışa aktarma işlevini genişletebilirsiniz. Chrome M112 sürümünden itibaren tekrar oynat düğmesini uzatabilirsiniz.

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

Bir uzantı eklentisini kaydetmek için registerRecorderExtensionPlugin işlevini kullanın. Bu işlev, parametre olarak bir eklenti örneği, name ve mediaType öğelerini 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ö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 şu iki işlevden birini çağırır:

mediaType parametresi, uzantının stringify ve stringifyStep işlevleri. Örneğin, sonuç bir JavaScript ise application/javascript çok önemli.

Eklenti örneğini dışa aktarma

Aşağıdaki kod, JSON.stringify kullanarak bir 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'
);

Tekrar oynat düğmesini özelleştirme

Kaydedici'de 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üğmenin tıklanmasıyla birlikte mevcut kayıt nesnesi, replay yöntemine ilk bağımsız değişken olarak aktarılır.

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

Tekrar oynatma eklentisi örneği

Aşağıdaki kod, sahte bir Kaydedici görünümü oluşturan ve bunu bir tekrar oynatma isteğinde 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 eksiksiz bir uzantı örneği bulun.

Türler

RecorderExtensionPlugin

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

Özellikler

  • yeniden oynat

    geçersiz

    Chrome 112 ve sonraki sürümler 'nı inceleyin.

    Uzantının, özel tekrar oynatma işlevini uygulamasına izin verir.

    replay işlevi aşağıdaki gibi görünür: 

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

  • dizelik haline getirmek

    geçersiz

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

    stringify işlevi aşağıdaki gibi görünür: 

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

  • stringifyStep

    geçersiz

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

    stringifyStep işlevi aşağıdaki gibi görünür: 

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

RecorderView

Chrome 112 ve sonraki sürümler 'nı inceleyin.

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

Özellikler

  • onHidden

    Etkinlik<İşlevler geçersiz>

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

    onHidden.addListener işlevi aşağıdaki gibi görünür: 

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

    • geri çağırma

      işlev

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

      () => void

  • onShown

    Etkinlik<İşlevler geçersiz>

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

    onShown.addListener işlevi aşağıdaki gibi görünür: 

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

    • geri çağırma

      işlev

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

      () => void

  • göster

    geçersiz

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

    show işlevi aşağıdaki gibi görünür: 

    () => {...}

Yöntemler

createView()

Chrome 112 ve sonraki sürümler 'nı inceleyin.
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 paneline 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.

İadeler

registerRecorderExtensionPlugin()

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

Kaydedici uzantı eklentisi kaydeder.

Parametreler

  • Kaydedici Uzatma eklentisini uygulayan bir örnek.

  • ad

    dize

    Eklentinin adı.

  • mediaType

    dize

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