更新日: 2026-09-25 robots: noindex
説明
chrome.devtools.recorder API を使用して、DevTools のレコーダー パネルをカスタマイズします。
対象
デベロッパー ツール API の使用に関する一般的な概要については、デベロッパー ツール API の概要をご覧ください。
概要
devtools.recorder API は、Chrome DevTools のレコーダー パネルを拡張できるプレビュー機能です。Chrome M105 以降では、エクスポート機能を拡張できます。Chrome M112 以降では、リプレイボタンを拡張できます。
エクスポート機能のカスタマイズ
拡張機能プラグインを登録するには、registerRecorderExtensionPlugin 関数を使用します。この関数には、パラメータとしてプラグイン インスタンス、name、mediaType が必要です。プラグイン インスタンスは、stringify と stringifyStep の 2 つのメソッドを実装する必要があります。
拡張機能によって提供される name が、[Recorder] パネルの [Export] メニューに表示されます。
エクスポートのコンテキストに応じて、ユーザーが拡張機能によって提供されるエクスポート オプションをクリックすると、[レコーダー] パネルは次の 2 つの関数のいずれかを呼び出します。
stringify。ユーザーフローの記録全体を受け取ります。stringifyStep: 記録された 1 つの歩数を受け取ります。
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 メソッドを実装する必要があります。メソッドが検出されると、[Recorder] に再生ボタンが表示されます。ボタンをクリックすると、現在の録画オブジェクトが replay メソッドの最初の引数として渡されます。
この時点で、拡張機能はリプレイを処理するための RecorderView を表示するか、他の拡張機能 API を使用してリプレイ リクエストを処理できます。新しい RecorderView を作成するには、chrome.devtools.recorder.createView を呼び出します。
リプレイ プラグインの例
次のコードは、ダミーの Recorder ビューを作成し、リプレイ リクエスト時に表示する拡張機能プラグインを実装しています。
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
レコーダー パネルをカスタマイズするためにレコーダー パネルが呼び出すプラグイン インターフェース。
プロパティ
-
もう一回見る
void
Chrome 112 以降拡張機能がカスタム リプレイ機能を実装できるようにします。
replay関数は次のようになります。(recording: object) => {...}
-
録画中
オブジェクト
ページでのユーザー操作の記録。これは Puppeteer の記録スキーマと一致する必要があります。
-
-
stringify
void
レコーダー パネルの形式から文字列に録音を変換します。
stringify関数は次のようになります。(recording: object) => {...}
-
録画中
オブジェクト
ページでのユーザー操作の記録。これは Puppeteer の記録スキーマと一致する必要があります。
-
-
stringifyStep
void
レコーダー パネルの形式から文字列に記録のステップを変換します。
stringifyStep関数は次のようになります。(step: object) => {...}
-
解説
オブジェクト
ページでのユーザー インタラクションの記録のステップ。これは Puppeteer のステップ スキーマと一致する必要があります。
-
RecorderView
レコーダー パネル内に埋め込まれる拡張機能によって作成されたビューを表します。
プロパティ
-
onHidden
イベント<functionvoidvoid>
ビューが非表示になったときに呼び出されます。
onHidden.addListener関数は次のようになります。(callback: function) => {...}
-
callback
関数
callbackパラメータは次のようになります。() => void
-
-
onShown
イベント<functionvoidvoid>
ビューが表示されたときに呼び出されます。
onShown.addListener関数は次のようになります。(callback: function) => {...}
-
callback
関数
callbackパラメータは次のようになります。() => void
-
-
表示する
void
拡張機能がこのビューを [Recorder] パネルに表示することを指定します。
show関数は次のようになります。() => {...}
メソッド
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
): RecorderView
リプレイを処理できるビューを作成します。このビューはレコーダー パネル内に埋め込まれます。
パラメータ
-
title
文字列
デベロッパー ツールのツールバーで拡張機能アイコンの横に表示されるタイトル。
-
pagePath
文字列
拡張機能ディレクトリを基準としたパネルの HTML ページのパス。
戻り値
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
): void
レコーダー拡張機能プラグインを登録します。
パラメータ
-
プラグイン
RecorderExtensionPlugin インターフェースを実装するインスタンス。
-
name
文字列
プラグインの名前。
-
mediaType
文字列
プラグインが生成する文字列コンテンツのメディアタイプ。