Açıklama
Uzantınızı Geliştirici Araçları penceresi kullanıcı arayüzüne entegre etmek için chrome.devtools.panels
API'sını 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örüntülenir. Geliştirici Araçları penceresinde görüntülenen tüm uzantı sayfaları, chrome.devtools
API'sindeki tüm modüllere ve chrome.extension API'sine erişebilir. Diğer uzantı API'leri Geliştirici Araçları penceresindeki sayfalar için kullanılamaz. Ancak içerik komut dosyalarındaki gibi, uzantınızın arka plan sayfasına bir istek göndererek bunları çağırabilirsiniz.
Bir kaynağı açmaya yönelik kullanıcı isteklerini işleyen (genellikle Geliştirici Araçları penceresinde bir kaynak bağlantısını tıklama) 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, (Geliştirici Araçları Ayarları iletişim kutusunu kullanarak) kaynak açma isteklerini ele almak için varsayılan davranışı veya bir uzantıyı belirtebilir. Bir uzantı setOpenResourceHandler()
öğesini birden çok kez çağırırsa yalnızca son işleyici korunur.
Geliştirici Araçları API'lerinin kullanımına genel bir giriş için DevTools API'leri özetine bakın.
Manifest
Örnek
Aşağıdaki kod Panel.html
içinde yer alan, Geliştirici Araçları araç çubuğunda FontPicker.png
ile temsil edilen ve Yazı Tipi Seçici olarak etiketlenen bir panel ekler:
chrome.devtools.panels.create("Font Picker",
"FontPicker.png",
"Panel.html",
function(panel) { ... });
Aşağıdaki kod, Sidebar.html
içindeki 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");
}
);
Ekran görüntüsünde, bu örneğin Geliştirici Araçları penceresi üzerindeki etkisi gösterilmiştir:
Bu API'yi denemek için chrome-extension-samples deposundan devtools panels API örneğini yükleyin.
Türler
Button
Uzantı tarafından oluşturulan bir düğme.
Özellikler
-
onClicked
Etkinlik<functionvoidvoid>
Düğme tıklandığında tetiklenir.
onClicked.addListener
işlevi şu şekilde görünür:(callback: function) => {...}
-
geri çağırma
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ır veya
null
olursa ilgili özellikler güncellenmez.update
işlevi şu şekilde görünür:(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
Nesne panelini temsil eder.
Özellikler
-
onSelectionChanged
Etkinlik<functionvoidvoid>
Panelde bir nesne seçildiğinde tetiklenir.
onSelectionChanged.addListener
işlevi şu şekilde görünür:(callback: function) => {...}
-
geri çağırma
işlev
callback
parametresi şu şekilde görünür:() => void
-
-
createSidebarPane
void
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 başlığında görüntülenen metin.
-
geri çağırma
Functions (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<functionvoidvoid>
Kullanıcı panelden ayrıldığında tetiklenir.
onHidden.addListener
işlevi şu şekilde görünür:(callback: function) => {...}
-
geri çağırma
işlev
callback
parametresi şu şekilde görünür:() => void
-
-
onSearch
Etkinlik<functionvoidvoid>
Bir arama işleminde (yeni bir aramanın başlangıcı, arama sonuçlarında gezinme veya aramanın iptal edilmesi) tetiklenmesi.
onSearch.addListener
işlevi şu şekilde 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
string isteğe bağlı
-
-
-
onShown
Etkinlik<functionvoidvoid>
Kullanıcı panele geçtiğinde tetiklenir.
onShown.addListener
işlevi şu şekilde 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
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, iki adet 32x24 simgeden oluşan 64x24 piksel boyutunda bir resim içermelidir. Soldaki simge, düğme etkin olmadığında 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<functionvoidvoid>
Kenar çubuğu bölmesi, kullanıcının kenar çubuğu bölmesini barındıran panelden ayrılması nedeniyle gizlendiğinde tetiklenir.
onHidden.addListener
işlevi şu şekilde görünür:(callback: function) => {...}
-
geri çağırma
işlev
callback
parametresi şu şekilde görünür:() => void
-
-
onShown
Etkinlik<functionvoidvoid>
Kenar çubuğu bölmesi, kullanıcının onu barındıran panele geçmesinin bir sonucu olarak görünür hale gelmesiyle tetiklenir.
onShown.addListener
işlevi şu şekilde 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
void
İncelenen sayfada değerlendirilen bir ifadeyi ayarlar. Sonuç, kenar çubuğu bölmesinde görüntülenir.
setExpression
işlevi şu şekilde 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
string isteğe bağlı
İfade ağacının kökü için isteğe bağlı bir başlık.
-
geri çağırma
Functions (isteğe bağlı)
callback
parametresi şu şekilde görünür:() => void
-
-
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
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ı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.
-
geri çağırma
Functions (isteğe bağlı)
callback
parametresi şu şekilde görünür:() => void
-
-
setPage
void
Kenar çubuğu bölmesinde görüntülenecek bir HTML sayfasını 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 temsil eder.
Özellikler
-
onSelectionChanged
Etkinlik<functionvoidvoid>
Panelde bir nesne seçildiğinde tetiklenir.
onSelectionChanged.addListener
işlevi şu şekilde görünür:(callback: function) => {...}
-
geri çağırma
işlev
callback
parametresi şu şekilde görünür:() => void
-
-
createSidebarPane
void
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 başlığında görüntülenen metin.
-
geri çağırma
Functions (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
Functions (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,
)
DevTools'dan 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
numara isteğe bağlı
Chrome 114 ve sonraki sürümlerKaynak yüklendiğinde kaydırma yapılacak sütun numarasını belirtir.
-
geri çağırma
Functions (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 parametre olmadan yöntemi çağırın veya parametre olarak null değerini iletin.
Parametreler
-
geri çağırma
Functions (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.
-