chrome.devtools.recorder

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

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 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:

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

    Cho 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)=> {...}

  • 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)=> {...}

  • 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

Chrome 112 trở lên

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 112 trở lên 
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ố

  • 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.