browser.devtools.recorder

說明

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

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

如需開發人員工具 API 的一般使用簡介，請參閱「開發人員工具 API 摘要」。

可用性

Chrome 105 以上版本 瀏覽器。*自 Chrome 152 起

概念和用途

自訂匯出功能

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

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

視匯出情境而定，當使用者點擊擴充功能提供的匯出選項時，「錄音工具」面板會叫用下列其中一個函式：

mediaType 參數可讓擴充功能指定要透過 stringify 和 stringifyStep 函式產生的輸出內容類型。例如，如果結果是 JavaScript 程式，則為 application/javascript。

自訂重播按鈕

如要自訂錄音工具中的重播按鈕，請使用 registerRecorderExtensionPlugin 函式。外掛程式必須實作 replay 方法，自訂設定才會生效。如果偵測到這個方法，錄音工具中會顯示重播按鈕。點選按鈕後，目前的錄音物件會做為第一個引數傳遞至 replay 方法。

此時，擴充功能可以顯示 RecorderView 來處理重播，或使用其他擴充功能 API 處理重播要求。如要建立新的 RecorderView，請叫用 browser.devtools.recorder.createView。

範例

匯出外掛程式

下列程式碼會實作擴充功能外掛程式，使用 JSON.stringify 將錄製內容轉換為字串：

class MyPlugin {
  stringify(recording) {
    return Promise.resolve(JSON.stringify(recording));
  }
  stringifyStep(step) {
    return Promise.resolve(JSON.stringify(step));
  }
}

browser.devtools.recorder.registerRecorderExtensionPlugin(
  new MyPlugin(),
  /*name=*/'MyPlugin',
  /*mediaType=*/'application/json'
);

重播外掛程式

以下程式碼會實作擴充功能外掛程式，建立虛擬錄音工具檢視畫面，並在收到重播要求時顯示：

const view = await browser.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.
  browser.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();
  }
}

browser.devtools.recorder.registerRecorderExtensionPlugin(
  new RecorderPlugin(),
  /* name=*/ 'CoffeeTest'
);

如需完整的擴充功能範例，請前往 GitHub。

類型

RecorderExtensionPlugin

「錄音器」面板叫用的外掛程式介面，用於自訂「錄音器」面板。

屬性

  • 重播

    void

    Chrome 112 以上版本 瀏覽器。*自 Chrome 152 起

    允許擴充功能實作自訂重播功能。

    replay 函式如下所示： 

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

  • stringify

    void

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

    stringify 函式如下所示： 

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

  • stringifyStep

    void

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

    stringifyStep 函式如下所示： 

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

RecorderView

Chrome 112 以上版本 瀏覽器。*自 Chrome 152 起

代表由擴充功能建立、要嵌入 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 152 起 
browser.devtools.recorder.createView(
  title: string,
  pagePath: string,
): RecorderView

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

參數

  • title

    字串

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

  • pagePath

    字串

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

傳回

registerRecorderExtensionPlugin()

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

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

參數

  • 實作 RecorderExtensionPlugin 介面的執行個體。

  • 名稱

    字串

    外掛程式的名稱。

  • mediaType

    字串

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