chrome.devtools.panels

Nội dung mô tả

Sử dụng API chrome.devtools.panels để tích hợp tiện ích vào giao diện người dùng của cửa sổ Công cụ cho nhà phát triển: tạo bảng điều khiển của riêng bạn, truy cập vào bảng điều khiển hiện có và thêm thanh bên.

Mỗi bảng điều khiển tiện ích và thanh bên được hiển thị dưới dạng một trang HTML riêng biệt. Mọi trang tiện ích hiển thị trong cửa sổ Công cụ cho nhà phát triển đều có quyền truy cập vào tất cả mô-đun trong API chrome.devtools, cũng như API chrome.extension. Các API tiện ích khác không có sẵn cho các trang trong cửa sổ Công cụ cho nhà phát triển, nhưng bạn có thể gọi các API đó bằng cách gửi yêu cầu đến trang nền của tiện ích, tương tự như cách thực hiện trong tập lệnh nội dung.

Bạn có thể sử dụng phương thức devtools.panels.setOpenResourceHandler để cài đặt hàm callback xử lý các yêu cầu của người dùng để mở một tài nguyên (thường là nhấp vào đường liên kết đến tài nguyên trong cửa sổ Công cụ cho nhà phát triển). Tối đa một trong các trình xử lý đã cài đặt sẽ được gọi; người dùng có thể chỉ định (bằng hộp thoại Cài đặt công cụ cho nhà phát triển) hành vi mặc định hoặc một tiện ích để xử lý các yêu cầu mở tài nguyên. Nếu một tiện ích gọi setOpenResourceHandler() nhiều lần, thì chỉ trình xử lý gần đây nhất được giữ lại.

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.

Tệp kê khai

Bạn phải khai báo các khoá sau trong tệp kê khai để sử dụng API này.

"devtools_page"

Ví dụ:

Mã sau đây thêm một bảng điều khiển có trong Panel.html, được biểu thị bằng FontPicker.png trên thanh công cụ Công cụ cho nhà phát triển và được gắn nhãn là Bộ chọn phông chữ:

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

Mã sau đây thêm một ngăn thanh bên có trong Sidebar.html và có tiêu đề Font Properties (Thuộc tính phông chữ) vào bảng điều khiển Phần tử, sau đó đặt chiều cao của ngăn thành 8ex:

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

Ảnh chụp màn hình minh hoạ tác động của ví dụ này đối với cửa sổ Công cụ cho nhà phát triển:

Bảng biểu tượng tiện ích trên thanh công cụ Công cụ cho nhà phát triển
Bảng biểu tượng tiện ích trên thanh công cụ Công cụ cho nhà phát triển.

Để dùng thử API này, hãy cài đặt ví dụ về API của Bảng điều khiển dành cho nhà phát triển trong kho lưu trữ chrome-extension-samples.

Loại

Button

Một nút do tiện ích tạo.

Thuộc tính

  • onClicked

    Sự kiện<functionvoid>

    Được kích hoạt khi người dùng nhấp vào nút này.

    Hàm onClicked.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

  • cập nhật

    void

    Cập nhật các thuộc tính của nút. Nếu một số đối số bị bỏ qua hoặc null, các thuộc tính tương ứng sẽ không được cập nhật.

    Hàm update sẽ có dạng như sau: 

    (iconPath?: string,tooltipText?: string,disabled?: boolean)=> {...}

    • iconPath

      chuỗi không bắt buộc

      Đường dẫn đến biểu tượng mới của nút.

    • tooltipText

      chuỗi không bắt buộc

      Văn bản được hiển thị dưới dạng chú giải công cụ khi người dùng di chuột qua nút.

    • đã vô hiệu

      boolean không bắt buộc

      Liệu nút có bị tắt hay không.

ElementsPanel

Đại diện cho bảng điều khiển Phần tử.

Thuộc tính

  • onSelectionChanged

    Sự kiện<functionvoid>

    Được kích hoạt khi một đối tượng được chọn trong bảng điều khiển.

    Hàm onSelectionChanged.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

  • createSidebarPane

    void

    Tạo một ngăn trong thanh bên của bảng điều khiển.

    Hàm createSidebarPane sẽ có dạng như sau: 

    (title: string,callback?: function)=> {...}

    • title

      string

      Văn bản hiển thị trong chú thích thanh bên.

    • số gọi lại

      hàm không bắt buộc

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

      (result: ExtensionSidebarPane)=>void

      • kết quả

        ExtensionSidebarPane

        Đối tượng ExtensionToolbarPane cho ngăn thanh bên đã tạo.

ExtensionPanel

Đại diện cho một bảng điều khiển do tiện ích tạo ra.

Thuộc tính

  • onHidden

    Sự kiện<functionvoid>

    Được kích hoạt khi người dùng rời khỏi bảng điều khiể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

  • onSearch

    Sự kiện<functionvoid>

    Được kích hoạt khi có một hành động tìm kiếm (bắt đầu một lượt tìm kiếm mới, điều hướng kết quả tìm kiếm hoặc lượt tìm kiếm bị huỷ).

    Hàm onSearch.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: 

      (action: string,queryString?: string)=>void

      • hành động

        string

      • queryString

        chuỗi không bắt buộc

  • onShown

    Sự kiện<functionvoid>

    Được kích hoạt khi người dùng chuyển sang bảng điều khiển.

    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: 

      (window: Window)=>void

      • cửa sổ

        Cửa sổ

  • createStatusBarButton

    void

    Thêm một nút vào thanh trạng thái của bảng điều khiển.

    Hàm createStatusBarButton sẽ có dạng như sau: 

    (iconPath: string,tooltipText: string,disabled: boolean)=> {...}

    • iconPath

      string

      Đường dẫn đến biểu tượng của nút. Tệp phải chứa hình ảnh 64x24 pixel bao gồm hai biểu tượng 32x24. Biểu tượng bên trái được sử dụng khi nút không hoạt động; biểu tượng bên phải được hiển thị khi nhấn nút.

    • tooltipText

      string

      Văn bản được hiển thị dưới dạng chú giải công cụ khi người dùng di chuột qua nút.

    • đã vô hiệu

      boolean

      Liệu nút có bị tắt hay không.

ExtensionSidebarPane

Một thanh bên do tiện ích tạo.

Thuộc tính

  • onHidden

    Sự kiện<functionvoid>

    Được kích hoạt khi ngăn thanh bên bị ẩn do người dùng chuyển khỏi bảng điều khiển lưu trữ ngăn thanh 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 ngăn thanh bên hiển thị do người dùng chuyển sang bảng điều khiển lưu trữ thanh bên.

    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: 

      (window: Window)=>void

      • cửa sổ

        Cửa sổ

  • setExpression

    void

    Đặt một biểu thức được đánh giá trong trang được kiểm tra. Kết quả được hiển thị trong ngăn thanh bên.

    Hàm setExpression sẽ có dạng như sau: 

    (expression: string,rootTitle?: string,callback?: function)=> {...}

    • biểu thức

      string

      Một biểu thức cần được đánh giá trong ngữ cảnh của trang được kiểm tra. Các đối tượng JavaScript và nút DOM được hiển thị trong một cây có thể mở rộng tương tự như bảng điều khiển/đồng hồ.

    • rootTitle

      chuỗi không bắt buộc

      Tiêu đề không bắt buộc cho gốc của cây biểu thức.

    • số gọi lại

      hàm không bắt buộc

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

      ()=>void

  • setHeight

    void

    Đặt chiều cao của thanh bên.

    Hàm setHeight sẽ có dạng như sau: 

    (height: string)=> {...}

    • độ cao

      string

      Thông số kỹ thuật kích thước giống CSS, chẳng hạn như '100px' hoặc '12ex'.

  • setObject

    void

    Đặt một đối tượng tuân thủ JSON cần hiển thị trong ngăn thanh bên.

    Hàm setObject sẽ có dạng như sau: 

    (jsonObject: string,rootTitle?: string,callback?: function)=> {...}

    • jsonObject

      string

      Một đối tượng sẽ xuất hiện trong ngữ cảnh của trang được kiểm tra. Được đánh giá trong ngữ cảnh của phương thức gọi (ứng dụng API).

    • rootTitle

      chuỗi không bắt buộc

      Tiêu đề không bắt buộc cho gốc của cây biểu thức.

    • số gọi lại

      hàm không bắt buộc

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

      ()=>void

  • setPage

    void

    Thiết lập một trang HTML sẽ hiển thị trong ngăn thanh bên.

    Hàm setPage sẽ có dạng như sau: 

    (path: string)=> {...}

    • path

      string

      Đường dẫn tương đối của một trang tiện ích để hiển thị trong thanh bên.

SourcesPanel

Đại diện cho bảng điều khiển Nguồn.

Thuộc tính

  • onSelectionChanged

    Sự kiện<functionvoid>

    Được kích hoạt khi một đối tượng được chọn trong bảng điều khiển.

    Hàm onSelectionChanged.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

  • createSidebarPane

    void

    Tạo một ngăn trong thanh bên của bảng điều khiển.

    Hàm createSidebarPane sẽ có dạng như sau: 

    (title: string,callback?: function)=> {...}

    • title

      string

      Văn bản hiển thị trong chú thích thanh bên.

    • số gọi lại

      hàm không bắt buộc

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

      (result: ExtensionSidebarPane)=>void

      • kết quả

        ExtensionSidebarPane

        Đối tượng ExtensionToolbarPane cho ngăn thanh bên đã tạo.

Thuộc tính

elements

Bảng điều khiển Phần tử.

Loại

ElementsPanel

sources

Bảng điều khiển Nguồn.

Loại

SourcesPanel

themeName

Chrome 59 trở lên

Tên của chủ đề màu sắc được đặt trong chế độ cài đặt Công cụ cho nhà phát triển của người dùng. Các giá trị có thể là: default (mặc định) và dark.

Loại

string

Phương thức

create()

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
)

Tạo bảng điều khiển tiện ích.

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.

  • iconPath

    string

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

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

  • số gọi lại

    hàm không bắt buộc

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

    (panel: ExtensionPanel)=>void

    • Một đối tượng Extension Panel đại diện cho bảng điều khiển đã tạo.

openResource()

chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
)

Yêu cầu Công cụ cho nhà phát triển mở một URL trong bảng điều khiển Công cụ cho nhà phát triển.

Tham số

  • url

    string

    URL của tài nguyên cần mở.

  • lineNumber

    number

    Chỉ định số dòng để cuộn đến thời điểm tải tài nguyên.

  • columnNumber

    số không bắt buộc

    Chrome 114 trở lên

    Chỉ định số cột cần cuộn đến khi tài nguyên được tải.

  • số gọi lại

    hàm không bắt buộc

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

    ()=>void

setOpenResourceHandler()

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
)

Chỉ định hàm được gọi khi người dùng nhấp vào đường liên kết đến tài nguyên trong cửa sổ Công cụ cho nhà phát triển. Để huỷ đặt trình xử lý, hãy gọi phương thức không có tham số hoặc truyền giá trị rỗng dưới dạng tham số.

Tham số