Nội dung mô tả
Dùng API chrome.devtools.recorder
để tuỳ chỉnh bảng điều khiển Máy ghi âm trong Công cụ cho nhà phát triển.
API devtools.recorder
là một tính năng xem trước cho phép bạn mở rộng bảng điều khiển Máy ghi âm trong Công cụ của Chrome cho nhà phát triển.
Xem thông tin tóm tắt về API DevTools để biết giới thiệu chung về cách sử dụng API Công cụ cho nhà phát triển.
Phạm vi cung cấp
Khái niệm và cách sử dụng
Tuỳ chỉnh tính năng xuất
Để đăng ký một trình bổ trợ tiện ích, hãy dùng hàm registerRecorderExtensionPlugin
. Hàm này yêu cầu một phiên bản trình bổ trợ, tham số name
và mediaType
. Thực thể trình bổ trợ phải triển khai 2 phương thức: stringify
và stringifyStep
.
name
mà tiện ích này cung cấp sẽ xuất hiện trong trình đơn Xuất trong bảng điều khiển Máy ghi âm.
Tuỳ thuộc vào ngữ cảnh xuất, khi người dùng nhấp vào lựa chọn xuất do tiện ích cung cấp, bảng điều khiển Recorder (Máy ghi âm) sẽ gọi một trong hai hàm:
stringify
nhận được toàn bộ bản ghi luồng người dùngstringifyStep
nhận được một bước duy nhất được ghi lại
Tham số mediaType
cho phép tiện ích chỉ định loại dữ liệu đầu ra được tạo bằng các hàm stringify
và stringifyStep
. Ví dụ: application/javascript
nếu kết quả là một chương trình JavaScript.
Tuỳ chỉnh nút phát lại
Để tuỳ chỉnh nút phát lại trong Recorder (Máy ghi âm), hãy dùng hàm registerRecorderExtensionPlugin
. Trình bổ trợ phải triển khai phương thức replay
để tính năng tuỳ chỉnh có hiệu lực.
Nếu phát hiện thấy phương pháp, nút phát lại sẽ xuất hiện trong Máy ghi âm.
Khi nhấp vào nút này, đối tượng ghi hiện tại sẽ được truyền dưới dạng đối số đầu tiên vào phương thức replay
.
Tại thời điểm này, tiện ích có thể hiển thị RecorderView
để xử lý bản phát lại hoặc sử dụng các API tiện ích khác để xử lý yêu cầu phát lại. Để tạo RecorderView
mới, hãy gọi chrome.devtools.recorder.createView
.
Ví dụ
Xuất trình bổ trợ
Mã sau đây triển khai một trình bổ trợ tiện ích giúp tạo chuỗi văn bản ghi lại bằng 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'
);
Trình bổ trợ phát lại
Mã sau đây triển khai một trình bổ trợ tiện ích giúp tạo khung hiển thị Máy ghi âm giả và hiển thị khung hiển thị đó khi có yêu cầu phát lại:
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'
);
Tìm một ví dụ hoàn chỉnh về tiện ích trên GitHub.
Loại
RecorderExtensionPlugin
Một giao diện trình bổ trợ mà bảng điều khiển Máy ghi âm gọi để tuỳ chỉnh bảng điều khiển Máy ghi âm.
Thuộc tính
-
phát lại
void
Chrome 112 trở lênCho phép tiện ích triển khai chức năng phát lại tuỳ chỉnh.
Hàm
replay
sẽ có dạng như sau:(recording: object) => {...}
-
đang ghi
đối tượng
Bản ghi hoạt động tương tác của người dùng với trang. Giá trị này phải khớp với giản đồ ghi lại của Puppeteer.
-
-
tạo chuỗi
void
Chuyển đổi bản ghi âm từ định dạng của bảng điều khiển Máy ghi âm thành một chuỗi.
Hàm
stringify
sẽ có dạng như sau:(recording: object) => {...}
-
đang ghi
đối tượng
Bản ghi hoạt động tương tác của người dùng với trang. Giá trị này phải khớp với giản đồ ghi lại của Puppeteer.
-
-
stringifyStep
void
Chuyển đổi một bước của bản ghi âm từ định dạng của bảng điều khiển Máy ghi âm thành một chuỗi.
Hàm
stringifyStep
sẽ có dạng như sau:(step: object) => {...}
-
Nhấp vào bước tiếp theo.
đối tượng
Một bước ghi lại hoạt động tương tác của người dùng với trang. Giá trị này phải khớp với giản đồ bước của Puppeteer.
-
RecorderView
Biểu thị một khung hiển thị do tiện ích tạo ra và sẽ được nhúng trong bảng điều khiển Máy ghi âm.
Thuộc tính
-
onHidden
Sự kiện<functionvoid>
Được kích hoạt khi khung hiển thị bị ẩn.
Hàm
onHidden.addListener
sẽ có dạng như sau:(callback: function) => {...}
-
số gọi lại
hàm
Tham số
callback
sẽ có dạng như sau:() => void
-
-
onShown
Sự kiện<functionvoid>
Được kích hoạt khi khung hiển thị được hiển thị.
Hàm
onShown.addListener
sẽ có dạng như sau:(callback: function) => {...}
-
số gọi lại
hàm
Tham số
callback
sẽ có dạng như sau:() => void
-
-
hiện (lên)/cho thấy
void
Cho biết rằng tiện ích muốn hiển thị chế độ xem này trong bảng điều khiển Máy ghi âm.
Hàm
show
sẽ có dạng như sau:() => {...}
Phương thức
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
Tạo một khung hiển thị có thể xử lý bản phát lại. Chế độ xem này sẽ được nhúng trong bảng điều khiển Máy ghi âm.
Tham số
-
title
string
Tiêu đề hiển thị bên cạnh biểu tượng tiện ích trong thanh công cụ Công cụ cho nhà phát triển.
-
pagePath
string
Đường dẫn của trang HTML của bảng điều khiển so với thư mục tiện ích.
Giá trị trả về
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
Đăng ký một trình bổ trợ tiện ích Máy ghi âm.
Tham số
-
plugin
Một ví dụ về việc triển khai giao diện NotesExtensionPlugin.
-
tên
string
Tên của trình bổ trợ.
-
mediaType
string
Loại nội dung đa phương tiện của nội dung chuỗi mà trình bổ trợ tạo ra.