説明
chrome.devtools.recorder
API を使用して、DevTools の [Recorder] パネルをカスタマイズします。
対象
Developer Tools API の一般的な概要については、DevTools API の概要をご覧ください。
概要
devtools.recorder
API は、Chrome DevTools のレコーダー パネルを拡張できるプレビュー機能です。Chrome M105 以降では、エクスポート機能を拡張できます。Chrome M112 以降では、リプレイボタンを拡張できます。
エクスポート機能のカスタマイズ
拡張機能プラグインを登録するには、registerRecorderExtensionPlugin
関数を使用します。この関数には、パラメータとしてプラグイン インスタンス、name
と mediaType
が必要です。プラグイン インスタンスでは、stringify
と stringifyStep
の 2 つのメソッドを実装する必要があります。
拡張機能によって提供される name
は、[Recorder] パネルの [Export] メニューに表示されます。
ユーザーが拡張機能が提供するエクスポート オプションをクリックすると、エクスポートのコンテキストに応じて、[Recorder] パネルで次の 2 つの関数のいずれかが呼び出されます。
- ユーザーフロー記録全体を受け取る
stringify
- 記録された 1 つのステップを受け取る
stringifyStep
mediaType
パラメータを使用すると、拡張機能は stringify
関数と stringifyStep
関数で生成する出力の種類を指定できます。たとえば、結果が JavaScript プログラムの場合は application/javascript
です。
プラグインの例をエクスポートする
次のコードは、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'
);
リプレイボタンのカスタマイズ
レコーダーのリプレイボタンをカスタマイズするには、registerRecorderExtensionPlugin
関数を使用します。カスタマイズを有効にするには、プラグインで replay
メソッドを実装する必要があります。
メソッドが検出されると、レコーダーにリプレイ ボタンが表示されます。
このボタンをクリックすると、現在の録画オブジェクトが最初の引数として replay
メソッドに渡されます。
この時点で、拡張機能はリプレイを処理するための RecorderView
を表示したり、他の拡張機能 API を使用してリプレイ リクエストを処理したりできます。新しい RecorderView
を作成するには、chrome.devtools.recorder.createView
を呼び出します。
再生プラグインの例
次のコードは、ダミーのレコーダー ビューを作成し、リプレイ リクエスト時に表示する拡張機能プラグインを実装します。
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) => {...}
-
ステップ
オブジェクト
ページでのユーザー操作を記録するステップ。これは Puppeteer のステップ スキーマと一致しているはずです。
-
RecorderView
[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.devtools.recorder.createView(
title: string,
pagePath: string,
)
リプレイを処理できるビューを作成します。このビューは、[Recorder] パネル内に埋め込まれます。
パラメータ
-
title
文字列
デベロッパー ツール ツールバーの拡張機能アイコンの横に表示されるタイトル。
-
pagePath
文字列
拡張機能のディレクトリを基準とするパネルの HTML ページの相対パス。
戻り値
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
レコーダー拡張機能プラグインを登録します。
パラメータ
-
plugin
RecorderExtensionPlugin インターフェースを実装するインスタンス。
-
name
文字列
プラグインの名前。
-
mediaType
文字列
プラグインが生成する文字列コンテンツのメディアタイプ。