chrome.devtools.recorder

Mô tả

Sử dụng API chrome.devtools.recorder để tuỳ chỉnh bảng điều khiển Trình ghi 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 Trình ghi lại trong Công cụ của Chrome cho nhà phát triển.

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.

Phạm vi cung cấp

Chrome 105 trở lên

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 cần có một phiên bản trình bổ trợ, namemediaType làm tham số. Thực thể trình bổ trợ phải triển khai 2 phương thức: stringifystringifyStep.

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:

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 stringifystringifyStep. Ví dụ: application/javascript nếu kết quả là 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 để 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ụ

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'
);

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.

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ên

    Cho phép tiện ích triển khai chức năng phát lại tuỳ chỉnh.

    Hàm replay 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. Mã này phải khớp với giản đồ ghi của Puppeteer.

  • tạo chuỗi

    void

    Chuyển đổi một bản ghi âm từ định dạng bảng điều khiển Máy ghi âm thành một chuỗi.

    Hàm stringify 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. Mã này phải khớp với giản đồ ghi của Puppeteer.

  • stringifyStep

    void

    Chuyển đổi một bước của bản ghi từ định dạng bảng điều khiển Máy ghi âm thành một chuỗi.

    Hàm stringifyStep 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

Chrome 112 trở lên

Biểu thị một khung hiển thị do tiện ích tạo ra để nhúng vào bảng điều khiển Trình ghi.

Thuộc tính

  • onHidden

    Sự kiện<functionvoidvoid>

    Được kích hoạt khi chế độ xem bị ẩn.

    Hàm onHidden.addListener 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<functionvoidvoid>

    Được kích hoạt khi chế độ xem được hiển thị.

    Hàm onShown.addListener 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 có dạng như sau:

    () => {...}

Phương thức

createView()

Chrome 112 trở lên
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

Tạo một khung hiển thị có thể xử lý hoạt động phát lại. Chế độ xem này sẽ được nhúng bên trong bảng điều khiển Máy ghi âm.

Tham số

  • tiêu đề

    string

    Tiêu đề được hiển thị bên cạnh biểu tượng tiện ích trên thanh công cụ Công cụ dành 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ố

  • trình bổ trợ

    Một phiên bản triển khai giao diện RecorderExtensionPlugin.

  • tên

    string

    Tên trình bổ trợ.

  • mediaType

    string

    Loại phương tiện của nội dung chuỗi mà trình bổ trợ tạo ra.