Geliştirici Araçları uzantıları, Geliştirici Araçları'na özel erişim sayesinde Chrome Geliştirici Araçları'na özellik ekler Geliştirici Araçları sayfasından uzantı API'lerini kullanabilirsiniz.
![Geliştirici Araçları sayfasının
incelenen pencere ve hizmet çalışanı. Hizmet çalışanı gösteriliyor
içerik komut dosyalarıyla iletişim kurma ve uzantı API'lerine erişme.
Geliştirici Araçları sayfası, panel oluşturma gibi işlemlerde Geliştirici Araçları API'lerine erişebilir.](https://developer.chrome.google.cn/static/docs/extensions/how-to/devtools/extend-devtools/image/architecture-diagram.png?authuser=5&hl=tr)
Geliştirici Araçları'na özel uzantı API'leri şunlardır:
Geliştirici Araçları sayfası
Bir Geliştirici Araçları penceresi açıldığında Geliştirici Araçları uzantısı, kendi pencere açık olduğu sürece kullanılabilir. Bu sayfa, Geliştirici Araçları API'lerine ve uzantı API'lerine erişebilir ve aşağıdakileri yapabilir:
devtools.panels
API'lerini kullanarak paneller oluşturun ve panellerle etkileşimde bulunun. Örneğin, diğer uzantı sayfalarını Geliştirici Araçları penceresine panel veya kenar çubuğu olarak ekleyebilirsiniz.- İncelenen pencere hakkında bilgi almak ve
devtools.inspectedWindow
API'ler. devtools.network
API'lerini kullanan ağ istekleri hakkında bilgi edinin.devtools.recorder
API'lerini kullanarak Kaydedici panelini genişletin.devtools.performance
API'lerini kullanarak Performans panelinin kayıt durumu hakkında bilgi edinin.
Geliştirici Araçları sayfası, uzantı API'lerine doğrudan erişebilir. Bu beceriye, rol ve sorumlulukları hizmet çalışanıyla iletişim kurmak için mesaj iletme gibidir.
Geliştirici Araçları uzantısı oluşturma
Uzantınız için bir Geliştirici Araçları sayfası oluşturmak için uzantıya devtools_page
alanını ekleyin
manifesto:
{
"name": ...
"version": "1.0",
"devtools_page": "devtools.html",
...
}
devtools_page
alanı bir HTML sayfasına yönlendirmelidir. Geliştirici Araçları,
sayfası, uzantınız için yerel olmalıdır. Bunu göreli bir URL kullanarak belirtmenizi öneririz.
chrome.devtools
API üyeleri, yalnızca Geliştirici Araçları'nda yüklenen sayfalar tarafından kullanılabilir
o pencere açık olduğunda. İçerik komut dosyalarının ve diğer uzantı sayfalarının erişimi yok
.
Geliştirici Araçları kullanıcı arayüzü öğeleri: paneller ve kenar çubuğu bölmeleri
Tarayıcı eylemleri, içerik menüleri ve pop-up'lar gibi normal uzantı kullanıcı arayüzü öğelerine ek olarak, Geliştirici Araçları uzantısı, Geliştirici Araçları penceresine kullanıcı arayüzü öğeleri ekleyebilir:
- Panel, Öğeler, Kaynaklar ve Ağ panelleri gibi üst düzey bir sekmedir.
- Kenar çubuğu bölmesinde, bir panelle ilgili ek kullanıcı arayüzü sunulur. Stiller, Hesaplanan Stiller ve Öğeler panelindeki Etkinlik İşleyiciler bölmeleri, kenar çubuğu bölmelerine örnek olarak verilebilir. Seçtiğiniz düzenleme moduna Chrome'un sürümünü ve Geliştirici Araçları penceresinin yerleştirildiğini kontrol ederseniz, kenar çubuğu bölmeleriniz aşağıdaki örnek resme benzer:
![Öğeler panelinin ve Stiller kenar çubuğu bölmesinin gösterildiği Geliştirici Araçları penceresi.](https://developer.chrome.google.cn/static/docs/extensions/how-to/devtools/extend-devtools/image/devtools-window-showing-e-9051f7f0347cd.png?authuser=5&hl=tr)
Her panel kendi HTML dosyasıdır ve bu dosya, diğer kaynakları (JavaScript, CSS, resimler vb.) açık). Temel panel oluşturmak için aşağıdaki kodu kullanın:
chrome.devtools.panels.create("My Panel",
"MyPanelIcon.png",
"Panel.html",
function(panel) {
// code invoked on panel creation
}
);
Bir panel veya kenar çubuğu bölmesinde yürütülen JavaScript'in, Geliştirici Araçları sayfasıyla aynı API'lere erişimi vardır.
Temel bir kenar çubuğu bölmesi oluşturmak için aşağıdaki kodu kullanın:
chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
function(sidebar) {
// sidebar initialization code here
sidebar.setObject({ some_data: "Some data to show" });
});
Kenar çubuğu bölmesinde içerik görüntülemenin birkaç yolu vardır:
- HTML içeriği: Bölmede görüntülenecek bir HTML sayfası belirtmek için
setPage()
yöntemini çağırın. - JSON verileri:
setObject()
hizmetine bir JSON nesnesi iletin. - JavaScript ifadesi:
setExpression()
öğesine bir ifade iletin. DevTools İfadeyi incelenen sayfa bağlamında değerlendirir, ardından döndürülen değeri görüntüler.
Hem setObject()
hem de setExpression()
için bölme, değeri
Geliştirici Araçları konsolu. Ancak setExpression()
, DOM öğelerini ve rastgele JavaScript'i görüntülemenize olanak tanır.
nesnelerini içerirken setObject()
yalnızca JSON nesnelerini destekler.
Uzantı bileşenleri arasında iletişim kurma
Aşağıdaki bölümlerde, Geliştirici Araçları uzantı bileşenlerinin birbirleriyle iletişim kurabiliyorlar.
İçerik komut dosyası ekleyin
İçerik komut dosyası eklemek için scripting.executeScript()
komutunu kullanın:
// DevTools page -- devtools.js
chrome.scripting.executeScript({
target: {
tabId: chrome.devtools.inspectedWindow.tabId
},
files: ["content_script.js"]
});
İncelenen pencerenin sekme kimliğini almak için
inspectedWindow.tabId
mülkündeki her mülk.
Halihazırda yerleştirilmiş bir içerik komut dosyası varsa mesajlaşma API'lerini kullanarak anlamak zorundasınız.
İncelenen pencerede JavaScript'i değerlendir
JavaScript'i yürütmek için inspectedWindow.eval()
yöntemini kullanabilirsiniz
kontrol edilen sayfa bağlamındaki
kodun bir örneğidir. eval()
yöntemini bir Geliştirici Araçları sayfasından çağırabilirsiniz.
bölmesini kullanabilirsiniz.
Varsayılan olarak ifade, sayfanın ana çerçevesi bağlamında değerlendirilir.
inspectedWindow.eval()
, kod ile aynı komut dosyası yürütme bağlamını ve seçeneklerini kullanır
Geliştirici Araçları konsoluna girilir. Bu düğme, Geliştirici Araçları Konsol Yardımcı Programları'na erişim sağlar
API özellikleri eval()
ile kullanılabilir. Örneğin, SOAK, bir öğeyi incelemek için bunu kullanır:
chrome.devtools.inspectedWindow.eval(
"inspect($$('head script[data-soak=main]')[0])",
function(result, isException) { }
);
inspectedWindow.eval()
adlı kişiyi şuna çekerken useContentScriptContext
özelliğini true
olarak da ayarlayabilirsiniz:
İfadeyi, içerik komut dosyalarıyla aynı bağlamda değerlendirin. Bu seçeneği kullanmak için eval()
çağrısından önce, executeScript()
çağrısı yaparak veya bir içerik belirterek statik içerik komut dosyası bildirimi kullanın.
komut dosyasını manifest.json
dosyasına ekleyin. Bağlam komut dosyası bağlamı yüklendikten sonra, bu seçeneği kullanarak
ek içerik komut dosyaları ekleyin.
Seçili öğeyi bir içerik komut dosyasına geçirin
İçerik komut dosyasının, seçili geçerli öğeye doğrudan erişimi yok. Ancak, kullanacağınız kod
inspectedWindow.eval()
kullanarak yürütmenin Geliştirici Araçları'na erişimi vardır
konsol ve Console Utilities API'leri içerir. Örneğin, değerlendirilen kodda$0
öğedir.
Seçilen öğeyi bir içerik komut dosyasına aktarmak için:
İçerik komut dosyasında, seçilen öğeyi bağımsız değişken olarak alan bir yöntem oluşturun.
function setSelectedElement(el) { // do something with the selected element }
inspectedWindow.eval()
kullanarak Geliştirici Araçları sayfasındaki yöntemi çağırınuseContentScriptContext: true
seçeneği ile birlikte.chrome.devtools.inspectedWindow.eval("setSelectedElement($0)", { useContentScriptContext: true });
useContentScriptContext: true
seçeneği, ifadenin
içerik komut dosyalarıyla aynı bağlamı kullanır; böylece setSelectedElement
yöntemine erişebilir.
Referans paneli window
al
Geliştirici Araçları panelinden postMessage()
işlevini çağırmak için window
nesnesine referans vermeniz gerekir. Bir
panel.onShown
etkinlik işleyicisinden panelin iframe penceresini seçin:
extensionPanel.onShown.addListener(function (extPanelWindow) {
extPanelWindow instanceof Window; // true
extPanelWindow.postMessage( // …
});
Yerleştirilen komut dosyalarından Geliştirici Araçları sayfasına mesaj gönder
<script>
eklenmesi de dahil olmak üzere, bir içerik komut dosyası olmadan doğrudan sayfaya yerleştirilen kod
etiketi veya inspectedWindow.eval()
çağrısına sahipse,
runtime.sendMessage()
kullanan Geliştirici Araçları sayfası. Bunun yerine
yerleştirilen komut dosyanızı, aracı işlevi görebilecek bir içerik komut dosyasıyla birleştirmek ve
window.postMessage()
yöntemini kullanır. Aşağıdaki örnekte, arka plan komut dosyası kullanılmaktadır
önceki bölümden:
// injected-script.js
window.postMessage({
greeting: 'hello there!',
source: 'my-devtools-extension'
}, '*');
// content-script.js
window.addEventListener('message', function(event) {
// Only accept messages from the same frame
if (event.source !== window) {
return;
}
var message = event.data;
// Only accept messages that we know are ours. Note that this is not foolproof
// and the page can easily spoof messages if it wants to.
if (typeof message !== 'object' || message === null ||
message.source !== 'my-devtools-extension') {
return;
}
chrome.runtime.sendMessage(message);
});
Diğer alternatif mesaj iletme teknikleri GitHub'da bulunabilir.
Geliştirici Araçları'nın ne zaman açılıp kapandığını algılama
Geliştirici Araçları penceresinin açık olup olmadığını izlemek için bir onConnect işleyicisi ekleyin ekleyin ve Geliştirici Araçları sayfasından connect() çağrısı yapın. Çünkü Her sekmenin kendi Geliştirici Araçları penceresi olabilir. Bu durumda, birden fazla bağlantı etkinliği alabilirsiniz. Herhangi bir Geliştirici Araçları penceresinin açık olup olmadığını izlemek için bağlantı ve bağlantı kesme etkinliklerini gösterildiği gibi sayın aşağıdaki örnekte:
// background.js
var openCount = 0;
chrome.runtime.onConnect.addListener(function (port) {
if (port.name == "devtools-page") {
if (openCount == 0) {
alert("DevTools window opening.");
}
openCount++;
port.onDisconnect.addListener(function(port) {
openCount--;
if (openCount == 0) {
alert("Last DevTools window closing.");
}
});
}
});
Geliştirici Araçları sayfası şuna benzer bir bağlantı oluşturur:
// devtools.js
// Create a connection to the service worker
const serviceWorkerConnection = chrome.runtime.connect({
name: "devtools-page"
});
// Send a periodic heartbeat to keep the port open.
setInterval(() => {
port.postMessage("heartbeat");
}, 15000);
Geliştirici Araçları uzantısı örnekleri
Bu sayfadaki örnekler aşağıdaki sayfalardan alınmıştır:
- Polymer Geliştirici Araçları Uzantısı - Sorgulamak için ana makine sayfasında çalışan birçok yardımcı kullanır Özel panele geri gönderilecek DOM/JS durumu.
- React Geliştirici Araçları Uzantısı: Geliştirici Araçları kullanıcı arayüzünü yeniden kullanmak için oluşturucunun bir alt modülünü kullanır bileşenlerine ayıralım.
- Ember Inspector: Hem Chrome hem de Firefox için adaptörlere sahip paylaşılan uzantı çekirdeği.
- Coquette-inspect - Hata ayıklama aracısının eklendiği temiz React tabanlı uzantı ana makine sayfasına yapıştırın.
- Örnek Uzantılar; yüklemek, denemek ve öğrenmek için daha değerli uzantılar içerir. var.
Daha fazla bilgi
Uzantıların kullanabileceği standart API'ler hakkında bilgi için chrome.* API'ler ve web API'ler.
Geri bildirimlerinizi bizimle paylaşın. Yorumlarınız ve önerileriniz API'leri iyileştirmemize yardımcı olacaktır.
Örnekler
Geliştirici Araçları API'lerinin kullanıldığı örnekleri Örnekler bölümünde bulabilirsiniz.