Açıklama
Uzantınızı Geliştirici Araçları pencere 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.
Her bir uzantı paneli ve kenar çubuğu ayrı bir HTML sayfası olarak görüntülenir. Tüm uzantı sayfaları görüntüleniyor
Geliştirici Araçları penceresindeki chrome.devtools
API'nin tüm bölümlerine ve
diğer uzantı API'lerini kullanabilirsiniz.
Geri çağırma işlevi yüklemek için devtools.panels.setOpenResourceHandler
yöntemini kullanabilirsiniz
kullanıcının bir kaynağı açma isteklerini (genellikle
Geliştirici Araçları penceresi). Yüklü işleyicilerden en fazla biri çağrılır; kullanıcıların belirleyebileceği (
Geliştirici Araçları Ayarları iletişim kutusunda) varsayılan davranışı veya kaynağı işleyecek bir uzantı
açık istekler. Bir uzantı setOpenResourceHandler()
öğesini birden çok kez çağırırsa yalnızca son çağrı
işleyicinin korunduğundan emin olun.
Geliştirici Araçları API'lerinin kullanımıyla ilgili genel bilgiler için Geliştirici Araçları API'leri özeti sayfasına bakın.
Manifest
Bu API'yi kullanmak için aşağıdaki anahtarların manifest dosyasında beyan edilmesi gerekir.
"devtools_page"
Örnek
Aşağıdaki kod, Panel.html
hücresinde yer alan, FontPicker.png
ile temsil edilen
Geliştirici Araçları araç çubuğu 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 bulunan ve Yazı Tipi Özellikleri başlıklı
Öğeler panelini, 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](https://developer.chrome.com/static/docs/extensions/reference/api/devtools/panels/images/devtools-panels.png?authuser=5&hl=tr)
Bu API'yi denemek için chrome-extension-samples bölümünden devtools panels API örneğini yükleyin. depodur.
Türler
Button
Uzantı tarafından oluşturulan bir düğme.
Özellikler
-
onClicked
Etkinlik<İşlevler geçersiz>
Düğme tıklandığında tetiklenir.
onClicked.addListener
işlevi aşağıdaki gibi görünür:(callback: function) => {...}
-
geri çağırma
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ı çıkarılırsa veya
null
olursa karşılık gelen özellikler güncellenmez.update
işlevi aşağıdaki gibi 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ışı
boole isteğe bağlı
Düğmenin devre dışı olup olmadığı.
-
ElementsPanel
Nesne panelini temsil eder.
Özellikler
-
onSelectionChanged
Etkinlik<İşlevler geçersiz>
Panelde bir nesne seçildiğinde tetiklenir.
onSelectionChanged.addListener
işlevi aşağıdaki gibi görünür:(callback: function) => {...}
-
geri çağırma
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 aşağıdaki gibi görünür:(title: string, callback?: function) => {...}
-
title
dize
Kenar çubuğu başlığında görüntülenen metin.
-
geri çağırma
işlev isteğe bağlı
callback
parametresi şu şekilde görünür:(result: ExtensionSidebarPane) => void
-
sonuç
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<İşlevler geçersiz>
Kullanıcı panelden ayrıldığında tetiklenir.
onHidden.addListener
işlevi aşağıdaki gibi görünür:(callback: function) => {...}
-
geri çağırma
işlev
callback
parametresi şu şekilde görünür:() => void
-
-
onSearch
Etkinlik<İşlevler geçersiz>
Bir arama işleminden (yeni bir arama başlangıcı, arama sonucunda gezinme veya iptal edilen arama) sonra tetiklenir.
onSearch.addListener
işlevi aşağıdaki gibi 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
dize isteğe bağlı
-
-
-
onShown
Etkinlik<İşlevler geçersiz>
Kullanıcı panele geçtiğinde tetiklenir.
onShown.addListener
işlevi aşağıdaki gibi 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
geçersiz
Panelin durum çubuğuna bir düğme ekler.
createStatusBarButton
işlevi aşağıdaki gibi görünür:(iconPath: string, tooltipText: string, disabled: boolean) => {...}
-
iconPath
dize
Düğme simgesinin yolu. Dosya, iki 32x24 simgeden oluşan 64x24 piksel boyutunda bir resim içermelidir. Düğme etkin olmadığında soldaki simge 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ığı.
-
returns
-
ExtensionSidebarPane
Uzantı tarafından oluşturulan bir kenar çubuğu.
Özellikler
-
onHidden
Etkinlik<İşlevler geçersiz>
Kullanıcının kenar çubuğu bölmesini barındıran panelden ayrılması nedeniyle kenar çubuğu bölmesi gizlendiğinde tetiklenir.
onHidden.addListener
işlevi aşağıdaki gibi görünür:(callback: function) => {...}
-
geri çağırma
işlev
callback
parametresi şu şekilde görünür:() => void
-
-
onShown
Etkinlik<İşlevler geçersiz>
Kenar çubuğu bölmesi, kullanıcının kendisini barındıran panele geçiş yapması sonucunda görünür hale geldiğinde tetiklenir.
onShown.addListener
işlevi aşağıdaki gibi 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
geçersiz
İncelenen sayfada değerlendirilen bir ifadeyi ayarlar. Sonuç, kenar çubuğu bölmesinde görüntülenir.
setExpression
işlevi aşağıdaki gibi 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
dize isteğe bağlı
İfade ağacının kökü için isteğe bağlı bir başlık.
-
geri çağırma
işlev isteğe bağlı
callback
parametresi şu şekilde görünür:() => void
-
-
setHeight
geçersiz
Kenar çubuğunun yüksekliğini ayarlar.
setHeight
işlevi aşağıdaki gibi görünür:(height: string) => {...}
-
yükseklik
dize
'100px'
veya'12ex'
gibi CSS benzeri bir boyut spesifikasyonu.
-
-
setObject
geçersiz
Kenar çubuğu bölmesinde görüntülenecek JSON uyumlu bir nesne ayarlar.
setObject
işlevi aşağıdaki gibi görünür:(jsonObject: string, rootTitle?: string, callback?: function) => {...}
-
jsonObject
dize
İncelenen sayfa bağlamında gösterilecek nesne. Arayanın bağlamında değerlendirilir (API istemcisi).
-
rootTitle
dize isteğe bağlı
İfade ağacının kökü için isteğe bağlı bir başlık.
-
geri çağırma
işlev isteğe bağlı
callback
parametresi şu şekilde görünür:() => void
-
-
setPage
geçersiz
Kenar çubuğu bölmesinde görüntülenecek bir HTML sayfası ayarlar.
setPage
işlevi aşağıdaki gibi görünür:(path: string) => {...}
-
yol
dize
Bir uzantı sayfasının kenar çubuğunda görüntülenecek göreli yolu.
-
SourcesPanel
Kaynaklar panelini temsil eder.
Özellikler
-
onSelectionChanged
Etkinlik<İşlevler geçersiz>
Panelde bir nesne seçildiğinde tetiklenir.
onSelectionChanged.addListener
işlevi aşağıdaki gibi görünür:(callback: function) => {...}
-
geri çağırma
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 aşağıdaki gibi görünür:(title: string, callback?: function) => {...}
-
title
dize
Kenar çubuğu başlığında görüntülenen metin.
-
geri çağırma
işlev isteğe bağlı
callback
parametresi şu şekilde görünür:(result: ExtensionSidebarPane) => void
-
sonuç
Oluşturulan kenar çubuğu bölmesi için bir ExtensionSidebarPane nesnesi.
-
-
Özellikler
elements
Nesne paneli.
Tür
sources
Kaynaklar paneli.
Tür
themeName
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
işlev isteğe bağlı
callback
parametresi şu şekilde görünür:(panel: ExtensionPanel) => void
-
panel
Oluşturulan paneli temsil eden bir ExtensionPanel nesnesi.
-
openResource()
chrome.devtools.panels.openResource(
url: string,
lineNumber: number,
columnNumber?: number,
callback?: function,
)
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 sayfanın kaydırılacağı satır numarasını belirtir.
-
columnNumber
sayı isteğe bağlı
Chrome 114 ve sonraki sürümler 'nı inceleyin.Kaynak yüklendiğinde sayfanın kaydırılacağı sütun numarasını belirtir.
-
geri çağırma
işlev 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 parametresiz yöntemi çağırın veya parametre olarak null geçirin.
Parametreler
-
geri çağırma
işlev isteğe bağlı
callback
parametresi şu şekilde görünür:(resource: Resource) => void
-
kaynak
Tıklanan kaynak için bir
devtools.inspectedWindow.Resource
nesnesi.
-