chrome.devtools.panels

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

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 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:

Panel ikon ekstensi di toolbar DevTools
Panel ikon ekstensi di toolbar DevTools.

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

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.

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

Properti

elements

Panel elemen.

Jenis

ElementsPanel

sources

Panel sumber.

Jenis

SourcesPanel

themeName

Chrome 59+

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

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

    Menentukan 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