chrome.devtools.panels

Açıklama

Uzantmanızı Geliştirici Araçları pencere 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örüntülenen tüm uzantı sayfaları, chrome.devtools API'nin tüm bölümlerinin yanı sıra diğer tüm uzantı API'lerine erişebilir.

Kullanıcının bir kaynağı açma isteklerini (genellikle Geliştirici Araçları penceresindeki bir kaynak bağlantısını tıklama) işleyen bir geri çağırma işlevi yüklemek için devtools.panels.setOpenResourceHandler yöntemini kullanabilirsiniz. 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 çok kez çağırırsa yalnızca son işleyici saklanır.

Geliştirici Araçları API'lerinin kullanımına genel bir giriş için DevTools API'leri özetine bakın.

Manifest

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

"devtools_page"

Örnek

Aşağıdaki kod, Panel.html içinde bulunan, Geliştirici Araçları araç çubuğunda FontPicker.png ile temsil edilen ve Yazı Tipi Seçici olarak etiketlenen bir panel ekler:

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

Aşağıdaki kod, Sidebar.html içinde bulunan ve Yazı Tipi Özellikleri başlıklı bir kenar çubuğu bölmesi ekler ve ardından bölmenin 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ı penceresinde yaratacağı etki gösterilmektedir:

Geliştirici Araçları araç çubuğundaki uzantı simgesi paneli
DevTools 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

    Etkinlik<functionvoidvoid>

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

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

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

    • geri çağırma

      işlev

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

      () => void

  • update

    geçersiz

    Düğmenin özelliklerini günceller. Bazı bağımsız değişkenler 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ı fareyle düğmenin üzerine geldiğinde gösterilen ipucu metni.

    • devre dışı

      boole isteğe bağlı

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

ElementsPanel

Öğeler panelini temsil eder.

Özellikler

  • onSelectionChanged

    Etkinlik<functionvoidvoid>

    Panelde bir nesne seçildiğinde tetiklenir.

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

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

    • geri çağırma

      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.

    • geri çağırma

      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

    Etkinlik<functionvoidvoid>

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

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

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

    • geri çağırma

      işlev

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

      () => void

  • onSearch

    Etkinlik<functionvoidvoid>

    Bir arama işlemi (yeni bir aramanın başlatılması, arama sonucuna gitme veya aramanın iptal edilmesi) gerçekleştiğinde tetiklenir.

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

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

    • geri çağırma

      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

    Etkinlik<functionvoidvoid>

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

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

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

    • geri çağırma

      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üğmenin simgesinin yolu. Dosya, iki adet 32x24 simge içeren 64x24 piksellik bir resim içermelidir. Sol simge, düğme etkin değilken kullanılır. Sağ simge ise düğmeye basıldığında gösterilir.

    • tooltipText

      dize

      Kullanıcı fareyle düğmenin üzerine geldiğinde gösterilen ipucu metni.

    • devre dışı

      boolean

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

ExtensionSidebarPane

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

Özellikler

  • onHidden

    Etkinlik<functionvoidvoid>

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

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

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

    • geri çağırma

      işlev

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

      () => void

  • onShown

    Etkinlik<functionvoidvoid>

    Kullanıcı, kenar çubuğu bölmesini barındıran panele geçtiğinde kenar çubuğu bölmesi görünür hale geldiğinde tetiklenir.

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

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

    • geri çağırma

      işlev

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

      (window: Window) => void

      • pencere

        Pencere

  • setExpression

    geçersiz

    İncelenen sayfa içinde değerlendirilecek 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, konsola/izlemeye 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.

    • geri çağırma

      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österilecek JSON uyumlu bir nesne ayarlar.

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

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

    • jsonObject

      dize

      İncelenen sayfa bağlamında gösterilecek 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.

    • geri çağırma

      işlev isteğe bağlı

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

      () => void

  • setPage

    geçersiz

    Kenar çubuğu bölmesinde görüntülenecek 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 temsil eder.

Özellikler

  • onSelectionChanged

    Etkinlik<functionvoidvoid>

    Panelde bir nesne seçildiğinde tetiklenir.

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

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

    • geri çağırma

      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.

    • geri çağırma

      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

Kaynaklar paneli.

Tür

SourcesPanel

themeName

Chrome 59 ve sonraki sürümler

Kullanıcının DevTools ayarlarında ayarlanan 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,
)

Uzatma 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ı dizine göre yolu.

  • pagePath

    dize

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

  • geri çağırma

    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,
)

DevTools'tan 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 ve sonraki sürümler

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

  • geri çağırma

    işlev isteğe bağlı

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

    () => void

setOpenResourceHandler()

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

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

Parametreler