chrome.devtools.panels

Açıklama

Uzantınızı Geliştirici Araçları penceresi kullanıcı arayüzüne entegre etmek için chrome.devtools.panels API'yi kullanın: kendi panellerinizi oluşturun, mevcut panellere erişin ve kenar çubukları ekleyin.

Her uzantı paneli ve kenar çubuğu ayrı bir HTML sayfası olarak gösterilir. Geliştirici Araçları penceresinde gösterilen tüm uzantı sayfaları, chrome.devtools API'sinin tüm bölümlerine ve diğer tüm uzantı API'lerine erişebilir.

Kullanıcı isteklerini işleyen bir geri çağırma işlevi yüklemek için devtools.panels.setOpenResourceHandler yöntemini kullanabilirsiniz (genellikle, bir kaynağı açmak için Geliştirici Araçları penceresinde bir kaynak bağlantısını tıklama). Yüklü işleyicilerden en fazla biri çağrılır. Kullanıcılar, kaynak açma isteklerini işlemek için varsayılan davranışı veya bir uzantıyı (Geliştirici Araçları Ayarları iletişim kutusunu kullanarak) belirtebilir. Bir uzantı setOpenResourceHandler() işlevini birden fazla kez çağırırsa yalnızca son işleyici korunur.

Geliştirici Araçları API'lerini kullanmayla ilgili genel bir giriş için Geliştirici Araçları API'lerine genel bakış başlıklı makaleyi inceleyin.

Manifest

Bu API'yi kullanmak için aşağıdaki anahtarlar manifest dosyasında beyan edilmelidir.

"devtools_page"

Örnek

Aşağıdaki kod, Geliştirici Araçları araç çubuğunda FontPicker.png ile gösterilen ve Font Picker (Yazı Tipi Seçici) olarak etiketlenen Panel.html içinde yer alan bir panel ekler:

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

Aşağıdaki kod, Sidebar.html içinde yer alan ve Yazı Tipi Özellikleri başlıklı bir kenar çubuğu bölmesini Öğeler paneline ekler, ardından yüksekliğini 8ex olarak ayarlar:

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

Ekran görüntüsünde, bu örneğin Geliştirici Araçları penceresi üzerindeki etkisi gösterilmektedir:

Geliştirici Araçları araç çubuğundaki uzantı simgesi paneli
Geliştirici Araçları araç çubuğundaki uzantı simgesi paneli.

Bu API'yi denemek için chrome-extension-samples deposundan devtools panels API örneğini yükleyin.

Türler

Button

Uzantı tarafından oluşturulan bir düğme.

Özellikler

  • onClicked

    Event<functionvoidvoid>

    Düğme tıklandığında tetiklenir.

    onClicked.addListener işlevi şu şekilde görünür: 

    (callback: function) => {...}

    • callback

      işlev

      callback parametresi şu şekilde görünür: 

      () => void

  • update

    geçersiz

    Düğmenin özelliklerini günceller. Bağımsız değişkenlerden bazıları atlanırsa veya null ise ilgili özellikler güncellenmez.

    update işlevi şu şekilde görünür: 

    (iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}

    • iconPath

      dize isteğe bağlı

      Düğmenin yeni simgesinin yolu.

    • tooltipText

      dize isteğe bağlı

      Kullanıcı fare imlecini düğmenin üzerine getirdiğinde ipucu olarak gösterilen metin.

    • devre dışı

      boolean isteğe bağlı

      Düğmenin devre dışı olup olmadığı.

ElementsPanel

Nesne panelini gösterir.

Özellikler

  • onSelectionChanged

    Event<functionvoidvoid>

    Panelde bir nesne seçildiğinde tetiklenir.

    onSelectionChanged.addListener işlevi şu şekilde görünür: 

    (callback: function) => {...}

    • callback

      işlev

      callback parametresi şu şekilde görünür: 

      () => void

  • createSidebarPane

    geçersiz

    Panelin kenar çubuğunda bir bölme oluşturur.

    createSidebarPane işlevi şu şekilde görünür: 

    (title: string, callback?: function) => {...}

    • title

      dize

      Kenar çubuğu başlığında gösterilen metin.

    • callback

      işlev isteğe bağlı

      callback parametresi şu şekilde görünür: 

      (result: ExtensionSidebarPane) => void

      • Oluşturulan kenar çubuğu bölmesi için bir ExtensionSidebarPane nesnesi.

ExtensionPanel

Uzantı tarafından oluşturulan bir paneli temsil eder.

Özellikler

  • onHidden

    Event<functionvoidvoid>

    Kullanıcı panelden ayrıldığında tetiklenir.

    onHidden.addListener işlevi şu şekilde görünür: 

    (callback: function) => {...}

    • callback

      işlev

      callback parametresi şu şekilde görünür: 

      () => void

  • onSearch

    Event<functionvoidvoid>

    Bir arama işlemi (yeni bir arama başlatma, arama sonucu navigasyonu veya aramanın iptal edilmesi) üzerine tetiklenir.

    onSearch.addListener işlevi şu şekilde görünür: 

    (callback: function) => {...}

    • callback

      işlev

      callback parametresi şu şekilde görünür: 

      (action: string, queryString?: string) => void

      • işlem

        dize

      • queryString

        dize isteğe bağlı

  • onShown

    Event<functionvoidvoid>

    Kullanıcı panele geçtiğinde tetiklenir.

    onShown.addListener işlevi şu şekilde görünür: 

    (callback: function) => {...}

    • callback

      işlev

      callback parametresi şu şekilde görünür: 

      (window: Window) => void

      • pencere

        Pencere

  • createStatusBarButton

    geçersiz

    Panelin durum çubuğuna bir düğme ekler.

    createStatusBarButton işlevi şu şekilde görünür: 

    (iconPath: string, tooltipText: string, disabled: boolean) => {...}

    • iconPath

      dize

      Düğme simgesinin yolu. Dosya, 32x24 boyutunda iki simgeden oluşan 64x24 piksellik bir resim içermelidir. Sol simge, düğme etkin olmadığında kullanılır. Sağ simge ise düğmeye basıldığında gösterilir.

    • tooltipText

      dize

      Kullanıcı fare imlecini düğmenin üzerine getirdiğinde ipucu olarak gösterilen metin.

    • devre dışı

      boolean

      Düğmenin devre dışı olup olmadığı.

  • göster

    geçersiz

    Beklemede

    İlgili sekmeyi etkinleştirerek paneli gösterir.

    show işlevi şu şekilde görünür: 

    () => {...}

ExtensionSidebarPane

Uzantı tarafından oluşturulan bir kenar çubuğu.

Özellikler

  • onHidden

    Event<functionvoidvoid>

    Kullanıcı, kenar çubuğu bölmesini barındıran panelden uzaklaştığında kenar çubuğu bölmesi gizlendiğinde tetiklenir.

    onHidden.addListener işlevi şu şekilde görünür: 

    (callback: function) => {...}

    • callback

      işlev

      callback parametresi şu şekilde görünür: 

      () => void

  • onShown

    Event<functionvoidvoid>

    Kullanıcı, kenar çubuğu bölmesini barındıran panele geçtiğinde tetiklenir.

    onShown.addListener işlevi şu şekilde görünür: 

    (callback: function) => {...}

    • callback

      işlev

      callback parametresi şu şekilde görünür: 

      (window: Window) => void

      • pencere

        Pencere

  • setExpression

    geçersiz

    İncelenen sayfada değerlendirilen bir ifade ayarlar. Sonuç, kenar çubuğu bölmesinde gösterilir.

    setExpression işlevi şu şekilde görünür: 

    (expression: string, rootTitle?: string, callback?: function) => {...}

    • ifade

      dize

      İncelenen sayfa bağlamında değerlendirilecek bir ifade. JavaScript nesneleri ve DOM düğümleri, konsol/izleme penceresine benzer şekilde genişletilebilir bir ağaçta gösterilir.

    • rootTitle

      dize isteğe bağlı

      İfade ağacının kökü için isteğe bağlı bir başlık.

    • callback

      işlev isteğe bağlı

      callback parametresi şu şekilde görünür: 

      () => void

  • setHeight

    geçersiz

    Kenar çubuğunun yüksekliğini ayarlar.

    setHeight işlevi şu şekilde görünür: 

    (height: string) => {...}

    • yükseklik

      dize

      '100px' veya '12ex' gibi CSS benzeri bir boyut spesifikasyonu.

  • setObject

    geçersiz

    Kenar çubuğu bölmesinde görüntülenecek JSON uyumlu bir nesne ayarlar.

    setObject işlevi şu şekilde görünür: 

    (jsonObject: string, rootTitle?: string, callback?: function) => {...}

    • jsonObject

      dize

      İncelenen sayfanın bağlamında görüntülenecek bir nesne. Arayan (API istemcisi) bağlamında değerlendirilir.

    • rootTitle

      dize isteğe bağlı

      İfade ağacının kökü için isteğe bağlı bir başlık.

    • callback

      işlev isteğe bağlı

      callback parametresi şu şekilde görünür: 

      () => void

  • setPage

    geçersiz

    Kenar çubuğu bölmesinde gösterilecek bir HTML sayfası ayarlar.

    setPage işlevi şu şekilde görünür: 

    (path: string) => {...}

    • yol

      dize

      Kenar çubuğunda gösterilecek bir uzantı sayfasının göreli yolu.

SourcesPanel

Kaynaklar panelini gösterir.

Özellikler

  • onSelectionChanged

    Event<functionvoidvoid>

    Panelde bir nesne seçildiğinde tetiklenir.

    onSelectionChanged.addListener işlevi şu şekilde görünür: 

    (callback: function) => {...}

    • callback

      işlev

      callback parametresi şu şekilde görünür: 

      () => void

  • createSidebarPane

    geçersiz

    Panelin kenar çubuğunda bir bölme oluşturur.

    createSidebarPane işlevi şu şekilde görünür: 

    (title: string, callback?: function) => {...}

    • title

      dize

      Kenar çubuğu başlığında gösterilen metin.

    • callback

      işlev isteğe bağlı

      callback parametresi şu şekilde görünür: 

      (result: ExtensionSidebarPane) => void

      • Oluşturulan kenar çubuğu bölmesi için bir ExtensionSidebarPane nesnesi.

Özellikler

elements

Nesne paneli.

Tür

ElementsPanel

sources

Kaynak paneli.

Tür

SourcesPanel

themeName

Chrome 59 veya daha yeni bir sürüm

Kullanıcının Geliştirici Araçları ayarlarında belirlenen renk temasının adı. Olası değerler: default (varsayılan) ve dark.

Tür

dize

Yöntemler

create()

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): void

Uzantı paneli oluşturur.

Parametreler

  • title

    dize

    Geliştirici Araçları araç çubuğundaki uzantı simgesinin yanında gösterilen başlık.

  • iconPath

    dize

    Panelin simgesinin uzantı dizinine göre yolu.

  • pagePath

    dize

    Panelin HTML sayfasının uzantı dizinine göre yolu.

  • callback

    işlev isteğe bağlı

    callback parametresi şu şekilde görünür: 

    (panel: ExtensionPanel) => void

    • Oluşturulan paneli temsil eden bir ExtensionPanel nesnesi.

openResource()

chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
): void

Geliştirici Araçları'ndan bir URL'yi Geliştirici Araçları panelinde açmasını ister.

Parametreler

  • url

    dize

    Açılacak kaynağın URL'si.

  • lineNumber

    sayı

    Kaynak yüklendiğinde kaydırılacak satır numarasını belirtir.

  • columnNumber

    number isteğe bağlı

    Chrome 114 veya daha yeni bir sürüm

    Kaynak yüklendiğinde kaydırılacak sütun numarasını belirtir.

  • callback

    işlev isteğe bağlı

    callback parametresi şu şekilde görünür: 

    () => void

setOpenResourceHandler()

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
): void

Kullanıcı, Geliştirici Araçları penceresinde bir kaynak bağlantısını tıkladığında çağrılacak işlevi belirtir. İşleyiciyi kaldırmak için yöntemi parametre olmadan çağırın veya parametre olarak null değerini iletin.

Parametreler

  • callback

    işlev isteğe bağlı

    callback parametresi şu şekilde görünür: 

    (resource: Resource, lineNumber: number) => void