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'sını 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örüntülenir. Geliştirici Araçları penceresinde görüntülenen tüm uzantı sayfaları, chrome.devtools API'sindeki tüm modüllere ve chrome.extension API'sine erişebilir. Diğer uzantı API'leri Geliştirici Araçları penceresindeki sayfalar için kullanılamaz. Ancak içerik komut dosyalarındaki gibi, uzantınızın arka plan sayfasına bir istek göndererek bunları çağırabilirsiniz.

Bir kaynağı açmaya yönelik kullanıcı isteklerini işleyen (genellikle Geliştirici Araçları penceresinde bir kaynak bağlantısını tıklama) 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, (Geliştirici Araçları Ayarları iletişim kutusunu kullanarak) kaynak açma isteklerini ele almak için varsayılan davranışı veya bir uzantıyı belirtebilir. Bir uzantı setOpenResourceHandler() öğesini birden çok kez çağırırsa yalnızca son işleyici korunur.

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ın manifest'te beyan edilmesi gerekir.

"devtools_page"

Örnek

Aşağıdaki kod Panel.html içinde yer alan, 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çindeki 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österilmiştir:

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

    void

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

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

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

    • iconPath

      string isteğe bağlı

      Düğmenin yeni simgesinin yolu.

    • tooltipText

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

    void

    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örüntülenen metin.

    • geri çağırma

      Functions (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şleminde (yeni bir aramanın başlangıcı, arama sonuçlarında gezinme veya aramanın iptal edilmesi) tetiklenmesi.

    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

        string 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

    void

    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, iki adet 32x24 simgeden oluşan 64x24 piksel boyutunda bir resim içermelidir. Soldaki simge, düğme etkin olmadığında 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<functionvoidvoid>

    Kenar çubuğu bölmesi, kullanıcının kenar çubuğu bölmesini barındıran panelden ayrılması nedeniyle 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>

    Kenar çubuğu bölmesi, kullanıcının onu barındıran panele geçmesinin bir sonucu olarak görünür hale gelmesiyle 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

    void

    İncelenen sayfada değerlendirilen bir ifadeyi ayarlar. Sonuç, kenar çubuğu bölmesinde görüntülenir.

    setExpression işlevi şu şekilde 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

      string isteğe bağlı

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

    • geri çağırma

      Functions (isteğe bağlı)

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

      ()=>void

  • setHeight

    void

    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

    void

    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ın (API istemcisi) bağlamında değerlendirilir.

    • rootTitle

      string isteğe bağlı

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

    • geri çağırma

      Functions (isteğe bağlı)

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

      ()=>void

  • setPage

    void

    Kenar çubuğu bölmesinde görüntülenecek bir HTML sayfasını ayarlar.

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

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

    • yol

      dize

      Kenar çubuğunda görüntülenecek 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

    void

    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örüntülenen metin.

    • geri çağırma

      Functions (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 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

    Functions (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'dan 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 kaydırılacak satır numarasını belirtir.

  • columnNumber

    numara isteğe bağlı

    Chrome 114 ve sonraki sürümler

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

  • geri çağırma

    Functions (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 parametre olmadan yöntemi çağırın veya parametre olarak null değerini iletin.

Parametreler