說明
使用 chrome.devtools.recorder
API 自訂開發人員工具中的「錄音工具」面板。
devtools.recorder
API 是一項預先發布版功能,可讓您擴充 Chrome 開發人員工具中的錄音工具面板。
如要瞭解如何使用開發人員工具 API,請參閱「開發人員工具 API 摘要」一文。
可用性
概念和用法
自訂匯出功能
如要註冊擴充功能外掛程式,請使用 registerRecorderExtensionPlugin
函式。這個函式需要外掛程式例項、name
和 mediaType
做為參數。外掛程式執行個體必須實作兩種方法:stringify
和 stringifyStep
。
擴充功能提供的 name
會顯示在「Recorder」面板中的「Export」選單中。
取決於匯出環境,當使用者點選擴充功能提供的匯出選項時, 「錄音工具」面板會叫用以下兩種函式的其中一個:
mediaType
參數可讓擴充功能指定使用
stringify
和 stringifyStep
函式。例如,如果結果是 JavaScript,則使用 application/javascript
計畫。
自訂重播按鈕
如要在「錄音工具」中自訂重播按鈕,請使用 registerRecorderExtensionPlugin
函式。外掛程式必須實作 replay
方法,自訂設定才會生效。
如果偵測到這個方法,錄音工具中就會顯示重播按鈕。
點選按鈕後,目前的錄製物件將做為第一個引數傳遞至 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
「錄音工具」面板會叫用的外掛程式介面,以自訂「錄音工具」面板。
屬性
-
重播
void
Chrome 112 以上版本允許擴充功能導入自訂重播功能。
replay
函式如下所示:(recording: object) => {...}
-
錄製中
物件
使用者與網頁互動的記錄。必須與 Puppeteer 的錄製結構定義相符。
-
-
字串化
void
將「錄音工具」面板格式的錄音檔轉換為字串。
stringify
函式如下所示:(recording: object) => {...}
-
錄製中
物件
使用者與網頁互動的記錄。必須與 Puppeteer 的錄製結構定義相符。
-
-
stringifyStep
void
將「錄音工具」面板格式的錄製步驟轉換為字串。
stringifyStep
函式如下所示:(step: object) => {...}
-
點選 [下一步]
物件
記錄使用者與網頁互動的步驟。必須與 Puppeteer 的步數結構定義相符。
-
RecorderView
代表要嵌入「錄音工具」面板中的擴充功能所建立的檢視畫面。
屬性
-
onHidden
事件<functionvoid>
檢視畫面隱藏時觸發。
onHidden.addListener
函式如下所示:(callback: function) => {...}
-
回呼
函式
callback
參數如下所示:() => void
-
-
onShown
事件<functionvoid>
在顯示檢視畫面時觸發。
onShown.addListener
函式如下所示:(callback: function) => {...}
-
回呼
函式
callback
參數如下所示:() => void
-
-
顯示
void
表示擴充功能想要在「錄音工具」面板中顯示這個檢視畫面。
show
函式如下所示:() => {...}
方法
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
建立可處理重播的檢視畫面。這個檢視畫面會嵌入「錄音工具」面板。
參數
-
title
字串
顯示在開發人員工具工具列中的擴充功能圖示旁邊的標題。
-
pagePath
字串
面板 HTML 網頁相對於擴充功能目錄的路徑。
傳回
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
註冊「錄音工具」擴充功能外掛程式。
參數
-
實作 RecorderExtensionPlugin 介面的執行個體。
-
名稱
字串
外掛程式的名稱。
-
mediaType
字串
外掛程式產生的字串內容媒體類型。