chrome.devtools.recorder

说明

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

devtools.recorder API 是一项预览版功能，可让您扩展 Chrome 开发者工具中的 Recorder 面板。

有关使用开发者工具 API 的一般说明，请参阅 DevTools API 摘要。

可用性

Chrome 105 及更高版本

概念和用法

自定义导出功能

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

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

根据用户的导出环境，当用户点击该扩展程序提供的导出选项时， Recorder 面板会调用以下两个函数之一：

mediaType 参数允许该扩展程序指定其使用 stringify 和 stringifyStep 函数。例如，如果结果是 JavaScript，则返回 application/javascript 计划。

自定义重放按钮

如需在 Recorder 中自定义“重放”按钮，请使用 registerRecorderExtensionPlugin 函数。插件必须实现 replay 方法，自定义设置才能生效。 如果检测到该方法，Recorder 中会显示重放按钮。 点击此按钮后，系统会将当前录制对象作为第一个参数传递给 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'
);

重放插件

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

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) => {...}

  • 字符串化处理

    void

    将录音从“Recorder”面板格式转换为字符串。

    stringify 函数如下所示： 

    (recording: object) => {...}

  • stringifyStep

    void

    将录音步骤从“Recorder”面板格式转换为字符串。

    stringifyStep 函数如下所示： 

    (step: object) => {...}

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 页面相对于扩展程序目录的路径。

返回

registerRecorderExtensionPlugin()

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

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

参数

  • 实现 RecorderExtensionPlugin 接口的实例。

  • name

    字符串

    插件的名称。

  • mediaType

    字符串

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