chrome.devtools.recorder

说明

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

可用性

Chrome 105 及更高版本

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

概览

devtools.recorder API 是一项预览功能，可让您扩展 Chrome 开发者工具中的 Recorder 面板。 从 Chrome M105 开始，您可以扩展导出功能。从 Chrome M112 开始，您可以展开重放按钮。

自定义导出功能

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

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

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

• 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'
);

自定义重放按钮

如需自定义 Recorder 中的“重放”按钮，请使用 registerRecorderExtensionPlugin 函数。插件必须实现 replay 方法，自定义设置才能生效。 如果检测到该方法，Recorder 中会显示一个重放按钮。 点击该按钮后，当前录制对象将作为第一个参数传递给 replay 方法。

此时，该扩展程序可以显示 RecorderView 来处理重放，或使用其他扩展 API 来处理重放请求。如需创建新的 RecorderView，请调用 chrome.devtools.recorder.createView。

Replay 插件示例

以下代码实现了一个扩展插件，该插件可以创建虚拟的录音机视图，并在出现重放请求时显示该视图：

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

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