Deskripsi
Gunakan chrome.devtools.panels
API untuk mengintegrasikan ekstensi Anda ke UI jendela Developer Tools: membuat panel sendiri, mengakses panel yang ada, dan menambahkan sidebar.
Setiap panel ekstensi dan sidebar ditampilkan sebagai halaman HTML terpisah. Semua halaman ekstensi ditampilkan
di jendela Developer Tools memiliki akses ke semua bagian dari chrome.devtools
API, serta
API ekstensi lainnya.
Anda dapat menggunakan metode devtools.panels.setOpenResourceHandler
untuk menginstal fungsi callback
yang menangani permintaan pengguna untuk membuka aset (biasanya, klik link aset di
jendela Developer Tools). Maksimal satu pengendali yang diinstal akan dipanggil; ditentukan pengguna (menggunakan
dialog Setelan Developer Tools) perilaku default atau ekstensi untuk menangani resource
membuka permintaan. Jika ekstensi memanggil setOpenResourceHandler()
beberapa kali, hanya panggilan terakhir
dipertahankan.
Lihat ringkasan API DevTools untuk pengantar umum tentang penggunaan API Developer Tools.
Manifes
Contoh
Kode berikut menambahkan panel yang terdapat dalam Panel.html
, yang diwakili oleh FontPicker.png
di
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 untuk
panel Elements, lalu menyetel tingginya ke 8ex
:
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
}
);
Screenshot mengilustrasikan efek contoh ini terhadap jendela Developer Tools:
![Panel ikon ekstensi di toolbar DevTools](https://developer.chrome.com/static/docs/extensions/reference/api/devtools/panels/images/devtools-panels.png?authuser=19&hl=id)
Untuk mencoba API ini, instal contoh API panel devtools dari chrome-extension-samples repositori resource.
Jenis
Button
Tombol yang dibuat oleh ekstensi.
Properti
-
onClicked
Peristiwa<functionvoidvoid>
Diaktifkan saat tombol diklik.
Fungsi
onClicked.addListener
akan terlihat seperti ini:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti ini:() => void
-
-
update
void
Memperbarui atribut tombol. Jika beberapa argumen dihilangkan atau
null
, atribut yang sesuai tidak akan diperbarui.Fungsi
update
akan terlihat seperti ini:(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 tersebut.
-
nonaktif
boolean opsional
Apakah tombol dinonaktifkan.
-
ElementsPanel
Mewakili panel Elements.
Properti
-
onSelectionChanged
Peristiwa<functionvoidvoid>
Diaktifkan saat sebuah objek dipilih di panel.
Fungsi
onSelectionChanged.addListener
akan terlihat seperti ini:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti ini:() => void
-
-
createSidebarPane
void
Membuat panel dalam sidebar panel.
Fungsi
createSidebarPane
akan terlihat seperti ini:(title: string, callback?: function) => {...}
-
judul
string
Teks yang ditampilkan di teks sidebar.
-
callback
fungsi opsional
Parameter
callback
terlihat seperti ini:(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
akan terlihat seperti ini:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti ini:() => void
-
-
onSearch
Peristiwa<functionvoidvoid>
Diaktifkan berdasarkan tindakan penelusuran (awal penelusuran baru, navigasi hasil penelusuran, atau penelusuran dibatalkan).
Fungsi
onSearch.addListener
akan terlihat seperti ini:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti ini:(action: string, queryString?: string) => void
-
action
string
-
queryString
string opsional
-
-
-
onShown
Peristiwa<functionvoidvoid>
Diaktifkan saat pengguna beralih ke panel.
Fungsi
onShown.addListener
akan terlihat seperti ini:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti ini:(window: Window) => void
-
jendela
Jendela
-
-
-
createStatusBarButton
void
Menambahkan tombol ke status bar panel.
Fungsi
createStatusBarButton
akan terlihat seperti ini:(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 akan 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
akan terlihat seperti ini:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti ini:() => void
-
-
onShown
Peristiwa<functionvoidvoid>
Diaktifkan saat panel sidebar terlihat sebagai akibat dari peralihan ke panel yang menghostingnya.
Fungsi
onShown.addListener
akan terlihat seperti ini:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti ini:(window: Window) => void
-
jendela
Jendela
-
-
-
setExpression
void
Menetapkan ekspresi yang dievaluasi dalam halaman yang diperiksa. Hasilnya ditampilkan di panel sidebar.
Fungsi
setExpression
akan terlihat seperti ini:(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 akar hierarki ekspresi.
-
callback
fungsi opsional
Parameter
callback
terlihat seperti ini:() => void
-
-
setHeight
void
Menetapkan tinggi sidebar.
Fungsi
setHeight
akan terlihat seperti ini:(height: string) => {...}
-
tinggi
string
Spesifikasi ukuran mirip CSS, seperti
'100px'
atau'12ex'
.
-
-
setObject
void
Menetapkan objek yang sesuai dengan JSON untuk ditampilkan di panel sidebar.
Fungsi
setObject
akan terlihat seperti ini:(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 akar hierarki ekspresi.
-
callback
fungsi opsional
Parameter
callback
terlihat seperti ini:() => void
-
-
setPage
void
Menyetel halaman HTML untuk ditampilkan di panel sidebar.
Fungsi
setPage
akan terlihat seperti ini:(path: string) => {...}
-
jalur
string
Jalur relatif halaman ekstensi yang akan ditampilkan dalam sidebar.
-
SourcesPanel
Mewakili panel Sources.
Properti
-
onSelectionChanged
Peristiwa<functionvoidvoid>
Diaktifkan saat sebuah objek dipilih di panel.
Fungsi
onSelectionChanged.addListener
akan terlihat seperti ini:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti ini:() => void
-
-
createSidebarPane
void
Membuat panel dalam sidebar panel.
Fungsi
createSidebarPane
akan terlihat seperti ini:(title: string, callback?: function) => {...}
-
judul
string
Teks yang ditampilkan di teks sidebar.
-
callback
fungsi opsional
Parameter
callback
terlihat seperti ini:(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
-
judul
string
Judul yang ditampilkan di samping ikon ekstensi di toolbar Developer Tools.
-
iconPath
string
Jalur ikon panel yang relatif terhadap direktori ekstensi.
-
pagePath
string
Jalur halaman HTML panel yang relatif terhadap direktori ekstensi.
-
callback
fungsi opsional
Parameter
callback
terlihat seperti ini:(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 akan di-scroll saat resource dimuat.
-
columnNumber
angka opsional
Chrome 114 dan yang lebih baruMenentukan nomor kolom yang akan di-scroll saat resource dimuat.
-
callback
fungsi opsional
Parameter
callback
terlihat seperti ini:() => void
setOpenResourceHandler()
chrome.devtools.panels.setOpenResourceHandler(
callback?: function,
)
Menentukan fungsi yang akan dipanggil saat pengguna mengklik link resource 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 ini:(resource: Resource) => void
-
referensi
Objek
devtools.inspectedWindow.Resource
untuk resource yang diklik.
-