说明
使用 chrome.devtools.recorder
API 自定义开发者工具中的“Recorder”面板。
devtools.recorder
API 是一项预览功能,可让您扩展 Chrome 开发者工具中的 Recorder 面板。
有关使用 Developer Tools API 的一般性简介,请参阅 DevTools API 摘要。
可用性
概念和用法
自定义导出功能
如需注册扩展程序插件,请使用 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) => {...}
-
正在录制
对象
用户与网页互动的记录。这应与 Puppeteer 的录制架构匹配。
-
-
字符串化
void
将录音从“Recorder”面板格式转换为字符串。
stringify
函数如下所示:(recording: object) => {...}
-
正在录制
对象
用户与网页互动的记录。这应与 Puppeteer 的录制架构匹配。
-
-
stringifyStep
void
将录音步骤从“Recorder”面板格式转换为字符串。
stringifyStep
函数如下所示:(step: object) => {...}
-
步进
对象
一个步骤,用于记录用户与网页之间的互动。这应与 Puppeteer 的步骤架构匹配。
-
RecorderView
表示由扩展程序创建的要嵌入“记录器”面板内的视图。
属性
-
onHidden
事件<functionvoid>
在视图隐藏时触发。
onHidden.addListener
函数如下所示:(callback: function) => {...}
-
callback
功能
callback
参数如下所示:() => void
-
-
onShown
事件<functionvoid>
在显示视图时触发。
onShown.addListener
函数如下所示:(callback: function) => {...}
-
callback
功能
callback
参数如下所示:() => void
-
-
显示
void
表示扩展程序要在“记录器”面板中显示此视图。
show
函数如下所示:() => {...}
方法
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
创建可以处理重放的视图。此视图将嵌入到“记录器”面板中。
参数
-
title
string
开发者工具工具栏中的扩展程序图标旁边显示的标题。
-
pagePath
string
面板的 HTML 网页相对于扩展程序目录的路径。
返回
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
注册“录音机”扩展程序插件。
参数
-
plugin
实现 RecorderExtensionPlugin 接口的实例。
-
name
string
插件的名称。
-
mediaType
string
插件生成的字符串内容的媒体类型。