此页面由 Cloud Translation API 翻译。

chrome.devtools.recorder

说明

使用 chrome.devtools.recorder API 自定义开发者工具中的“Recorder”面板。

devtools.recorder API 是一项预览功能，可让您扩展 Chrome 开发者工具中的 Recorder 面板。

有关使用 Developer Tools API 的一般性简介，请参阅 DevTools API 摘要。

可用性

Chrome 105 及更高版本

概念和用法

自定义导出功能

如需注册扩展程序插件，请使用 registerRecorderExtensionPlugin 函数。此函数需要一个插件实例、一个 name 和 mediaType 作为参数。插件实例必须实现两种方法：stringify 和 stringifyStep。

该扩展程序提供的 name 会显示在 Recorder 面板的 Export 菜单中。

当用户点击扩展程序提供的导出选项时，Recorder 面板会调用以下两个函数之一，具体取决于导出上下文：

stringify，用于接收整个用户流录音
stringifyStep，用于接收单个记录步骤

mediaType 参数允许扩展程序使用 stringify 和 stringifyStep 函数指定其生成的输出类型。例如，如果结果是一个 JavaScript 程序，则返回 application/javascript。

自定义重放按钮

如需自定义 Recorder 中的“重放”按钮，请使用 registerRecorderExtensionPlugin 函数。插件必须实现 replay 方法，自定义设置才能生效。如果检测到该方法，Recorder 中会显示一个重放按钮。点击该按钮后，当前录制对象将作为第一个参数传递给 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 上查找完整的扩展程序示例。

类型

RecorderExtensionPlugin

“Recorder”面板调用的插件接口，用于自定义“Recorder”面板。

属性

重放

void

Chrome 112 及更高版本

允许此扩展程序实现自定义重放功能。

replay 函数如下所示：
```
(recording: object)=> {...}
```
- 正在录制
  
  对象
  
  用户与网页互动的记录。这应与 Puppeteer 的录制架构匹配。
字符串化

void

将录音从“Recorder”面板格式转换为字符串。

stringify 函数如下所示：
```
(recording: object)=> {...}
```
- 正在录制
  
  对象
  
  用户与网页互动的记录。这应与 Puppeteer 的录制架构匹配。
stringifyStep

void

将录音步骤从“Recorder”面板格式转换为字符串。

stringifyStep 函数如下所示：
```
(step: object)=> {...}
```
- 步进
  
  对象
  
  一个步骤，用于记录用户与网页之间的互动。这应与 Puppeteer 的步骤架构匹配。

RecorderView

Chrome 112 及更高版本

表示由扩展程序创建的要嵌入“记录器”面板内的视图。

属性

onHidden

事件<functionvoid>

在视图隐藏时触发。

onHidden.addListener 函数如下所示：
```
(callback: function)=> {...}
```
- callback
  
  功能
  
  callback 参数如下所示：
```
()=>void
```
onShown

事件<functionvoid>

在显示视图时触发。

onShown.addListener 函数如下所示：
```
(callback: function)=> {...}
```
- callback
  
  功能
  
  callback 参数如下所示：
```
()=>void
```
显示

void

表示扩展程序要在“记录器”面板中显示此视图。

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

方法

createView()

Chrome 112 及更高版本

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

创建可以处理重放的视图。此视图将嵌入到“记录器”面板中。

参数

title

string

开发者工具工具栏中的扩展程序图标旁边显示的标题。
pagePath

string

面板的 HTML 网页相对于扩展程序目录的路径。

RecorderView

registerRecorderExtensionPlugin()

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

参数

plugin

RecorderExtensionPlugin

实现 RecorderExtensionPlugin 接口的实例。
name

string

插件的名称。
mediaType

string

插件生成的字符串内容的媒体类型。