chrome.devtools.panels

Deskripsi

Gunakan chrome.devtools.panels API untuk mengintegrasikan ekstensi ke UI jendela Alat Developer: buat panel Anda sendiri, akses panel yang ada, dan tambahkan sidebar.

Setiap panel dan sidebar ekstensi ditampilkan sebagai halaman HTML terpisah. Semua halaman ekstensi yang ditampilkan di jendela Alat Developer memiliki akses ke semua bagian chrome.devtools API, serta semua API ekstensi lainnya.

Anda dapat menggunakan metode devtools.panels.setOpenResourceHandler untuk menginstal fungsi callback yang menangani permintaan pengguna untuk membuka resource (biasanya, mengklik link resource di jendela Alat Developer). Paling banyak salah satu pengendali yang diinstal akan dipanggil; pengguna dapat menentukan (menggunakan dialog Setelan Alat Developer) perilaku default atau ekstensi untuk menangani permintaan buka resource. Jika ekstensi memanggil setOpenResourceHandler() beberapa kali, hanya pengendali terakhir yang dipertahankan.

Lihat ringkasan DevTools API untuk pengantar umum tentang penggunaan Developer Tools API.

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 Alat Developer dan diberi label sebagai Font Picker:

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

Kode berikut menambahkan panel sidebar yang terdapat dalam Sidebar.html dan berjudul Font Properties ke panel Elements, lalu menetapkan tingginya ke 8ex:

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

Screenshot ini menggambarkan efek yang akan dihasilkan contoh ini pada jendela Alat Developer:

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

  • update

    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 kursor mouse ke tombol.

    • nonaktif

      boolean opsional

      Apakah tombol dinonaktifkan.

ElementsPanel

Mewakili panel Elemen.

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) => {...}

    • judul

      string

      Teks yang ditampilkan di teks samping.

    • callback

      fungsi opsional

      Parameter callback terlihat seperti: 

      (result: ExtensionSidebarPane) => void

ExtensionPanel

Merepresentasikan 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 saat tindakan penelusuran (awal penelusuran baru, navigasi hasil penelusuran, atau penelusuran 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 saat tombol tidak aktif; ikon kanan ditampilkan saat tombol ditekan.

    • tooltipText

      string

      Teks yang ditampilkan sebagai tooltip saat pengguna mengarahkan kursor 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 sebagai hasil dari pengguna yang beralih 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 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 diluaskan, mirip dengan konsol/watch.

    • 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

Mewakili 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) => {...}

    • judul

      string

      Teks yang ditampilkan di teks samping.

    • 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 ditetapkan 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 Alat Developer.

  • iconPath

    string

    Jalur ikon panel relatif terhadap direktori ekstensi.

  • pagePath

    string

    Jalur halaman HTML panel yang relatif terhadap 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 Alat Developer.

Parameter

  • url

    string

    URL resource yang akan dibuka.

  • lineNumber

    angka

    Menentukan nomor baris yang akan di-scroll saat resource dimuat.

  • columnNumber

    number opsional

    Chrome 114+

    Menentukan nomor kolom yang akan di-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 resource di jendela Alat Developer. Untuk menghapus pengendali, panggil metode tanpa parameter atau teruskan null sebagai parameter.

Parameter