chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

說明

使用 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 的錄製結構定義相符。

• stringify

  void

  將錄製內容從「錄音器」面板格式轉換為字串。

  stringify 函式如下所示：

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

  • 錄製中

    物件

    使用者與網頁互動的錄影。這應與 Puppeteer 的錄製結構定義相符。

• stringifyStep

  void

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

  stringifyStep 函式如下所示：

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

  • 點選 [下一步]

    物件

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

RecorderView

Chrome 112 以上版本

代表由擴充功能建立、要嵌入 Recorder 面板的檢視畫面。

屬性

• onHidden

  Event<functionvoidvoid>

  在檢視畫面隱藏時觸發。

  onHidden.addListener 函式如下所示：

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

  • callback

    函式

    callback 參數如下：

    () => void

• onShown

  Event<functionvoidvoid>

  在顯示檢視畫面時觸發。

  onShown.addListener 函式如下所示：

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

  • callback

    函式

    callback 參數如下：

    () => void

• 顯示

  void

  表示擴充功能要在 Recorder 面板中顯示這個檢視畫面。

  show 函式如下所示：

  () => {...}

方法

createView()

Chrome 112 以上版本

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

建立可處理重播的檢視畫面。這個檢視畫面會嵌入「錄製器」面板中。

參數

• title

  字串

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

• pagePath

  字串

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

傳回

• RecorderView

registerRecorderExtensionPlugin()

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

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

參數

• 外掛程式

  RecorderExtensionPlugin

  實作 RecorderExtensionPlugin 介面的執行個體。

• 名稱

  字串

  外掛程式的名稱。

• mediaType

  字串

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