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'yi kullanın.

Kullanılabilirlik

Chrome 105 veya daha yeni bir sürüm

Geliştirici Araçları API'lerini kullanmaya ilişkin genel bir giriş için Geliştirici Araçları API'lerine genel bakış konusuna 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'ten itibaren dışa aktarma işlevini genişletebilirsiniz. Chrome M112'den itibaren tekrar oynatma düğmesini uzatabilirsiniz.

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

Eklentiyi dışa aktarma örneği

Aşağıdaki kod, JSON.stringify kullanarak 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 oynatma düğmesini özelleştirmek için registerRecorderExtensionPlugin işlevini kullanın. Özelleştirmenin geçerli olması için eklenti replay yöntemini uygulamalıdır. 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ı işlemek için RecorderView gösterebilir veya tekrar isteğini işlemek için diğer uzantı API'lerini kullanabilir. Yeni bir RecorderView oluşturmak için chrome.devtools.recorder.createView işlevini çağırın.

Tekrar oynatma eklentisi örneği

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ı eklentisini 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

    void

    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

    void

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

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

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

  • stringifyStep

    void

    Kaydedici panelindeki kayıt adımını 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ü temsil 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

    void

    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 paneline 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ü.