chrome.devtools.recorder

Mô tả

devtools.recorder API là một tính năng xem trước cho phép bạn mở rộng bảng điều khiển Trình ghi trong Chrome DevTools.

Hãy xem Tóm tắt về các API của Công cụ cho nhà phát triển để biết thông tin tổng quan về cách sử dụng các API của 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 sử dụng hàm registerRecorderExtensionPlugin. Hàm này yêu cầu một thực thể trình bổ trợ, name và mediaType làm tham số. Đối tượng bổ trợ phải triển khai 2 phương thức: stringify và stringifyStep.

name do tiện ích cung cấp sẽ xuất hiện trong trình đơn Export (Xuất) trong bảng điều khiển Recorder (Trình ghi).

Tuỳ thuộc vào bối 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 Trình ghi sẽ gọi một trong hai hàm sau:

• stringify nhận được bản ghi toàn bộ luồng người dùng
• stringifyStep nhận một bước được ghi lại duy nhất

Tham số mediaType cho phép tiện ích chỉ định loại đầu ra mà tiện ích 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 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 để chế độ tuỳ chỉnh có hiệu lực. Nếu phương thức này được phát hiện, nút phát lại sẽ xuất hiện trong Trình ghi. Khi người dùng nhấp vào nút này, đối tượng bản ghi hiện tại sẽ được truyền dưới dạng đối số đầu tiên cho phương thức replay.

Tại thời điểm này, tiện ích có thể hiển thị một RecorderView để xử lý yêu cầu 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 một RecorderView mới, hãy gọi chrome.devtools.recorder.createView.

Ví dụ

Xuất trình bổ trợ

Đoạn mã sau đây triển khai một trình bổ trợ tiện ích giúp chuyển đổi một bản ghi thành chuỗ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

Đoạn mã sau đây triển khai một trình bổ trợ tiện ích tạo một khung hiển thị Trình ghi ảo và hiển thị khung hiển thị đó theo 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'
);

Bạn có thể tìm thấy ví dụ hoàn chỉnh về tiện ích trên GitHub.

chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
): RecorderView

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