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'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ın manifest dosyasında tanımlanması gerekir.

"devtools_page"

Geliştirici Araçları API'lerinin kullanımına genel bir giriş için Geliştirici Araçları API'leri özeti bölümüne 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üllere ve chrome.extension API'ye erişebilir. Diğer uzantı API'leri, Geliştirici Araçları penceresindeki sayfalarda kullanılamaz ancak içerik komut dosyalarında olduğu gibi uzantınızın arka plan sayfasına istek göndererek bunları çağırabilirsiniz.

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() yöntemini birden çok kez çağırırsa yalnızca son işleyici saklanır.

Örnekler

Aşağıdaki kod, Geliştirici Araçları araç çubuğunda FontPicker.png ile temsil edilen ve 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 Font Properties 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");
  }
);

Aşağıdaki ekran görüntüsünde, yukarıdaki örneklerin Geliştirici Araçları penceresinde oluşturacağı etki gösterilmektedir:

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

Bu API'yi denemek için chrome-extension-samples deposundan devtools panelleri API örneğini 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 şekildedir: 

    (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 şekildedir: 

    (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

Öğeler panelini temsil eder.

Özellikler

  • onSelectionChanged

    Event<functionvoidvoid>

    Panelde bir nesne seçildiğinde tetiklenir.

    onSelectionChanged.addListener işlevi şu şekildedir: 

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

    • callback

      işlev

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

      () => void

  • createSidebarPane

    geçersiz

    Taahhüt

    Panelin kenar çubuğunda bir bölme oluşturur.

    createSidebarPane işlevi şu şekildedir: 

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

    • title

      dize

      Kenar çubuğu başlığında gösterilen metin.

    • callback

      function 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+

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

      Promise'ler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırma işlevlerini kullanması gerekir.

ExtensionPanel

Bir uzantı tarafından oluşturulan paneli temsil eder.

Özellikler

  • onHidden

    Event<functionvoidvoid>

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

    onHidden.addListener işlevi şu şekildedir: 

    (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 sonucunda gezinme veya aramanın iptal edilmesi) üzerine tetiklenir.

    onSearch.addListener işlevi şu şekildedir: 

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

    • callback

      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

    Event<functionvoidvoid>

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

    onShown.addListener işlevi şu şekildedir: 

    (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 şekildedir: 

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

    • iconPath

      dize

      Düğme simgesinin yolu. Dosya, iki adet 32x24 simgeden oluşan 64x24 piksellik bir resim içermelidir. Düğme etkin olmadığında soldaki simge kullanılır; düğmeye basıldığında sağdaki simge 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

    geçersiz

    Chrome 140+

    İlgili sekmeyi etkinleştirerek paneli gösterir.

    show işlevi şu şekildedir: 

    () => {...}

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 başka bir panele geçtiğinde kenar çubuğu bölmesi gizlenir ve bu etkinlik tetiklenir.

    onHidden.addListener işlevi şu şekildedir: 

    (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 şekildedir: 

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

    • callback

      işlev

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

      (window: Window) => void

      • pencere

        Pencere

  • setExpression

    geçersiz

    Taahhüt

    İncelenen sayfada değerlendirilen bir ifade ayarlar. Sonuç, kenar çubuğu bölmesinde gösterilir.

    setExpression işlevi şu şekildedir: 

    (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

      string isteğe bağlı

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

    • callback

      function isteğe bağlı

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

      () => void

    • returns

      Promise<void>

      Chrome 152+

      Kenar çubuğu bölmesi, ifade değerlendirme sonuçlarıyla güncellendikten sonra çağrılan bir geri çağırma.

      Promise'ler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırma işlevlerini kullanması gerekir.

  • setHeight

    geçersiz

    Kenar çubuğunun yüksekliğini ayarlar.

    setHeight işlevi şu şekildedir: 

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

    • yükseklik

      dize

      '100px' veya '12ex' gibi CSS benzeri bir boyut spesifikasyonu.

  • setObject

    geçersiz

    Taahhüt

    Kenar çubuğu bölmesinde gösterilecek JSON uyumlu bir nesne ayarlar.

    setObject işlevi şu şekildedir: 

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

    • jsonObject

      dize

      İncelenen sayfa 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.

    • callback

      function isteğe bağlı

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

      () => void

    • returns

      Promise<void>

      Chrome 152+

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

      Promise'ler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırma işlevlerini kullanması gerekir.

  • setPage

    geçersiz

    Kenar çubuğu bölmesinde gösterilecek bir HTML sayfası ayarlar.

    setPage işlevi şu şekildedir: 

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

    • yol

      dize

      Yan çubukta gösterilecek uzantı sayfasının göreli yolu.

SourcesPanel

Kaynaklar panelini temsil eder.

Özellikler

  • onSelectionChanged

    Event<functionvoidvoid>

    Panelde bir nesne seçildiğinde tetiklenir.

    onSelectionChanged.addListener işlevi şu şekildedir: 

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

    • callback

      işlev

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

      () => void

  • createSidebarPane

    geçersiz

    Taahhüt

    Panelin kenar çubuğunda bir bölme oluşturur.

    createSidebarPane işlevi şu şekildedir: 

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

    • title

      dize

      Kenar çubuğu başlığında gösterilen metin.

    • callback

      function 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+

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

      Promise'ler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırma işlevlerini kullanması gerekir.

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 her zaman açık temadır.

"dark"
Koyu tema.

Özellikler

elements

Öğeler paneli.

Tür

ElementsPanel

sources

Kaynaklar paneli.

Tür

SourcesPanel

themeName

Chrome 59+

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

Taahhüt 
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

    Panel simgesinin uzantı dizinine göre yolu.

  • pagePath

    dize

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

  • callback

    function 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+

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

    Promise'ler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırma işlevlerini kullanması gerekir.

openResource()

Taahhüt 
chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
): Promise<void>

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

    function isteğe bağlı

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

    () => void

İadeler

  • Promise<void>

    Chrome 152+

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

    Promise'ler yalnızca Manifest V3 ve sonraki sürümlerde desteklenir. Diğer platformların geri çağırma işlevlerini kullanması gerekir.

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

Parametreler

  • callback

    function 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 mevcut 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

    function isteğe bağlı

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

    (theme: Theme) => void

    • tema

      Tema

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