chrome.devtools.panels

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

Kunci berikut harus dideklarasikan dalam manifes untuk menggunakan API ini.

"devtools_page"

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
Panel ikon ekstensi di toolbar DevTools.

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.

    • 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

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.

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

Properti

elements

Panel elemen.

Jenis

ElementsPanel

sources

Panel sumber.

Jenis

SourcesPanel

themeName

Chrome 59 dan yang lebih baru

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

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

    Menentukan 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