Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

chrome.devtools.recorder

說明

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

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

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

可用性

Chrome 105 以上版本

概念和用法

自訂匯出功能

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

擴充功能提供的 name 會顯示在「記錄器」面板的「匯出」選單中。

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

stringify，並接收完整的使用者流程記錄
stringifyStep 接收單一記錄步驟

擴充功能可透過 mediaType 參數，指定要使用 stringify 和 stringifyStep 函式產生哪種輸出內容。舉例來說，如果結果是 JavaScript 程式，則為 application/javascript。

自訂重播按鈕

如要自訂 Recorder 中的重播按鈕，請使用 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'
);

重播外掛程式

下列程式碼會實作擴充功能外掛程式，建立虛擬的 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

Chrome 112 以上版本

代表擴充功能建立的檢視畫面，可嵌入錄音工具面板。

屬性

onHidden

Event<functionvoidvoid>

檢視區塊隱藏時觸發。

onHidden.addListener 函式如下所示：
```
(callback: function) => {...}
```
- callback
  
  函式
  
  callback 參數如下：
```
() => void
```
onShown

Event<functionvoidvoid>

顯示檢視區塊時觸發。

onShown.addListener 函式如下所示：
```
(callback: function) => {...}
```
- callback
  
  函式
  
  callback 參數如下：
```
() => void
```
顯示

void

表示擴充功能想在「記錄器」面板中顯示這個檢視畫面。

show 函式如下所示：
```
() => {...}
```

方法

createView()