browser.devtools.recorder

説明

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

デベロッパー ツール API の使用に関する一般的な概要については、DevTools API の概要をご覧ください。

対象

コンセプトと使用方法

エクスポート機能をカスタマイズする

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

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

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

• ユーザーフローの記録全体を受け取る stringify
• 単一の記録されたステップを受け取る stringifyStep

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

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

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

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

例

エクスポート プラグイン

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

class MyPlugin {
  stringify(recording) {
    return Promise.resolve(JSON.stringify(recording));
  }
  stringifyStep(step) {
    return Promise.resolve(JSON.stringify(step));
  }
}

browser.devtools.recorder.registerRecorderExtensionPlugin(
  new MyPlugin(),
  /*name=*/'MyPlugin',
  /*mediaType=*/'application/json'
);

Replay プラグイン

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

const view = await browser.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.
  browser.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();
  }
}

browser.devtools.recorder.registerRecorderExtensionPlugin(
  new RecorderPlugin(),
  /* name=*/ 'CoffeeTest'
);

GitHub で完全な拡張機能の例をご覧ください。

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

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