chrome.devtools.recorder

说明

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

可用性

Chrome 105 及更高版本

有关使用开发者工具 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 及更高版本

表示扩展程序创建的要嵌入“Recorder”面板的视图。

属性

• onHidden

  事件<functionvoidvoid>

  在视图隐藏时触发。

  onHidden.addListener 函数如下所示：

  (callback: function) => {...}

  • callback

    函数

    callback 参数如下所示：

    () => void

• onShown

  事件<functionvoidvoid>

  在显示视图时触发。

  onShown.addListener 函数如下所示：

  (callback: function) => {...}

  • callback

    函数

    callback 参数如下所示：

    () => void

• 显示

  void

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

  show 函数如下所示：

  () => {...}

方法

createView()

Chrome 112 及更高版本

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

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

参数

• 标题

  字符串

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

• pagePath

  字符串

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

返回

• RecorderView

registerRecorderExtensionPlugin()

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

注册录音机扩展程序插件。

参数

• plugin

  RecorderExtensionPlugin

  实现 RecorderExtensionPlugin 接口的实例。

• name

  字符串

  插件的名称。

• mediaType

  字符串

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