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ı aracılığıyla Geliştirici Araçları'na özel uzantı API'lerine erişerek Chrome Geliştirici Araçları'na özellikler ekler.

Geliştirici Araçları sayfasının, incelenen pencere ve hizmet çalışanı ile iletişim kurduğunu gösteren mimari şema. Hizmet çalışanı'nın içerik komut dosyalarıyla iletişim kurduğu ve uzantı API'lerine eriştiği gösterilir. Geliştirici Araçları sayfası, Geliştirici Araçları API'lerine (ör. panel oluşturma) erişebilir.
Geliştirici Araçları uzantı mimarisi.

DevTools'a özel uzantı API'leri şunları içerir:

Geliştirici Araçları sayfası

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

Geliştirici Araçları sayfası, uzantı API'lerine doğrudan erişebilir. Bu, mesaj iletme özelliğini kullanarak hizmet çalışanıyla iletişim kurabilmeyi içerir.

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

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

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

devtools_page alanı bir HTML sayfasına yönlendirmelidir. DevTools sayfası uzantınızda yerel olmalıdır. Bu nedenle, göreli bir URL kullanarak belirtmenizi öneririz.

chrome.devtools API'sinin üyeleri yalnızca Geliştirici Araçları penceresi açıkken bu pencerede yüklenen sayfalarda kullanılabilir. İçerik komut dosyaları ve diğer uzantı sayfaları bu API'lere erişemez.

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

Tarayıcı işlemleri, bağlam menüleri ve pop-up'lar gibi normal uzantı kullanıcı arayüzü öğelerine ek olarak, bir DevTools uzantısı DevTools penceresine kullanıcı arayüzü öğeleri ekleyebilir:

  • Panel, Elements, Sources ve Network 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 panoları, kenar çubuğu panolarına ö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 panelleriniz aşağıdaki örnek resimdeki gibi görünebilir:
Nesneler paneli ve Stiller kenar çubuğu bölmesini gösteren Geliştirici Araçları penceresi.
Öğeler paneli ve Stiller kenar çubuğu bölmesini gösteren Geliştirici Araçları penceresi.

Her panel kendi HTML dosyasıdır ve diğer kaynakları (JavaScript, CSS, resimler vb.) içerebilir. Temel bir 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'lere 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" });
});

İçeriği kenar çubuğu bölmesinde göstermenin çeşitli yolları vardır:

  • HTML içeriği: Bölmede görüntülenecek bir HTML sayfası belirtmek için setPage() işlevini çağırın.
  • JSON verileri: setObject() işlevine bir JSON nesnesi iletin.
  • JavaScript ifadesi: setExpression() öğesine bir ifade iletin. DevTools, ifadeyi incelenen sayfanın bağlamında değerlendirir ve döndürülen değeri gösterir.

Her ikisi için de (setObject() ve setExpression()) bölmede değer, DevTools konsolunda görüneceği şekilde gösterilir. Ancak setExpression(), DOM öğelerini ve rastgele JavaScript nesnelerini görüntülemenize olanak tanırken 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 kurmasına izin vermenin bazı faydalı yolları açıklanmaktadır.

İçerik komut dosyası ekleme

İçerik komut dosyası yerleştirmek için scripting.executeScript() kullanın:

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

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

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

İncelenen pencerede JavaScript'i değerlendirme

İncelenen sayfa bağlamında JavaScript kodu 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.

Varsayılan olarak ifade, sayfanın ana çerçevesi bağlamında değerlendirilir. inspectedWindow.eval(), Geliştirici Araçları konsoluna girilen kodla aynı komut dosyası yürütme bağlamını ve seçeneklerini kullanır. Bu sayede, eval() kullanılırken Geliştirici Araçları Console Utilities API özelliklerine erişilebilir. Örneğin, HTML belgesinin <head> bölümündeki ilk komut dosyası öğesini incelemek için bu aracı kullanın:

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

Ayrıca, içerik komut dosyalarıyla aynı bağlamda ifadeyi değerlendirmek için useContentScriptContext değerini inspectedWindow.eval() çağrılırken true olarak da ayarlayabilirsiniz. Bu seçeneği kullanmak için eval() işlevi çağrılmadan önce executeScript() işlevi çağrılarak veya manifest.json dosyasında bir içerik komut dosyası belirtilerek statik içerik komut dosyası bildirimi kullanın. İçerik komut dosyası bağlamı yüklendikten sonra, ek içerik komut dosyaları yerleştirmek için de bu seçeneği kullanabilirsiniz.

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

İçerik komut dosyası, şu anda seçili öğeye doğrudan erişemiyor. Ancak 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çili öğeye erişmek için $0 kullanabilirsiniz.

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

  1. İç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
}

  2. useContentScriptContext: true seçeneğiyle inspectedWindow.eval() kullanarak yöntemi Geliştirici Araçları sayfasından çağırın.

    chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });

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

Referans panelinin window

Bir geliştirici araçları panelinden postMessage() işlevini ç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ştirilmiş komut dosyalarından Geliştirici Araçları sayfasına mesaj gönderme

<script> etiketi ekleme veya inspectedWindow.eval() çağrısı yapma gibi yöntemlerle doğrudan sayfaya yerleştirilen kod, runtime.sendMessage() kullanarak DevTools sayfasına mesaj gönderemez. Bunun yerine, yerleştirilen komut dosyanızı aracı olarak hareket edebilecek bir içerik komut dosyasıyla birleştirmenizi ve window.postMessage() yöntemini kullanmanızı öneririz. Aşağıdaki örnekte, önceki bölümdeki arka plan komut dosyası kullanılmıştı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 tekniklerini GitHub'da bulabilirsiniz.

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

Geliştirici Araçları penceresinin açık olup olmadığını izlemek için hizmet çalışanına bir onConnect dinleyicisi ekleyin ve Geliştirici Araçları sayfasından connect() işlevini çağırın. Her sekmede kendi geliştirici araçları penceresi açık olabileceğinden birden fazla bağlantı etkinliği alabilirsiniz. Herhangi bir DevTools penceresinin açık olup olmadığını izlemek için aşağıdaki örnekte gösterildiği gibi bağlantı ve bağlantı kesme olaylarını 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ı şu şekilde 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 Uzantısı: DOM/JS durumunu sorgulamak ve özel panele geri göndermek için ana makine sayfasında çalışan birçok yardımcıyı kullanır.
  • React Geliştirici Araçları Uzantısı: Geliştirici Araçları kullanıcı arayüzü bileşenlerini yeniden kullanmak için oluşturucunun bir alt modülünü kullanır.
  • Ember Inspector: Hem Chrome hem de Firefox için bağdaştırıcılarla paylaşılan uzantı çekirdeği.
  • Coquette-inspect: Ana makine sayfasına hata ayıklama aracısı yerleştirilmiş, React tabanlı temiz bir uzantıdır.
  • Örnek Uzantılar'da yükleyip deneyebileceğiniz ve öğrenebileceğiniz daha fazla faydalı uzantı bulunur.

Daha fazla bilgi

Uzantıların kullanabileceği standart API'ler hakkında bilgi edinmek için chrome.* başlıklı makaleyi inceleyin. API'ler ve web API'leri.

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

Örnekler

Geliştirici Araçları API'lerini kullanan örnekleri Örnekler bölümünde bulabilirsiniz.