chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

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.

Phạm vi cung cấp

Chrome 105 trở lên

Hãy xem phần Tóm tắt về API Công cụ cho nhà phát triển để biết thông tin giới thiệu chung về cách sử dụng API Công cụ 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 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. 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 sử dụng hàm registerRecorderExtensionPlugin. Hàm này yêu cầu một thực thể trình bổ trợ, một name và một mediaType làm tham số. Thực thể trình bổ trợ phải triển khai hai 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 bối 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 Trình ghi sẽ gọi một trong hai hàm:

Tham số mediaType cho phép tiện ích chỉ định loại kết quả mà tiện ích tạo ra 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.

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

Mã sau đây triển khai một trình bổ trợ tiện ích giúp chuyển đổi 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'
);

Tuỳ chỉnh nút phát lại

Để tuỳ chỉnh nút phát lại trong Trình ghi, hãy sử dụng hàm registerRecorderExtensionPlugin. Trình bổ trợ phải triển khai phương thức replay để tuỳ chỉnh có hiệu lực. Nếu phát hiện thấy phương thức này, nút phát lại sẽ xuất hiện trong Trình ghi. Khi 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ị RecorderView để xử lý việc 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 tạo chế độ xem Trình ghi giả và hiển thị chế độ xem đó 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 ví dụ đầy đủ về tiện ích trên GitHub.

Loại

RecorderExtensionPlugin

Giao diện trình bổ trợ mà bảng điều khiển Trình ghi gọi để tuỳ chỉnh bảng điều khiển Trình ghi.

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. Tệp này phải khớp với giản đồ ghi của Puppeteer.

  • stringify

    void

    Chuyển đổi bản ghi từ định dạng bảng điều khiển Trình ghi sang 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. Tệp 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 Trình ghi thành một chuỗi.

    Hàm stringifyStep có dạng như sau: 

    (step: object) => {...}

    • bị xì hơi

      đối tượng

      Một bước trong 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 đồ bước của Puppeteer.

RecorderView

Chrome 112 trở lên

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

Thuộc tính

  • onHidden

    Event<functionvoidvoid>

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

    Hàm onHidden.addListener có dạng như sau: 

    (callback: function) => {...}

    • callback

      hàm

      Tham số callback có dạng như sau: 

      () => void

  • onShown

    Event<functionvoidvoid>

    Được kích hoạt khi thành phần hiển thị xuất hiện.

    Hàm onShown.addListener có dạng như sau: 

    (callback: function) => {...}

    • callback

      hàm

      Tham số callback 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 Trình ghi.

    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,
): RecorderView

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

Thông số

  • tiêu đề

    chuỗi

    Tiêu đề xuất hiện 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

    chuỗi

    Đường dẫn của trang HTML của bảng điều khiển tương ứng với thư mục tiện ích.

Giá trị trả về

registerRecorderExtensionPlugin()

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

Đăng ký trình bổ trợ tiện ích cho Trình ghi.

Thông số

  • trình bổ trợ

    RecorderExtensionPlugin

    Một thực thể triển khai giao diện RecorderExtensionPlugin.

  • tên

    chuỗi

    Tên của trình bổ trợ.

  • mediaType

    chuỗi

    Loại nội dung nghe nhìn của nội dung chuỗi mà trình bổ trợ tạo ra.