chrome.devtools.recorder

説明

chrome.devtools.recorder API を使用して、DevTools の [Recorder] パネルをカスタマイズします。

devtools.recorder API は、Chrome DevTools のレコーダー パネルを拡張できるプレビュー機能です。

Developer Tools API の一般的な概要については、DevTools API の概要をご覧ください。

対象

Chrome 105 以降

コンセプトと使用方法

エクスポート機能のカスタマイズ

拡張機能プラグインを登録するには、registerRecorderExtensionPlugin 関数を使用します。この関数には、パラメータとしてプラグイン インスタンス、name と mediaType が必要です。プラグイン インスタンスでは、stringify と stringifyStep の 2 つのメソッドを実装する必要があります。

拡張機能によって提供される name は、[Recorder] パネルの [Export] メニューに表示されます。

ユーザーが拡張機能が提供するエクスポート オプションをクリックすると、エクスポートのコンテキストに応じて、[Recorder] パネルで次の 2 つの関数のいずれかが呼び出されます。

mediaType パラメータを使用すると、拡張機能は stringify 関数と stringifyStep 関数で生成する出力の種類を指定できます。たとえば、結果が JavaScript プログラムの場合は application/javascript です。

リプレイボタンのカスタマイズ

レコーダーのリプレイボタンをカスタマイズするには、registerRecorderExtensionPlugin 関数を使用します。カスタマイズを有効にするには、プラグインで replay メソッドを実装する必要があります。 メソッドが検出されると、レコーダーにリプレイ ボタンが表示されます。 このボタンをクリックすると、現在の録画オブジェクトが最初の引数として replay メソッドに渡されます。

この時点で、拡張機能はリプレイを処理するための RecorderView を表示したり、他の拡張機能 API を使用してリプレイ リクエストを処理したりできます。新しい RecorderView を作成するには、chrome.devtools.recorder.createView を呼び出します。

例

プラグインをエクスポート

次のコードは、JSON.stringify を使用して録音を文字列化する拡張プラグインを実装しています。

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

再生プラグイン

次のコードは、ダミーのレコーダー ビューを作成し、リプレイ リクエスト時に表示する拡張機能プラグインを実装します。

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 で完全な拡張機能の例を確認する。

型

RecorderExtensionPlugin

[Recorder] パネルが [Recorder] パネルをカスタマイズするために呼び出すプラグイン インターフェース。

プロパティ

  • もう一回見る

    void

    Chrome 112 以降

    拡張機能がカスタム リプレイ機能を実装できるようにします。

    replay 関数は次のようになります。 

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

    • 録画中

      オブジェクト

      ページでのユーザー インタラクションの記録。これは Puppeteer の録音スキーマと一致しているはずです。

  • 文字列化

    void

    録音を [Recorder] パネル形式から文字列に変換します。

    stringify 関数は次のようになります。 

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

    • 録画中

      オブジェクト

      ページでのユーザー インタラクションの記録。これは Puppeteer の録音スキーマと一致している必要があります。

  • stringifyStep

    void

    録音のステップを [Recorder] パネル形式から文字列に変換します。

    stringifyStep 関数は次のようになります。 

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

RecorderView

Chrome 112 以降

[Recorder] パネル内に埋め込まれる拡張機能によって作成されたビューを表します。

プロパティ

  • onHidden

    イベント<functionvoidvoid>

    ビューが非表示になると呼び出されます。

    onHidden.addListener 関数は次のようになります。 

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

    • callback

      機能

      callback パラメータは次のようになります。 

      ()=>void

  • onShown

    イベント<functionvoidvoid>

    ビューが表示されたときに呼び出されます。

    onShown.addListener 関数は次のようになります。 

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

    • callback

      機能

      callback パラメータは次のようになります。 

      ()=>void

  • 表示する

    void

    拡張機能がこのビューを [Recorder] パネルに表示することを示します。

    show 関数は次のようになります。 

    ()=> {...}

Methods

createView()

Chrome 112 以降 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

リプレイを処理できるビューを作成します。このビューは、[Recorder] パネル内に埋め込まれます。

パラメータ

  • title

    文字列

    デベロッパー ツール ツールバーの拡張機能アイコンの横に表示されるタイトル。

  • pagePath

    文字列

    拡張機能のディレクトリを基準とするパネルの HTML ページの相対パス。

戻り値

registerRecorderExtensionPlugin()

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

レコーダー拡張機能プラグインを登録します。

パラメータ

  • RecorderExtensionPlugin インターフェースを実装するインスタンス。

  • name

    文字列

    プラグインの名前。

  • mediaType

    文字列

    プラグインが生成する文字列コンテンツのメディアタイプ。