chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

说明

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

可用性

Chrome 105 及更高版本

如需简要了解如何使用开发者工具 API，请参阅开发者工具 API 摘要。

概览

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

自定义导出功能

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

该扩展程序提供的 name 会显示在录制器面板的导出菜单中。

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

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

自定义重放按钮

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

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

重放插件示例

以下代码实现了一个扩展插件，该插件会创建一个虚拟录制器视图，并在收到重放请求时显示该视图：

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

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

  show 函数如下所示：

  () => {...}

方法

createView()

Chrome 112 及更高版本

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

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

参数

• title

  字符串

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

• pagePath

  字符串

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

返回

• RecorderView

registerRecorderExtensionPlugin()

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

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

参数

• 插件

  RecorderExtensionPlugin

  实现 RecorderExtensionPlugin 接口的实例。

• name

  字符串

  插件的名称。

• mediaType

  字符串

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