chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

说明

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

可用性

Chrome 105 及更高版本

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

概览

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

自定义导出功能

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

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

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

• 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 方法，自定义才能生效。 如果检测到该方法，Recorder 中会显示一个重放按钮。 点击按钮后，当前录制对象将作为第一个实参传递给 replay 方法。

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

重放插件示例

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

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

  字符串

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