chrome.devtools.recorder

說明

使用 chrome.devtools.recorder API 自訂開發人員工具中的「錄音工具」面板。

可用性

Chrome 105 以上版本

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

總覽

devtools.recorder API 是一項預先發布版功能，可讓您擴充 Chrome 開發人員工具中的錄音工具面板。 你可以從 Chrome M105 開始擴充匯出功能。從 Chrome M112 開始，您可以擴充重播按鈕。

自訂匯出功能

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

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

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

• 用於接收完整使用者流程記錄的 stringify
• 接收一個記錄步驟的 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

「錄音工具」面板會叫用的外掛程式介面，以自訂「錄音工具」面板。

屬性

• 重播

  void

  Chrome 112 以上版本

  允許擴充功能導入自訂重播功能。

  replay 函式如下所示：

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

  • 錄製中

    物件

    使用者與網頁互動的記錄。必須與 Puppeteer 的錄製結構定義相符。

• 字串化

  void

  將「錄音工具」面板格式的錄音檔轉換為字串。

  stringify 函式如下所示：

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

  • 錄製中

    物件

    使用者與網頁互動的記錄。必須與 Puppeteer 的錄製結構定義相符。

• stringifyStep

  void

  將「錄音工具」面板格式的錄製步驟轉換為字串。

  stringifyStep 函式如下所示：

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

  • 點選 [下一步]

    物件

    記錄使用者與網頁互動的步驟。必須與 Puppeteer 的步數結構定義相符。

RecorderView

Chrome 112 以上版本

代表要嵌入「錄音工具」面板中的擴充功能所建立的檢視畫面。

屬性

• onHidden

  事件<functionvoid>

  檢視畫面隱藏時觸發。

  onHidden.addListener 函式如下所示：

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

  • 回呼

    函式

    callback 參數如下所示：

    () => void

• onShown

  事件<functionvoid>

  在顯示檢視畫面時觸發。

  onShown.addListener 函式如下所示：

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

  • 回呼

    函式

    callback 參數如下所示：

    () => void

• 顯示

  void

  表示擴充功能想要在「錄音工具」面板中顯示這個檢視畫面。

  show 函式如下所示：

  () => {...}

方法

createView()

Chrome 112 以上版本

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

建立可處理重播的檢視畫面。這個檢視畫面會嵌入「錄音工具」面板。

參數

• title

  字串

  顯示在開發人員工具工具列中的擴充功能圖示旁邊的標題。

• pagePath

  字串

  面板 HTML 網頁相對於擴充功能目錄的路徑。

傳回

• RecorderView

registerRecorderExtensionPlugin()

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

註冊「錄音工具」擴充功能外掛程式。

參數

• 外掛程式

  RecorderExtensionPlugin

  實作 RecorderExtensionPlugin 介面的執行個體。

• 名稱

  字串

  外掛程式的名稱。

• mediaType

  字串

  外掛程式產生的字串內容媒體類型。