Bu sayfa, Cloud Translation API ile çevrilmiştir.

Geliştirici Araçlarının Kapsamını Genişletin

Geliştirici Araçları uzantıları, uzantıya eklenen bir Geliştirici Araçları sayfası üzerinden Geliştirici Araçları'na özgü uzantı API'lerine erişerek Chrome Geliştirici Araçları'na özellikler ekler.

İncelenen pencere ve hizmet çalışanı ile iletişim kuran DevTools sayfasını gösteren mimari şeması. Service Worker, içerik komut dosyalarıyla iletişim kurarken ve uzantı API'lerine erişirken gösteriliyor.
Geliştirici Araçları sayfası, panel oluşturma gibi işlemler için Geliştirici Araçları API'lerine erişebilir. — DevTools uzantı mimarisi.

Geliştirici Araçları'na özel uzantı API'leri aşağıdakileri içerir:

Geliştirici Araçları sayfası

Bir Geliştirici Araçları penceresi açıldığında, bir Geliştirici Araçları uzantısı, pencere açık olduğu sürece mevcut olan Geliştirici Araçları sayfasının bir örneğini oluşturur. Bu sayfa, DevTools API'lerine ve uzantı API'lerine erişebilir ve aşağıdakileri yapabilir:

devtools.panels API'lerini kullanarak panel oluşturun ve diğer uzantı sayfalarını Geliştirici Araçları penceresine panel veya kenar çubuğu olarak eklemek de dahil olmak üzere panellerle etkileşimde bulunun.
devtools.inspectedWindow API'lerini kullanarak incelenen zaman aralığı hakkında bilgi edinin ve incelenen pencerede kodu değerlendirin.
devtools.network API'lerini kullanarak ağ istekleri hakkında bilgi edinin.
devtools.recorder API'lerini kullanarak Kaydedici panelini genişletin.

Geliştirici Araçları sayfası, uzantı API'lerine doğrudan erişebilir. Bu, mesaj iletme özelliğini kullanarak Service Worker ile iletişim kurabilmeyi de içerir.

Geliştirici Araçları uzantısı oluşturma

Uzantınıza yönelik bir Geliştirici Araçları sayfası oluşturmak için uzantı manifestine devtools_page alanını ekleyin:

{
  "name": ...
  "version": "1.0",
  "devtools_page": "devtools.html",
  ...
}

devtools_page alanı bir HTML sayfasına işaret etmelidir. Geliştirici Araçları sayfasının uzantınız için yerel olması gerektiğinden, göreli bir URL kullanarak bunu belirtmenizi öneririz.

chrome.devtools API'sinin üyeleri, yalnızca Geliştirici Araçları penceresi açıkken bu pencere açıkken yüklenen sayfalar tarafından kullanılabilir. İçerik komut dosyaları ve diğer uzantı sayfalarının bu API'lere erişimi yoktur.

DevTools kullanıcı arayüzü öğeleri: paneller ve kenar çubuğu bölmeleri

Tarayıcı işlemleri, içerik menüleri ve pop-up'lar gibi olağan uzantı kullanıcı arayüzü öğelerine ek olarak, bir 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ölmesi, bir panelle ilgili ek kullanıcı arayüzü sunar. Nesne panelindeki Stiller, Hesaplanan Stiller ve Etkinlik İşleyiciler bölmeleri, kenar çubuğu bölmelerine örnek olarak verilebilir. Kullandığınız Chrome sürümüne ve Geliştirici Araçları penceresinin yerleştirildiği yere bağlı olarak, kenar çubuğu bölmeleriniz aşağıdaki örnek gibi görünebilir:

Nesne panelini ve Stiller kenar çubuğu bölmesini gösteren DevTools penceresi. — Öğeler panelini ve Stiller kenar çubuğu bölmesini gösteren Geliştirici Araçları penceresi.

Her panel, diğer kaynakları (JavaScript, CSS, resimler vb.) içerebilen kendi HTML dosyasıdır. 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 panelde veya kenar çubuğu bölmesinde yürütülen JavaScript, Geliştirici Araçları sayfasıyla aynı API'lara erişebilir.

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ını belirtmek için setPage() çağrısı yapın.
JSON verileri: setObject() hizmetine bir JSON nesnesi iletin.
JavaScript ifadesi: setExpression() işlevine bir ifade iletin. Geliştirici Araçları, ifadeyi incelenen sayfanın 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ölmede değer, Geliştirici Araçları konsolunda görüneceği şekilde gösterilir. Bununla birlikte setExpression(), DOM öğelerini ve rastgele JavaScript nesnelerini görüntüleyebilmenizi sağlarken 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 birbiriyle iletişim kurmasına olanak tanıyan bazı faydalı yöntemler açıklanmaktadır.

İçerik komut dosyası ekleme

İçerik komut dosyası eklemek için scripting.executeScript() aracını kullanın:

// DevTools page -- devtools.js
chrome.scripting.executeScript({
  target: {
    tabId: chrome.devtools.inspectedWindow.tabId
  },
  files: ["content_script.js"]
});

İncelenen pencerenin sekme kimliğini inspectedWindow.tabId özelliğini kullanarak alabilirsiniz.

Bir içerik komut dosyası zaten yerleştirilmişse onunla iletişim kurmak için mesajlaşma API'lerini kullanabilirsiniz.

İncelenen pencerede JavaScript'i değerlendirin

İncelenen sayfanın bağlamında JavaScript kodunu yürütmek için inspectedWindow.eval() yöntemini kullanabilirsiniz. eval() yöntemini bir Geliştirici Araçları sayfasından, panelinden veya kenar çubuğu bölmesinden çağırabilirsiniz.

Dikkat: eval() kodunu yalnızca denetlenen bir sayfanın JavaScript içeriğine erişmeniz gerektiğinde kullanın. Aksi takdirde, komut dosyalarını çalıştırmak için scripting.executeScript() yöntemini kullanmanızı öneririz. Daha fazla bilgi için inspectedWindow

sayfasına bakın.

Varsayılan olarak ifade, sayfanın ana çerçevesi bağlamında değerlendirilir. inspectedWindow.eval(), DevTools konsoluna girilen kodla aynı komut dosyası yürütme bağlamını ve seçeneklerini kullanır. Bu da, eval() kullanılırken Geliştirici Araçları Console Utilities API özelliklerine erişim sağlar. Örneğin, SOAK bunu bir öğeyi incelemek için kullanır:

chrome.devtools.inspectedWindow.eval(
  "inspect($$('head script[data-soak=main]')[0])",
  function(result, isException) { }
);

İfadeyi içerik komut dosyalarıyla aynı bağlamda değerlendirmek için inspectedWindow.eval() çağırırken useContentScriptContext öğesini true olarak da ayarlayabilirsiniz. Bu seçeneği kullanmak için executeScript() çağrısı yaparak veya manifest.json dosyasında bir içerik komut dosyası belirterek eval() yöntemini çağırmadan önce statik içerik komut dosyası bildirimi kullanın. Bağlam komut dosyası bağlamı yüklendikten sonra bu seçeneği ek içerik komut dosyaları eklemek için de kullanabilirsiniz.

Seçili öğeyi içerik komut dosyasına geçirin

İçerik komut dosyasının seçili öğeye doğrudan erişimi yok. Bununla birlikte, inspectedWindow.eval() kullanarak yürüttüğünüz tüm kodlar Geliştirici Araçları konsoluna ve Console Utilities API'lerine erişebilir. Örneğin, değerlendirilen kodda seçilen öğeye erişmek için $0 kullanabilirsiniz.

Seçili öğeyi içerik komut dosyasına geçirmek 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
}
```
useContentScriptContext: true seçeneğiyle inspectedWindow.eval() yöntemini kullanarak Geliştirici Araçları sayfasından yöntemi çağırın.
```
chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });
```

useContentScriptContext: true seçeneği, ifadenin setSelectedElement yöntemine erişebilmesi için içerik komut dosyalarıyla aynı bağlamda değerlendirilmesi gerektiğini belirtir.

Referans panelin `window` öğesini al

Bir geliştirici araçları panelinden postMessage() öğesini çağırmak için window nesnesine referans vermeniz gerekir. panel.onShown etkinlik işleyicisinden bir panelin iframe penceresini alın:

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> etiketi ekleme veya inspectedWindow.eval() çağrısı yapma dahil olmak üzere, içerik komut dosyası olmadan doğrudan sayfaya yerleştirilen kod, runtime.sendMessage() kullanılarak Geliştirici Araçları sayfasına mesaj gönderemez. Bunun yerine, yerleştirilen komut dosyanızı aracı işlevi görebilecek bir içerik komut dosyasıyla birleştirmenizi ve window.postMessage() yöntemini kullanmanızı öneririz. Aşağıdaki örnekte, önceki bölümde yer alan arka plan komut dosyası kullanılmaktadır:

// 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 açılıp kapandığını algıla

Geliştirici Araçları penceresinin açık olup olmadığını izlemek için hizmet çalışanına bir onConnect işleyicisi ekleyin ve Geliştirici Araçları sayfasından connect() yöntemini çağırın. Her sekmenin kendi Geliştirici Araçları penceresi açık olabileceğinden birden fazla bağlantı etkinliği alabilirsiniz. Herhangi bir Geliştirici Araçları penceresinin açık olup olmadığını izlemek için bağlanma ve bağlantıyı kesme etkinliklerini aşağıdaki örnekte gösterildiği gibi sayın:

// 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 Devtools Extension - Özel panele geri göndermek amacıyla DOM/JS durumunu sorgulamak için ana makine sayfasında çalışan birçok yardımcı kullanır.
React DevTools Uzantısı: DevTools kullanıcı arayüzü bileşenlerini yeniden kullanmak için oluşturucunun bir alt modülünü kullanır.
Ember Inspector - Chrome ve Firefox için bağdaştırıcılara sahip, paylaşılan uzantı çekirdeği.
Coquette-inspect - Ana makine sayfasına eklenmiş bir hata ayıklama aracısı içeren temiz React tabanlı bir uzantı.
Örnek Uzantılar'ın yüklenmesi, denenmesi ve öğrenmesi gereken daha değerli uzantılar vardır.

Daha fazla bilgi

Uzantıların kullanabileceği standart API'lar hakkında bilgi edinmek için chrome* API'ler ve web API'ları hakkında daha fazla bilgi edinin.

Geri bildirimlerinizi bizimle paylaşın. Yorumlarınız ve önerileriniz API'leri iyileştirmemize yardımcı olur.

Örnekler

DevTools API'lerinin kullanıldığı örnekleri Örnekler bölümünde bulabilirsiniz.

Geliştirici Araçlarının Kapsamını Genişletin

Geliştirici Araçları sayfası

Geliştirici Araçları uzantısı oluşturma

DevTools kullanıcı arayüzü öğeleri: paneller ve kenar çubuğu bölmeleri

Uzantı bileşenleri arasında iletişim kurma

İçerik komut dosyası ekleme

İncelenen pencerede JavaScript'i değerlendirin

Seçili öğeyi içerik komut dosyasına geçirin

Referans panelin window öğesini al

Yerleştirilen komut dosyalarından Geliştirici Araçları sayfasına mesaj gönder

Geliştirici Araçları'nın açılıp kapandığını algıla

Geliştirici Araçları uzantısı örnekleri

Daha fazla bilgi

Örnekler

Referans panelin `window` öğesini al