chrome.devtools.panels

Açıklama

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

Manifest

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

"devtools_page"

Geliştirici Araçları API'lerinin kullanımıyla ilgili genel bilgiler için Geliştirici Araçları API'leri özeti sayfasına bakın.

Genel Bakış

Her bir uzantı paneli ve kenar çubuğu ayrı bir HTML sayfası olarak görüntülenir. Tüm uzantı sayfaları görüntüleniyor Geliştirici Araçları penceresindeki chrome.devtools API'deki tüm modüllere ve ayrıca chrome.extension API'sini kullanın. Diğer uzantı API'leri Geliştirici içindeki sayfalar tarafından kullanılamaz Araçlar penceresini kullanabilirsiniz, ancak uzantınızın arka plan sayfasına bir istek göndererek bunları çağırabilirsiniz. içerik komut dosyalarında yapıldığına benzer şekilde.

Geri çağırma işlevi yüklemek için devtools.panels.setOpenResourceHandler yöntemini kullanabilirsiniz kullanıcının bir kaynağı açma isteklerini (genellikle Geliştirici Araçları penceresi). Yüklü işleyicilerden en fazla biri çağrılır; kullanıcıların belirleyebileceği ( Geliştirici Araçları Ayarları iletişim kutusunda) varsayılan davranışı veya kaynağı işleyecek bir uzantı açık istekler. Bir uzantı setOpenResourceHandler() öğesini birden çok kez çağırırsa yalnızca son çağrı işleyicinin korunduğundan emin olun.

Örnekler

Aşağıdaki kod, Panel.html hücresinde yer alan, FontPicker.png ile temsil edilen Geliştirici Araçları araç çubuğu ve Yazı Tipi Seçici olarak etiketlenir:

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ı Öğeler panelini, ardından yüksekliğini 8ex olarak ayarlar:

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

Bu ekran görüntüsünde, yukarıdaki örneklerin Geliştirici Araçları penceresi üzerindeki etkisi gösterilmektedir:

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

Bu API'yi denemek için chrome-extension-samples bölümünden devtools panels API örneğini yükleyin. depodur.

Türler

Button

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

Özellikler

  • onClicked

    Etkinlik<İşlevler geçersiz>

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

    onClicked.addListener işlevi aşağıdaki gibi 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. Bağımsız değişkenlerden bazıları çıkarılırsa veya null olursa karşılık gelen özellikler güncellenmez.

    update işlevi aşağıdaki gibi 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 ipucu olarak gösterilen metin.

    • devre dışı

      boole isteğe bağlı

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

ElementsPanel

Nesne panelini temsil eder.

Özellikler

  • onSelectionChanged

    Etkinlik<İşlevler geçersiz>

    Panelde bir nesne seçildiğinde tetiklenir.

    onSelectionChanged.addListener işlevi aşağıdaki gibi 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 aşağıdaki gibi görünür: 

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

    • title

      dize

      Kenar çubuğu başlığında görüntülenen 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<İşlevler geçersiz>

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

    onHidden.addListener işlevi aşağıdaki gibi görünür: 

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

    • geri çağırma

      işlev

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

      () => void

  • onSearch

    Etkinlik<İşlevler geçersiz>

    Bir arama işleminden (yeni bir arama başlangıcı, arama sonucunda gezinme veya iptal edilen arama) sonra tetiklenir.

    onSearch.addListener işlevi aşağıdaki gibi 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<İşlevler geçersiz>

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

    onShown.addListener işlevi aşağıdaki gibi 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 aşağıdaki gibi görünür: 

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

    • iconPath

      dize

      Düğme simgesinin yolu. Dosya, iki 32x24 simgeden oluşan 64x24 piksel boyutunda bir resim içermelidir. Düğme etkin olmadığında soldaki simge kullanılır; düğmeye basıldığında sağ simge görüntülenir.

    • tooltipText

      dize

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

    • devre dışı

      boolean

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

ExtensionSidebarPane

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

Özellikler

  • onHidden

    Etkinlik<İşlevler geçersiz>

    Kullanıcının kenar çubuğu bölmesini barındıran panelden ayrılması nedeniyle kenar çubuğu bölmesi gizlendiğinde tetiklenir.

    onHidden.addListener işlevi aşağıdaki gibi görünür: 

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

    • geri çağırma

      işlev

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

      () => void

  • onShown

    Etkinlik<İşlevler geçersiz>

    Kenar çubuğu bölmesi, kullanıcının kendisini barındıran panele geçiş yapması sonucunda görünür hale geldiğinde tetiklenir.

    onShown.addListener işlevi aşağıdaki gibi 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 sayfada değerlendirilen bir ifadeyi ayarlar. Sonuç, kenar çubuğu bölmesinde görüntülenir.

    setExpression işlevi aşağıdaki gibi görünür: 

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

    • ifade

      dize

      İncelenen sayfa bağlamında değerlendirilecek ifade. JavaScript nesneleri ve DOM düğümleri, konsola/saate benzer şekilde genişletilebilir bir ağaçta görüntülenir.

    • 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 aşağıdaki gibi 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 aşağıdaki gibi görünür: 

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

    • jsonObject

      dize

      İncelenen sayfa bağlamında gösterilecek nesne. Arayanın bağlamında değerlendirilir (API istemcisi).

    • 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 aşağıdaki gibi görünür: 

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

    • yol

      dize

      Bir uzantı sayfasının kenar çubuğunda görüntülenecek göreli yolu.

SourcesPanel

Kaynaklar panelini temsil eder.

Özellikler

  • onSelectionChanged

    Etkinlik<İşlevler geçersiz>

    Panelde bir nesne seçildiğinde tetiklenir.

    onSelectionChanged.addListener işlevi aşağıdaki gibi 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 aşağıdaki gibi görünür: 

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

    • title

      dize

      Kenar çubuğu başlığında görüntülenen 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 'nı inceleyin.

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

Uzantı paneli oluşturur.

Parametreler

  • title

    dize

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

  • iconPath

    dize

    Uzantı dizinine göre panel simgesinin yolu.

  • pagePath

    dize

    Uzantı dizinine göre panelin HTML sayfasının 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,
)

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

Parametreler

  • url

    dize

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

  • lineNumber

    sayı

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

  • columnNumber

    sayı isteğe bağlı

    Chrome 114 ve sonraki sürümler 'nı inceleyin.

    Kaynak yüklendiğinde sayfanın kaydırılacağı 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ı penceresinde bir kaynak bağlantısını tıkladığında çağrılacak işlevi belirtir. İşleyicinin ayarını kaldırmak için parametresiz yöntemi çağırın veya parametre olarak null geçirin.

Parametreler