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 会显示在 Recorder 面板的 Export 菜单中。

根据导出上下文，当用户点击扩展程序提供的导出选项时，记录器面板会调用以下两个函数之一：

接收整个用户流记录的 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'
);

Replay 插件

以下代码实现了一个扩展插件，该插件会创建一个虚拟的 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

将“Recorder”面板中的录制步骤从相应格式转换为字符串。

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

表示扩展程序希望在 Recorder 面板中显示此视图。

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

方法

createView()