chrome.devtools.recorder

說明

devtools.recorder API 是一項預先發布版功能，可讓您擴充 Chrome 開發人員工具中的錄音工具面板。

如要瞭解如何使用開發人員工具 API，請參閱「開發人員工具 API 摘要」一文。

可用性

概念和用法

自訂匯出功能

如要註冊擴充功能外掛程式，請使用 registerRecorderExtensionPlugin 函式。這個函式需要外掛程式例項、name 和 mediaType 做為參數。外掛程式執行個體必須實作兩種方法：stringify 和 stringifyStep。

擴充功能提供的 name 會顯示在「Recorder」面板中的「Export」選單中。

取決於匯出環境，當使用者點選擴充功能提供的匯出選項時， 「錄音工具」面板會叫用以下兩種函式的其中一個：

• 用於接收完整使用者流程記錄的 stringify
• 接收一個記錄步驟的 stringifyStep

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 查看完整的擴充功能範例。

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

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