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.
Tệp kê khai
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ổng quan
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 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.
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 này minh hoạ tác động của các ví dụ ở trên đối với cửa sổ 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ả
Đố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.
-
giá trị trả về
-
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ả
Đố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
sources
Bảng điều khiển Nguồn.
Loại
themeName
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
-
bảng
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ênChỉ đị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ố
-
số gọi lại
hàm không bắt buộc
Tham số
callback
sẽ có dạng như sau:(resource: Resource) => void
-
tài nguyên
Đối tượng
devtools.inspectedWindow.Resource
cho tài nguyên được nhấp vào.
-