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.

Manifest

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

"devtools_page"

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

Genel Bakış

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'deki tüm modüllerin yanı sıra chrome.extension API'sine de erişebilir. Diğer uzantı API'leri, Geliştirici Araçları penceresindeki sayfalarda kullanılamaz ancak uzantınızın arka plan sayfasına istek göndererek bunları içerik komut dosyalarında olduğu gibi çağırabilirsiniz.

Kullanıcı isteklerini işleyen bir geri çağırma işlevi yüklemek için devtools.panels.setOpenResourceHandler yöntemini kullanabilirsiniz (genellikle, Geliştirici Araçları penceresinde bir kaynak bağlantısının tıklanması). 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 korunur.

Örnekler

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");
  }
);

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 deposundan devtools panels API example'ı 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

    Promise

    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 açıklaması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.

    • returns

      Promise<ExtensionSidebarPane>

      Beklemede

      Kenar çubuğu oluşturulduğunda çağrılan geri çağırma.

      Promises yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformlarda geri çağırmalar kullanılmalıdır.

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. Düğme etkin olmadığında sol simge, düğmeye basıldığında ise sağ simge gösterilir.

    • tooltipText

      dize

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

    • devre dışı

      boole

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

  • göster

    geçersiz

    Chrome 140 veya daha yeni bir sürüm

    İ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

    Promise

    İ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

    • returns

      Promise<void>

      Beklemede

      Kenar çubuğu bölmesi, ifade değerlendirme sonuçlarıyla güncellendikten sonra geri çağırma işlemi başlatılır.

      Promises yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformlarda geri çağırmalar kullanılmalıdır.

  • 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

    Promise

    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

    • returns

      Promise<void>

      Beklemede

      Kenar çubuğu nesneyle güncellendikten sonra çağrılan geri çağırma.

      Promises yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformlarda geri çağırmalar kullanılmalıdır.

  • 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örüntülenecek 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

    Promise

    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 açıklaması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.

    • returns

      Promise<ExtensionSidebarPane>

      Beklemede

      Kenar çubuğu oluşturulduğunda çağrılan geri çağırma.

      Promises yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformlarda geri çağırmalar kullanılmalıdır.

Theme

Chrome 99 veya daha yeni bir sürüm

Geliştirici Araçları tarafından kullanılan tema.

Enum

"default"
Varsayılan Geliştirici Araçları teması. Bu tema her zaman açık temadır.

"dark"
Koyu tema

Özellikler

elements

Nesne paneli

Tür

ElementsPanel

sources

Kaynaklar 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()

Promise 
chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): Promise<ExtensionPanel>

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.

İadeler

  • Promise<ExtensionPanel>

    Beklemede

    Panel oluşturulduğunda çağrılan bir işlev.

    Promises yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformlarda geri çağırmalar kullanılmalıdır.

openResource()

Promise 
chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
): Promise<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

İadeler

  • Promise<void>

    Beklemede

    Kaynak başarıyla yüklendiğinde çağrılan bir işlev.

    Promises yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformlarda geri çağırmalar kullanılmalıdır.

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

setThemeChangeHandler()

Chrome 99 veya daha yeni bir sürüm 
chrome.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

Geliştirici Araçları'nda geçerli tema değiştiğinde ç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: 

    (theme: Theme) => void

    • tema

      Tema

      Geliştirici Araçları'ndaki mevcut tema.