Deskripsi
Gunakan chrome.devtools.panels
API untuk mengintegrasikan ekstensi Anda ke UI jendela Developer Tools: membuat panel Anda sendiri, mengakses panel yang ada, dan menambahkan sidebar.
Setiap panel ekstensi dan sidebar ditampilkan sebagai halaman HTML terpisah. Semua halaman ekstensi yang ditampilkan
di jendela Developer Tools memiliki akses ke semua modul di chrome.devtools
API, serta ke
chrome.extension API. API ekstensi lainnya tidak tersedia untuk halaman dalam jendela Developer
Tools, tetapi Anda dapat memanggilnya dengan mengirim permintaan ke halaman latar belakang ekstensi,
mirip dengan cara yang dilakukan di skrip konten.
Anda dapat menggunakan metode devtools.panels.setOpenResourceHandler
untuk menginstal fungsi callback
yang menangani permintaan pengguna untuk membuka resource (biasanya, klik link resource di
jendela Developer Tools). Paling banyak salah satu pengendali yang diinstal akan dipanggil; pengguna dapat menentukan (menggunakan dialog Setelan Developer Tools) perilaku default atau ekstensi untuk menangani permintaan membuka resource. Jika ekstensi memanggil setOpenResourceHandler()
beberapa kali, hanya pengendali terakhir yang akan dipertahankan.
Lihat ringkasan API DevTools untuk pengantar umum tentang cara menggunakan API Developer Tools.
Manifes
Contoh
Kode berikut menambahkan panel yang terdapat dalam Panel.html
, yang diwakili oleh FontPicker.png
pada
toolbar Developer Tools dan diberi label sebagai Pemilih Font:
chrome.devtools.panels.create("Font Picker",
"FontPicker.png",
"Panel.html",
function(panel) { ... });
Kode berikut menambahkan panel sidebar yang ada di Sidebar.html
dan berjudul Font Properties ke
panel Elemen, lalu menyetel tingginya ke 8ex
:
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
}
);
Screenshot mengilustrasikan efek yang akan dimiliki contoh ini di jendela Developer Tools:
Untuk mencoba API ini, instal contoh API panel DevTools dari repositori chrome-extension-samples.
Jenis
Button
Tombol yang dibuat oleh ekstensi.
Properti
-
onClicked
Peristiwa<functionvoidvoid>
Diaktifkan saat tombol diklik.
Fungsi
onClicked.addListener
terlihat seperti:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti:() => void
-
-
ubah
void
Memperbarui atribut tombol. Jika beberapa argumen dihilangkan atau
null
, atribut yang sesuai tidak akan diperbarui.Fungsi
update
terlihat seperti:(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
-
iconPath
string opsional
Jalur ke ikon baru tombol.
-
tooltipText
string opsional
Teks yang ditampilkan sebagai tooltip saat pengguna mengarahkan mouse ke tombol.
-
nonaktif
boolean opsional
Apakah tombol dinonaktifkan.
-
ElementsPanel
Menampilkan panel Elements.
Properti
-
onSelectionChanged
Peristiwa<functionvoidvoid>
Diaktifkan saat objek dipilih di panel.
Fungsi
onSelectionChanged.addListener
terlihat seperti:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti:() => void
-
-
createSidebarPane
void
Membuat panel dalam sidebar panel.
Fungsi
createSidebarPane
terlihat seperti:(title: string, callback?: function) => {...}
-
title
string
Teks yang ditampilkan di teks sidebar.
-
callback
fungsi opsional
Parameter
callback
terlihat seperti:(result: ExtensionSidebarPane) => void
-
hasil
Objek ExtensionSidebarPane untuk panel sidebar yang dibuat.
-
-
ExtensionPanel
Mewakili panel yang dibuat oleh ekstensi.
Properti
-
onHidden
Peristiwa<functionvoidvoid>
Diaktifkan saat pengguna beralih dari panel.
Fungsi
onHidden.addListener
terlihat seperti:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti:() => void
-
-
onSearch
Peristiwa<functionvoidvoid>
Diaktifkan atas tindakan penelusuran (dimulainya penelusuran baru, navigasi hasil penelusuran, atau penelusuran yang dibatalkan).
Fungsi
onSearch.addListener
terlihat seperti:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti:(action: string, queryString?: string) => void
-
action
string
-
queryString
string opsional
-
-
-
onShown
Peristiwa<functionvoidvoid>
Diaktifkan saat pengguna beralih ke panel.
Fungsi
onShown.addListener
terlihat seperti:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti:(window: Window) => void
-
jendela
Jendela
-
-
-
createStatusBarButton
void
Menambahkan tombol ke status bar panel.
Fungsi
createStatusBarButton
terlihat seperti:(iconPath: string, tooltipText: string, disabled: boolean) => {...}
-
iconPath
string
Jalur ke ikon tombol. File harus berisi gambar 64x24-piksel yang terdiri dari dua ikon 32x24. Ikon kiri digunakan ketika tombol tidak aktif; ikon kanan ditampilkan saat tombol ditekan.
-
tooltipText
string
Teks yang ditampilkan sebagai tooltip saat pengguna mengarahkan mouse ke tombol.
-
nonaktif
boolean
Apakah tombol dinonaktifkan.
-
akan menampilkan
-
ExtensionSidebarPane
Sidebar yang dibuat oleh ekstensi.
Properti
-
onHidden
Peristiwa<functionvoidvoid>
Diaktifkan saat panel sidebar disembunyikan karena pengguna beralih dari panel yang menghosting panel sidebar.
Fungsi
onHidden.addListener
terlihat seperti:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti:() => void
-
-
onShown
Peristiwa<functionvoidvoid>
Diaktifkan saat panel sidebar terlihat karena beralih pengguna ke panel yang menghostingnya.
Fungsi
onShown.addListener
terlihat seperti:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti:(window: Window) => void
-
jendela
Jendela
-
-
-
setExpression
void
Menetapkan ekspresi yang dievaluasi di dalam halaman yang diperiksa. Hasilnya ditampilkan di panel sidebar.
Fungsi
setExpression
terlihat seperti:(expression: string, rootTitle?: string, callback?: function) => {...}
-
ekspresi
string
Ekspresi yang akan dievaluasi dalam konteks halaman yang diperiksa. Objek JavaScript dan node DOM ditampilkan dalam hierarki yang dapat diperluas yang mirip dengan konsol/smartwatch.
-
rootTitle
string opsional
Judul opsional untuk root hierarki ekspresi.
-
callback
fungsi opsional
Parameter
callback
terlihat seperti:() => void
-
-
setHeight
void
Menetapkan tinggi sidebar.
Fungsi
setHeight
terlihat seperti:(height: string) => {...}
-
tinggi
string
Spesifikasi ukuran seperti CSS, seperti
'100px'
atau'12ex'
.
-
-
setObject
void
Menetapkan objek yang sesuai dengan JSON untuk ditampilkan di panel sidebar.
Fungsi
setObject
terlihat seperti:(jsonObject: string, rootTitle?: string, callback?: function) => {...}
-
jsonObject
string
Objek yang akan ditampilkan dalam konteks halaman yang diperiksa. Dievaluasi dalam konteks pemanggil (klien API).
-
rootTitle
string opsional
Judul opsional untuk root hierarki ekspresi.
-
callback
fungsi opsional
Parameter
callback
terlihat seperti:() => void
-
-
setPage
void
Menetapkan halaman HTML yang akan ditampilkan di panel sidebar.
Fungsi
setPage
terlihat seperti:(path: string) => {...}
-
jalur
string
Jalur relatif halaman ekstensi yang akan ditampilkan dalam sidebar.
-
SourcesPanel
Merepresentasikan panel Sumber.
Properti
-
onSelectionChanged
Peristiwa<functionvoidvoid>
Diaktifkan saat objek dipilih di panel.
Fungsi
onSelectionChanged.addListener
terlihat seperti:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti:() => void
-
-
createSidebarPane
void
Membuat panel dalam sidebar panel.
Fungsi
createSidebarPane
terlihat seperti:(title: string, callback?: function) => {...}
-
title
string
Teks yang ditampilkan di teks sidebar.
-
callback
fungsi opsional
Parameter
callback
terlihat seperti:(result: ExtensionSidebarPane) => void
-
hasil
Objek ExtensionSidebarPane untuk panel sidebar yang dibuat.
-
-
Properti
elements
Panel elemen.
Jenis
sources
Panel sumber.
Jenis
themeName
Nama tema warna yang disetel di setelan DevTools pengguna. Nilai yang mungkin: default
(default) dan dark
.
Jenis
string
Metode
create()
chrome.devtools.panels.create(
title: string,
iconPath: string,
pagePath: string,
callback?: function,
)
Membuat panel ekstensi.
Parameter
-
title
string
Judul yang ditampilkan di samping ikon ekstensi di toolbar Developer Tools.
-
iconPath
string
Jalur ikon panel yang sesuai dengan direktori ekstensi.
-
pagePath
string
Jalur halaman HTML panel yang sesuai dengan direktori ekstensi.
-
callback
fungsi opsional
Parameter
callback
terlihat seperti:(panel: ExtensionPanel) => void
-
panel
Objek ExtensionPanel yang mewakili panel yang dibuat.
-
openResource()
chrome.devtools.panels.openResource(
url: string,
lineNumber: number,
columnNumber?: number,
callback?: function,
)
Meminta DevTools untuk membuka URL di panel Developer Tools.
Parameter
-
url
string
URL resource yang akan dibuka.
-
lineNumber
angka
Menentukan nomor baris yang menjadi tujuan scroll saat resource dimuat.
-
columnNumber
nomor opsional
Chrome 114 dan yang lebih baruMenentukan nomor kolom yang menjadi tujuan scroll saat resource dimuat.
-
callback
fungsi opsional
Parameter
callback
terlihat seperti:() => void
setOpenResourceHandler()
chrome.devtools.panels.setOpenResourceHandler(
callback?: function,
)
Menentukan fungsi yang akan dipanggil saat pengguna mengklik link referensi di jendela Developer Tools. Untuk membatalkan penetapan pengendali, panggil metode tanpa parameter atau teruskan null sebagai parameter.
Parameter
-
callback
fungsi opsional
Parameter
callback
terlihat seperti:(resource: Resource) => void
-
resource
Objek
devtools.inspectedWindow.Resource
untuk resource yang diklik.
-