chrome.devtools.recorder

Mô tả

Phạm vi cung cấp

Xem Tóm tắt API Công cụ cho nhà phát triển để biết giới thiệu chung về cách sử dụng API Công cụ dành cho nhà phát triển.

Tổng quan

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 Trình ghi lại trong Công cụ của Chrome cho nhà phát triển. Kể từ Chrome M105, bạn có thể mở rộng chức năng xuất dữ liệu. Kể từ Chrome M112, bạn có thể mở rộng nút phát lại.

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 cần có một phiên bản trình bổ trợ, name và mediaType làm tham số. Thực thể trình 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 Xuất trong bảng điều khiển Trình ghi.

Tuỳ thuộc vào ngữ cảnh xuất, khi người dùng nhấp vào tuỳ chọn xuất do tiện ích cung cấp, bảng điều khiển Ghi âm gọi một trong hai hàm:

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

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à JavaScript .

Ví dụ về xuất trình bổ trợ

Mã sau đây triển khai một trình bổ trợ tiện ích chuỗi lại bản ghi 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'
);

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 để tính năng tuỳ chỉnh có hiệu lực. Nếu hệ thống phát hiện được phương thức này, một nút phát lại sẽ xuất hiện trong Máy ghi âm. Sau khi nhấp vào nút này, đối tượng ghi hiện tại sẽ được truyền làm đố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ị RecorderView để xử lý hoạt động 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ụ về 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 chế độ xem Máy ghi âm giả và hiển thị chế độ xem này 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'
);

Xem ví dụ đầy đủ về tiện ích trên GitHub.

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

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