chrome.devtools.panels

refresh date: 2026-09-25 robots: noindex

Açıklama

Uzantınızı Geliştirici Araçları penceresi 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'lerini kullanmaya ilişkin genel bir giriş için Geliştirici Araçları API'lerine genel bakış konusuna bakın.

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, content script'lerde olduğu gibi, uzantınızın arka plan sayfasına istek göndererek bu API'leri çağırabilirsiniz.

Bir geri çağırma işlevi yüklemek için devtools.panels.setOpenResourceHandler yöntemini kullanabilirsiniz. Bu işlev, bir kaynağı açma (genellikle Geliştirici Araçları penceresindeki bir kaynak bağlantısını tıklama) kullanıcı isteklerini işler. 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.

Örnekler

Aşağıdaki kod, Panel.html içinde yer alan bir paneli ekler. Bu panel, Geliştirici Araçları araç çubuğunda FontPicker.png ile gösterilir 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 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

    void

    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ı fareyle düğmenin üzerine geldiğ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 etkinleşir.

    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

    void

    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>

      Chrome 152 ve sonraki sürümler

      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 uzaklaştığı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 aramanın başlatılması, 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

    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, 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ı fareyle düğmenin üzerine geldiğinde ipucu olarak gösterilen metin.

    • devre dışı

      boole

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

  • göster

    void

    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 ayrıldığı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 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) => {...}

    • callback

      işlev

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

      (window: Window) => void

      • pencere

        Pencere

  • setExpression

    void

    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>

      Chrome 152 ve sonraki sürümler

      Kenar çubuğu bölmesi, ifade değerlendirme sonuçlarıyla 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.

  • 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

    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>

      Chrome 152 ve sonraki sürümler

      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

    void

    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 temsil eder.

Özellikler

  • onSelectionChanged

    Event<functionvoidvoid>

    Panelde bir nesne seçildiğinde etkinleşir.

    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

    void

    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>

      Chrome 152 ve sonraki sürümler

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

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

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ğunda 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>

    Chrome 152 ve sonraki sürümler

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

    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>

    Chrome 152 ve sonraki sürümler

    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 ve sonraki sürümler 
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.