Geliştirici Araçları'nın Kapsamını Genişletme

Genel bakış

Geliştirici Araçları uzantısı, Chrome Geliştirici Araçları'na işlev ekler. Yeni kullanıcı arayüzü panelleri ve kenar çubukları ekleyebilir, denetlenen sayfayla etkileşime geçebilir, ağ istekleri hakkında bilgi alabilir ve daha pek çok işlem yapabilir. Öne çıkan Geliştirici Araçları uzantılarını görüntüleyin. Geliştirici Araçları uzantıları, Geliştirici Araçları'na özel ek uzantı API'leri grubuna erişebilir:

Geliştirici Araçları uzantısı diğer uzantılar gibi yapılandırılır: Bir arka plan sayfası, içerik komut dosyaları ve başka öğeler içerebilir. Ayrıca her Geliştirici Araçları uzantısının, Geliştirici Araçları API'lerine erişimi olan bir Geliştirici Araçları sayfası vardır.

Geliştirici Araçları sayfasının denetlenen pencere ve arka plan sayfasıyla iletişim kurduğunu gösteren mimari şeması. İçerik komut dosyalarıyla iletişim kuran ve uzantı API'lerine erişen arka plan sayfası gösterilmektedir. Geliştirici Araçları sayfası, panel oluşturma gibi işlemler için Geliştirici Araçları API'lerine erişebilir.

Geliştirici Araçları sayfası

Geliştirici Araçları penceresi her açıldığında uzantının Geliştirici Araçları sayfası örneği oluşturulur. Geliştirici Araçları sayfası, Geliştirici Araçları penceresinin kullanım ömrü boyunca mevcuttur. Geliştirici Araçları sayfası, DevTools API'lerine ve sınırlı sayıda uzantı API'sine erişebilir. Özel olarak, Geliştirici Araçları sayfası şunları yapabilir:

  • devtools.panels API'lerini kullanarak paneller oluşturma ve panellerle etkileşimde bulunma.
  • devtools.inspectedWindow API'lerini kullanarak denetlenen pencere hakkında bilgi edinin ve incelenen pencerede kodu değerlendirin.
  • devtools.network API'lerini kullanarak ağ istekleri hakkında bilgi edinin.

Geliştirici Araçları sayfası, uzantı API'lerinin çoğunu doğrudan kullanamaz. Bir içerik komut dosyasının erişebildiği extension ve runtime API'lerinin aynı alt kümesine erişebilir. Tıpkı içerik komut dosyası gibi, Geliştirici Araçları sayfası da İleti İletme özelliğini kullanarak arka plan sayfasıyla iletişim kurabilir. Örnek için İçerik Komut Dosyası Ekleme bölümüne bakın.

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

Uzantınız için bir Geliştirici Araçları sayfası oluşturmak üzere uzantı manifestine devtools_page alanını ekleyin:

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

Açılan her Geliştirici Araçları penceresi için uzantınızın manifest dosyasında belirtilen devtools_page öğesinin bir örneği oluşturulur. Sayfa, devtools.panels API'yi kullanarak Geliştirici Araçları penceresine panel ve kenar çubukları olarak başka uzantı sayfaları ekleyebilir.

chrome.devtools.* API modülleri, yalnızca Geliştirici Araçları penceresinde yüklenen sayfalarda kullanılabilir. İçerik komut dosyaları ve diğer uzantı sayfalarında bu API'ler yoktur. Bu nedenle, API'ler yalnızca Geliştirici Araçları penceresinin kullanım ömrü boyunca kullanılabilir.

Henüz deneme aşamasında olan bazı DevTools API'leri de vardır. Daha fazla bilgi için chrome.Deneyselal.* API'ler bölümünü inceleyin.

Geliştirici Araçları 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 her zamanki 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. (Kenar çubuğu bölmelerinin görünümünün, kullandığınız Chrome sürümüne ve Geliştirici Araçları penceresinin yerleştirildiği yere bağlı olarak resimle eşleşmeyebileceğini unutmayın.)

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

Her panelin kendi HTML dosyası vardır. Bu dosya diğer kaynakları (JavaScript, CSS, resimler vb.) içerebilir. Temel panel şu şekilde oluşturulur:

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.

Nesneler paneli için temel bir kenar çubuğu bölmesi şu şekilde oluşturulur:

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 işlevini çağırın.
  • JSON verileri. setObject hizmetine bir JSON nesnesi iletin.
  • JavaScript ifadesi. setExpression işlevine bir ifade iletin. DevTools, ifadeyi denetlenen sayfa bağlamında değerlendirir ve 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ı konsolundaki gibi gösterilir. Bununla birlikte setExpression, DOM öğelerini ve rastgele JavaScript nesnelerini görüntülemenize izin verirken setObject yalnızca JSON nesnelerini destekler.

Uzantı bileşenleri arasında iletişim

Aşağıdaki bölümlerde, DevTools uzantısının farklı bileşenleri arasında iletişim kurmaya ilişkin bazı tipik senaryolar açıklanmaktadır.

İçerik komut dosyası yerleştirme

Geliştirici Araçları sayfası tabs.executeScript'i doğrudan çağıramaz. Geliştirici Araçları sayfasından içerik komut dosyası eklemek için inspectedWindow.tabId özelliğini kullanarak denetlenen pencerenin sekmesinin kimliğini almanız ve arka plan sayfasına bir mesaj göndermeniz gerekir. Arka plan sayfasından tabs.executeScript çağrısı yaparak komut dosyasını ekleyin.

Aşağıdaki kod snippet'lerinde executeScript kullanılarak içerik komut dosyasının nasıl ekleneceği gösterilmektedir.

// DevTools page -- devtools.js
// Create a connection to the background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "devtools-page"
});

backgroundPageConnection.onMessage.addListener(function (message) {
    // Handle responses from the background page, if any
});

// Relay the tab ID to the background page
chrome.runtime.sendMessage({
    tabId: chrome.devtools.inspectedWindow.tabId,
    scriptToInject: "content_script.js"
});

Arka plan sayfasının kodu:

// Background page -- background.js
chrome.runtime.onConnect.addListener(function(devToolsConnection) {
    // assign the listener function to a variable so we can remove it later
    var devToolsListener = function(message, sender, sendResponse) {
        // Inject a content script into the identified tab
        chrome.tabs.executeScript(message.tabId,
            { file: message.scriptToInject });
    }
    // add the listener
    devToolsConnection.onMessage.addListener(devToolsListener);

    devToolsConnection.onDisconnect.addListener(function() {
         devToolsConnection.onMessage.removeListener(devToolsListener);
    });
});

JavaScript'i denetlenen pencerede değerlendirme

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

İfade, varsayılan olarak sayfanın ana çerçevesi bağlamında değerlendirilir. Artık DevTools komut satırı API'sinin öğe denetimi (inspect(elem)), işlevleri bozma (debug(fn)), panoya kopyalama (copy()) ve daha birçok özelliği hakkında bilgi sahibi olabilirsiniz. inspectedWindow.eval(), Geliştirici Araçları konsoluna yazılan kodla aynı komut dosyası yürütme bağlamını ve seçeneklerini kullanır. Bu da değerlendirme sırasında bu API'lere 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) { }
);

Alternatif olarak, ifadeyi içerik komut dosyalarıyla aynı bağlamda değerlendirmek amacıyla inspectedWindow.eval() için useContentScriptContext: true seçeneğini kullanın. eval çağrısı, useContentScriptContext: true ile bir içerik komut dosyası bağlamı oluşturmaz. Bu nedenle, eval yöntemini çağırmadan önce executeScript çağrısı yaparak veya manifest.json dosyasında bir içerik komut dosyası belirterek bir bağlam komut dosyası yüklemeniz gerekir.

Bağlam komut dosyası bağlamı mevcut olduğunda, ek içerik komut dosyaları eklemek için bu seçeneği kullanabilirsiniz.

eval yöntemi doğru bağlamda kullanıldığında güçlü, uygunsuz kullanıldığında ise tehlikelidir. İncelenen sayfanın JavaScript bağlamına erişmeniz gerekmiyorsa tabs.executeScript yöntemini kullanın. Ayrıntılı uyarılar ve iki yöntemin karşılaştırması için inspectedWindow bölümüne bakın.

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

İç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 komut satırı API'lerine erişebilir. Örneğin, değerlendirilen kodda seçili öğeye erişmek için $0 kullanabilirsiniz.

Seçili öğeyi içerik komut dosyasına geçirmek için:

  • İçerik komut dosyasında, seçili öğeyi bağımsız değişken olarak alan bir yöntem oluşturun.
  • useContentScriptContext: true seçeneğiyle birlikte inspectedWindow.eval kodunu kullanarak Geliştirici Araçları sayfasından yöntemi çağırın.

İçerik komut dosyanızdaki kod aşağıdaki gibi görünebilir:

function setSelectedElement(el) {
    // do something with the selected element
}

Bu yöntemi Geliştirici Araçları sayfasından şu şekilde ç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 bilgisi alınıyor

Bir geliştirici araçları panelinden postMessage için window nesnesine referans vermeniz gerekir. panel.onShown etkinlik işleyicisinden panelin iframe penceresini alın:

onShown.addListener(function callback)
extensionPanel.onShown.addListener(function (extPanelWindow) {
    extPanelWindow instanceof Window; // true
    extPanelWindow.postMessage( // …
});

İçerik komut dosyalarından Geliştirici Araçları sayfasına mesajlaşma

Geliştirici Araçları sayfası ile içerik komut dosyaları arasındaki mesajlaşma, arka plan sayfası üzerinden dolaylı olarak yapılır.

İçerik komut dosyasına mesaj gönderirken arka plan sayfası, İçerik Komut Dosyası Yerleştirme bölümünde gösterildiği gibi mesajı belirli bir sekmedeki içerik komut dosyalarına yönlendiren tabs.sendMessage yöntemini kullanabilir.

İçerik komut dosyasından mesaj gönderirken mesajı geçerli sekmeyle ilişkilendirilmiş doğru Geliştirici Araçları sayfası örneğine iletmek için hazır bir yöntem yoktur. Geçici bir çözüm olarak, Geliştirici Araçları sayfasının arka plan sayfasıyla uzun süreli bir bağlantı oluşturmasını ve arka plan sayfasının bağlantılara ait sekme kimliklerinin haritasını tutmasını sağlayabilirsiniz. Böylece bu sayfa her mesajı doğru bağlantıya yönlendirebilir.

// background.js
var connections = {};

chrome.runtime.onConnect.addListener(function (port) {

    var extensionListener = function (message, sender, sendResponse) {

        // The original connection event doesn't include the tab ID of the
        // DevTools page, so we need to send it explicitly.
        if (message.name == "init") {
          connections[message.tabId] = port;
          return;
        }

    // other message handling
    }

    // Listen to messages sent from the DevTools page
    port.onMessage.addListener(extensionListener);

    port.onDisconnect.addListener(function(port) {
        port.onMessage.removeListener(extensionListener);

        var tabs = Object.keys(connections);
        for (var i=0, len=tabs.length; i < len; i++) {
          if (connections[tabs[i]] == port) {
            delete connections[tabs[i]]
            break;
          }
        }
    });
});

// Receive message from content script and relay to the devTools page for the
// current tab
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // Messages from content scripts should have sender.tab set
    if (sender.tab) {
      var tabId = sender.tab.id;
      if (tabId in connections) {
        connections[tabId].postMessage(request);
      } else {
        console.log("Tab not found in connection list.");
      }
    } else {
      console.log("sender.tab not defined.");
    }
    return true;
});

Geliştirici Araçları sayfası (veya panel ya da kenar çubuğu bölmesi) bağlantıyı şu şekilde oluşturur:

// Create a connection to the background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "panel"
});

backgroundPageConnection.postMessage({
    name: 'init',
    tabId: chrome.devtools.inspectedWindow.tabId
});

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

Yukarıdaki çözüm içerik komut dosyaları için işe yarasa da, doğrudan sayfaya yerleştirilen kod (ör. <script> etiketi ekleyerek veya inspectedWindow.eval üzerinden) farklı bir strateji gerektirir. Bu bağlamda runtime.sendMessage, mesajları arka plan komut dosyasına beklendiği gibi iletmez.

Çözüm olarak, yerleştirilen komut dosyanızı aracı görevi gören bir içerik komut dosyasıyla birleştirebilirsiniz. Mesajları içerik komut dosyasına iletmek için window.postMessage API'yi kullanabilirsiniz. Önceki bölümden arka plan komut dosyasının kullanıldığı varsayılarak aşağıda bir örnek verilmiştir:

// 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
  if (typeof message !== 'object' || message === null ||
      !message.source === 'my-devtools-extension') {
    return;
  }

  chrome.runtime.sendMessage(message);
});

Mesajınız, yerleştirilen komut dosyasından içerik komut dosyasına, arka plan komut dosyasına ve son olarak da Geliştirici Araçları sayfasına gider.

Burada iki alternatif mesaj iletme tekniğini de değerlendirebilirsiniz.

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

Uzantınızın Geliştirici Araçları penceresinin açık olup olmadığını izlemesi gerekiyorsa arka plan sayfasına bir onConnect işleyicisi ekleyebilir ve Geliştirici Araçları sayfasından connect çağrısı yapabilirsiniz. Her sekmenin kendi Geliştirici Araçları penceresi açılabileceğ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ğıda gösterildiği gibi saymanız gerekir:

// 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 background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "devtools-page"
});

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

Bu Geliştirici Araçları uzantısı örneklerinin kaynağına göz atın:

Daha fazla bilgi

Uzantıların kullanabileceği standart API'ler hakkında bilgi edinmek için chrome.* API'ler ve web API'leri 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'lerini kullanan örnekleri Örnekler bölümünde bulabilirsiniz.