chrome.devtools.panels

refresh date: 2026-09-25 robots: noindex

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.

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"

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

Mỗi bảng điều khiển và thanh bên của tiện ích được hiển thị dưới dạng một trang HTML riêng biệt. Tất cả 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 dùng được 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 một hàm callback xử lý các yêu cầu của người dùng về việc mở tài nguyên (thường là nhấp vào đường liên kết 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 được gọi; người dùng có thể chỉ định (bằng cách sử dụ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ý cuối cùng được giữ lại.

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à Font Picker (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 đề Thuộc tính phông chữ vào bảng điều khiển Elements, sau đó đặt chiều cao của ngăn này 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 này minh hoạ hiệu quả của các ví dụ trên đố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

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

Loại

Button

Nút do tiện ích tạo.

Thuộc tính

  • onClicked

    Event<functionvoidvoid>

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

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

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

    • callback

      hàm

      Tham số callback 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 có giá trị là null, thì các thuộc tính tương ứng sẽ không được cập nhật.

    Hàm update 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 xuất hiện 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

      Nút có bị tắt hay không.

ElementsPanel

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

Thuộc tính

  • onSelectionChanged

    Event<functionvoidvoid>

    Đượ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 có dạng như sau: 

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

    • callback

      hàm

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

      () => void

  • createSidebarPane

    void

    Promise

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

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

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

    • tiêu đề

      chuỗi

      Văn bản xuất hiện trong chú thích của thanh bên.

    • callback

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

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

      (result: ExtensionSidebarPane) => void

      • kết quả

        ExtensionSidebarPane

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

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152 trở lên

      Lệnh gọi lại được gọi khi thanh bên được tạo.

      Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

ExtensionPanel

Biểu thị một bảng điều khiển do tiện ích tạo.

Thuộc tính

  • onHidden

    Event<functionvoidvoid>

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

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

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

    • callback

      hàm

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

      () => void

  • onSearch

    Event<functionvoidvoid>

    Đượ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, thao tác trên kết quả tìm kiếm hoặc huỷ lượt tìm kiếm).

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

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

    • callback

      hàm

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

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

      • hành động

        chuỗi

      • queryString

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

  • onShown

    Event<functionvoidvoid>

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

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

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

    • callback

      hàm

      Tham số callback 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 có dạng như sau: 

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

    • iconPath

      chuỗi

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

    • tooltipText

      chuỗi

      Văn bản xuất hiện 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

      Nút có bị tắt hay không.

  • hiện (lên)/cho thấy

    void

    Chrome 140 trở lên

    Hiện bảng điều khiển bằng cách kích hoạt thẻ tương ứng.

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

    () => {...}

ExtensionSidebarPane

Thanh bên do tiện ích tạo.

Thuộc tính

  • onHidden

    Event<functionvoidvoid>

    Đượ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 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 ngăn thanh bên xuất hiện do người dùng chuyển sang bảng điều khiển lưu trữ ngăn đó.

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

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

    • callback

      hàm

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

      (window: Window) => void

      • cửa sổ

        Cửa sổ

  • setExpression

    void

    Promise

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

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

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

    • biểu thức

      chuỗi

      Một biểu thức cần được đánh giá trong bối 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.

    • callback

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

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

      () => void

    • returns

      Promise<void>

      Chrome 152 trở lên

      Lệnh gọi lại được gọi sau khi ngăn thanh bên được cập nhật bằng kết quả đánh giá biểu thức.

      Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

  • setHeight

    void

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

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

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

    • chiều cao

      chuỗi

      Quy cách kích thước giống như CSS, chẳng hạn như '100px' hoặc '12ex'.

  • setObject

    void

    Promise

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

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

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

    • jsonObject

      chuỗi

      Một đối tượng sẽ xuất hiện trong bối cảnh của trang được kiểm tra. Được đánh giá trong bối 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.

    • callback

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

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

      () => void

    • returns

      Promise<void>

      Chrome 152 trở lên

      Lệnh gọi lại được gọi sau khi thanh bên được cập nhật bằng đối tượng.

      Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

  • setPage

    void

    Đặt một trang HTML để hiển thị trong ngăn thanh bên.

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

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

    • đường dẫn

      chuỗi

      Đườ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

    Event<functionvoidvoid>

    Đượ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 có dạng như sau: 

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

    • callback

      hàm

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

      () => void

  • createSidebarPane

    void

    Promise

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

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

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

    • tiêu đề

      chuỗi

      Văn bản xuất hiện trong chú thích của thanh bên.

    • callback

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

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

      (result: ExtensionSidebarPane) => void

      • kết quả

        ExtensionSidebarPane

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

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152 trở lên

      Lệnh gọi lại được gọi khi thanh bên được tạo.

      Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

Theme

Chrome 99 trở lên

Giao diện mà Công cụ cho nhà phát triển sử dụng.

Enum

"default"
Giao diện mặc định của Công cụ cho nhà phát triển. Đây luôn là giao diện sáng.

"dark"
Giao diện tối.

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 phần cài đặt Công cụ cho nhà phát triển của người dùng. Các giá trị có thể sử dụng: default (mặc định) và dark.

Loại

chuỗi

Phương thức

create()

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

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

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.

  • iconPath

    chuỗi

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

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

  • callback

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

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

    (panel: ExtensionPanel) => void

    • Đối tượng ExtensionPanel đại diện cho bảng điều khiển đã tạo.

Giá trị trả về

  • Promise<ExtensionPanel>

    Chrome 152 trở lên

    Một hàm được gọi khi bảng điều khiển được tạo.

    Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

openResource()

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

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.

Thông số

  • url

    chuỗi

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

  • lineNumber

    số

    Chỉ định số dòng cần di chuyển đến khi tài nguyên được tải.

  • columnNumber

    number không bắt buộc

    Chrome 114 trở lên

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

  • callback

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

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

    () => void

Giá trị trả về

  • Promise<void>

    Chrome 152 trở lên

    Một hàm được gọi khi tài nguyên đã được tải thành công.

    Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

setOpenResourceHandler()

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

Chỉ định hàm được gọi khi người dùng nhấp vào một đườ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 làm tham số.

Thông số

  • callback

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

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

    (resource: Resource, lineNumber: number) => void

setThemeChangeHandler()

Chrome 99 trở lên 
chrome.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

Chỉ định hàm được gọi khi giao diện hiện tại thay đổi trong 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 null làm tham số.

Thông số

  • callback

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

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

    (theme: Theme) => void

    • chủ đề

      Giao diện

      Giao diện hiện tại trong Công cụ cho nhà phát triển.