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, incelenen sayfayla etkileşim kurabilir, ağ istekleri hakkında bilgi edinebilir ve daha fazlasını yapabilir. Öne çıkan DevTools uzantılarını görüntüleyin. Geliştirici Araçları uzantıları, Geliştirici Araçları'na özgü ek bir uzantı API'si grubuna erişebilir:

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

Geliştirici Araçları sayfasının arka plan sayfasını kontrol edin. Arka plan sayfası, içerik komut dosyalarıyla iletişim kurarken ve uzantı API'lerine erişirken gösterilir. 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ı

Her DevTools penceresi açıldığında uzantının DevTools sayfasının bir örneği oluşturulur. İlgili içeriği oluşturmak için kullanılan Geliştirici Araçları sayfası, Geliştirici Araçları penceresinin ömrü boyunca mevcuttur. Geliştirme Araçları sayfası, Geliştirme Araçları API'lerine ve sınırlı sayıda uzantı API'sine erişebilir. Geliştirici Araçları sayfasında özellikle şunlar yapılabilir:

  • devtools.panels API'lerini kullanarak paneller oluşturun ve panellerle etkileşimde bulunun.
  • devtools.inspectedWindow API'lerini kullanarak incelenen pencere hakkında bilgi edinin ve incelenen penceredeki 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. Aynı alt kümeye erişimi var bir içerik komut dosyasının erişebildiği extension ve runtime API'lerinin sayısı. Bir içerik komut dosyası gibi, Geliştirici Araçları sayfası da Mesaj İletimi'ni kullanarak arka plan sayfasıyla iletişim kurabilir. Örneğin, örnek için İçerik Komut Dosyası Yerleştirme konusuna bakın.

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

Uzantınıza yönelik bir DevTools sayfası oluşturmak için uzantı manifest dosyasına devtools_page alanını ekleyin:

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

Uzantınızın manifest dosyasında belirtilen devtools_page örneği şunun için oluşturulur: Geliştirici Araçları penceresi açıldı. Sayfa, başka uzantı sayfalarını paneller ve kenar çubukları olarak devtools.panels API'yi kullanan Geliştirici Araçları penceresi

chrome.devtools.* API modülleri yalnızca DevTools 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ı zaman aralığı boyunca kullanılabilir.

Hâlâ deneysel olan bazı DevTools API'leri de vardır. chrome.experimental.* API'leri inceleyin.

Geliştirici Araçları kullanıcı arayüzü öğeleri: paneller ve kenar çubuğu bölmeleri

DevTools uzantıları, tarayıcı işlemleri, bağlam menüleri ve pop-up'lar gibi normal uzantı kullanıcı arayüzü öğelerine ek olarak DevTools penceresine kullanıcı arayüzü öğeleri de 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. Öğeler panelindeki Stiller, Hesaplanan Stiller ve Etkinlik Dinleyicileri bölmeleri, kenar çubuğu bölmelerine örnek gösterilebilir. ( Kenar çubuğu bölmelerinin görünümü, kullandığınız Chrome sürümüne bağlı olarak görselle eşleşmeyebilir geliştirici araçları penceresinin bulunduğu yere bakın.)

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

Her panel kendi HTML dosyasıdır ve bu dosya, diğer kaynakları (JavaScript, CSS, resimler vb.) açık). Temel bir panel oluşturma işlemi aşağıdaki gibi görünür:

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 çalıştırılan JavaScript, DevTools sayfasıyla aynı API'lere erişebilir.

Öğeler paneli için temel kenar çubuğu bölmesi şu şekilde görünür:

chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
    function(sidebar) {
        // sidebar initialization code here
        sidebar.setObject({ some_data: "Some data to show" });
});

İçeriği kenar çubuğu bölmesinde göstermenin birkaç yolu vardır:

  • HTML içeriği. Panelde gösterilecek bir HTML sayfası belirtmek için setPage işlevini çağırın.
  • JSON verileri. setObject öğesine bir JSON nesnesi iletin.
  • JavaScript ifadesi. setExpression'a bir ifade gönderin. DevTools, ifadeyi incelenen sayfa bağlamında değerlendirir ve döndürülen değeri gösterir.

Hem setObject hem de setExpression için bölme, değeri Geliştirici Araçları konsolu. Ancak setExpression, DOM öğelerini ve rastgele JavaScript nesnelerini görüntülemenize olanak tanır. setObject ise yalnızca JSON nesnelerini destekler.

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

Aşağıdaki bölümlerde farklı paydaşların arasındaki iletişimde kullanılan bazı tipik bileşenlerine göz atalım.

İçerik komut dosyası yerleştirme

Geliştirici Araçları sayfası, tabs.executeScript öğesini doğrudan çağıramaz. Geliştirici Araçları sayfasında, incelenen pencere sekmesinin kimliğini inspectedWindow.tabId özelliğini kullanıp arka plan sayfasına bir mesaj gönderin. Arka plan sayfasından komut dosyasını yerleştirmek için tabs.executeScript işlevini çağırın.

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);
    });
});

İncelenen pencerede JavaScript'i değerlendirme

inspectedWindow.eval yöntemini kullanarak JavaScript kodunu incelenmiş sayfa. eval yöntemini bir 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 öğe inceleme (inspect(elem)), işlevlerde durma (debug(fn)), panoya kopyalama (copy()) ve daha fazlası gibi DevTools komut satırı API özelliklerini biliyor olabilirsiniz. inspectedWindow.eval(), DevTools konsolunda yazılan kodla aynı komut dosyası yürütme bağlamını ve seçeneklerini kullanır. Bu, eval içinde bu API'lere erişmenize olanak tanır. Örneğin, SOAK bir öğeyi incelemek için bu özelliği kullanır:

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

Alternatif olarak, inspectedWindow.eval() için useContentScriptContext: true seçeneğini kullanarak İfadeyi, içerik komut dosyalarıyla aynı bağlamda değerlendirin. useContentScriptContext: true ile eval çağrıldığında içerik komut dosyası bağlamı oluşturulmaz. Bu nedenle, eval çağrılmadan önce executeScript çağrılarak veya manifest.json dosyasında bir içerik komut dosyası belirtilerek bir bağlam komut dosyası yüklemeniz gerekir.

Bağlam komut dosyası oluşturulduktan sonra bu seçeneği kullanarak ek içerik komut dosyaları ekleyebilirsiniz.

eval yöntemi, doğru bağlamda kullanıldığında güçlü, uygunsuz şekilde kullanıldığında 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 başlıklı makaleyi inceleyin.

Seçili öğeyi bir içerik komut dosyasına iletme

İçerik komut dosyasının, seçili geçerli öğeye doğrudan erişimi yok. Ancak inspectedWindow.eval kullanarak yürüttüğünüz tüm kodlar, Geliştirici Araçları Konsolu'na ve komut satırı API'lerine erişebilir. Örneğin, değerlendirilen kodda seçili öğeye erişmek için $0 kullanabilirsiniz.

Seçilen öğeyi bir içerik komut dosyasına iletmek için:

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

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

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

Geliştirici Araçları sayfasından yöntemi ş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 panelinin window değerini alma

Geliştirici Araçları panelinden postMessage işlemi yapmak için window nesnesine referans vermeniz gerekir. panel.onShown etkinlik işleyicisinden bir 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 gönderilen mesajlar

Geliştirici Araçları sayfası ile içerik komut dosyaları arasındaki mesajlar, arka plan sayfasından dolaylı olarak gerçekleşir.

Bir içerik komut dosyasına ileti gönderirken arka plan sayfası tabs.sendMessage yöntemini kullanıyorsanız, iletiyi belirli bir sekmedeki içerik komut dosyalarına yönlendirir, (İçerik Komut Dosyası Yerleştirme bölümünde gösterildiği gibi) seçin.

Bir içerik komut dosyasından gönderilen mesajlar, geçerli sekmeyle ilişkili doğru DevTools sayfası örneğine hazır bir yöntemle iletilemez. Geçici bir çözüm olarak, DevTools sayfasının arka plan sayfasıyla uzun süreli bir bağlantı kurmasını ve arka plan sayfasının her mesajı doğru bağlantıya yönlendirebilmesi için bağlantılara ait sekme kimliklerinin bir haritasını tutmasını sağlayabilirsiniz.

// 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 gönderilen mesajlar

Yukarıdaki çözüm içerik komut dosyalarında işe yarar. Ancak doğrudan sayfaya yerleştirilen kod (ör. bir <script> etiketi ekleyerek veya inspectedWindow.eval aracılığıyla) farklı bir strateji. Bu bağlamda, runtime.sendMessage iletileri arka plan komut dosyasını beklendiği gibi yükleyin.

Geçici bir çözüm olarak, yerleştirilen komut dosyanızı üçüncü taraf bir platformdur. Mesajları içerik komut dosyasına iletmek için window.postMessage kullanabilirsiniz API'ye gidin. Aşağıda, önceki bölümdeki arka plan komut dosyasının kullanıldığı 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 artık enjekte edilen komut dosyasından içerik komut dosyasına, arka plan komut dosyasına ve son olarak DevTools sayfasına aktarılır.

Burada iki alternatif mesaj aktarma tekniğini de inceleyebilirsiniz.

DevTools'un ne zaman açıldığını ve kapandığını algılama

Uzantınızın, Geliştirici Araçları penceresinin açık olup olmadığını izlemesi gerekiyorsa bir onConnect ekleyebilirsiniz dinleyicinize ekleyebilir ve Geliştirici Araçları sayfasından connect yöntemini çağırabilirsiniz. Her sekme Geliştirici Araçları penceresi açıksa birden fazla bağlantı etkinliği alabilirsiniz. Herhangi bir Geliştirici Araçları penceresi açık. Bağlantı ve bağlantı 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ı aşağıdaki gibi bir bağlantı oluşturur:

// devtools.js

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

DevTools uzantısı örnekleri

Aşağıdaki 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'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'lerini kullanan örnekleri Örnekler bölümünde bulabilirsiniz.