Chrome artık standartlaştırılmış browser.* ad alanını destekliyor (Chrome 148'den itibaren kullanılabilir). Dokümanları kademeli olarak güncelliyoruz. Daha fazla bilgi için geçiş kılavuzumuzu inceleyin.

Google, içerikleri tercih ettiğiniz dile çevirmek için yapay zeka teknolojisini kullanır. Yapay zeka çevirilerinde hata olabilir.

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.

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'sinin tüm bölümlerine ve diğer tüm uzantı API'lerine erişebilir.

Bir kaynağı açmak için kullanıcı 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 üzere 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.

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.

Manifest

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

"devtools_page"

Örnek

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

Ekran görüntüsünde, bu örneğin 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 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

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

createSidebarPane işlevi şu şekildedir:
```
(title: string) => {...}
```
- title
  
  dize
  
  Kenar çubuğu başlığında gösterilen metin.
- returns
  Promise<ExtensionSidebarPane>
  
  Chrome 152+
  
  Kenar çubuğu oluşturulduğunda çağrılan bir geri çağırma.

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ığı.
- returns
  Button
göster

geçersiz

Chrome 140 ve sonraki sürümler Chrome 152'den itibaren browser.*

İ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

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

setExpression işlevi şu şekildedir:
```
(expression: string, rootTitle?: string) => {...}
```
- 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.
- 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.
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

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

setObject işlevi şu şekildedir:
```
(jsonObject: string, rootTitle?: string) => {...}
```
- 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.
- returns
  Promise<void>
  
  Chrome 152+
  
  Kenar çubuğu nesneyle güncellendikten sonra çağrılan bir geri çağırma.
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

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

createSidebarPane işlevi şu şekildedir:
```
(title: string) => {...}
```
- title
  
  dize
  
  Kenar çubuğu başlığında gösterilen metin.
- returns
  Promise<ExtensionSidebarPane>
  
  Chrome 152+
  
  Kenar çubuğu oluşturulduğunda çağrılan bir geri çağırma.

Theme

Chrome 99 ve sonraki sürümler Chrome 152'den itibaren browser.*

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 ve sonraki sürümler Chrome 152'den itibaren browser.*

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

browser.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
): 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.

İadeler

Promise<ExtensionPanel>

Chrome 152+

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

openResource()

browser.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
): 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 Chrome 152'den itibaren browser.*

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

İadeler

Promise<void>

Chrome 152+

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

setOpenResourceHandler()

browser.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
```
- kaynak
  
  Kaynak
  
  Tıklanan kaynak için bir devtools.inspectedWindow.Resource nesnesi.
- lineNumber
  
  sayı
  
  Tıklanan kaynağın satır numarasını belirtir.

setThemeChangeHandler()

Chrome 99 ve sonraki sürümler Chrome 152'den itibaren browser.*

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

chrome.devtools.panels Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Açıklama

Manifest

Örnek

Türler

Button

Özellikler

ElementsPanel

Özellikler

ExtensionPanel

Özellikler

ExtensionSidebarPane

Özellikler

SourcesPanel

Özellikler

Theme

Enum

Özellikler

elements

Tür

sources

Tür

themeName

Tür

Yöntemler

create()

Parametreler

İadeler

openResource()

Parametreler

İadeler

setOpenResourceHandler()

Parametreler

setThemeChangeHandler()

Parametreler

chrome.devtools.panels