chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

Açıklama

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

Kullanılabilirlik

Chrome 105+

Geliştirici Araçları API'lerinin kullanımına genel bir giriş için Geliştirici Araçları API'leri özeti bölümüne bakın.

Genel Bakış

devtools.recorder API, Chrome Geliştirici Araçları'ndaki Kaydedici panelini genişletmenize olanak tanıyan bir özellik önizlemesidir. Chrome M105'ten itibaren dışa aktarma işlevini genişletebilirsiniz. Chrome M112'den itibaren tekrar oynatma düğmesini genişletebilirsiniz.

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

Dışa aktarma eklentisi örneği

Aşağıdaki kod, JSON.stringify kullanarak bir kaydı dizeye dönüştüren 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'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 oynatma 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 iletilir.

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 komutunu çağırın.

Tekrar oynatma eklentisi örneği

Aşağıdaki kod, sahte bir Kaydedici görünümü oluşturan ve tekrar oynatma isteği üzerine bu görünümü gösteren 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 bulabilirsiniz.

Türler

RecorderExtensionPlugin

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

Özellikler

  • yeniden oynat

    geçersiz

    Chrome 112+

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

    replay işlevi şu şekildedir: 

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

  • stringify

    geçersiz

    Kaydedici panelindeki bir kaydı dizeye dönüştürür.

    stringify işlevi şu şekildedir: 

    (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 şekildedir: 

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

RecorderView

Chrome 112+

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

Özellikler

  • onHidden

    Event<functionvoidvoid>

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

    onHidden.addListener işlevi şu şekildedir: 

    (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 şekildedir: 

    (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 şekildedir: 

    () => {...}

Yöntemler

createView()

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

Tekrar oynatmayı işleyebilen 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ö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ü.