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

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ı'na özel uzantı API'leri şunlardır:

• devtools.inspectedWindow
• devtools.network
• devtools.panels
• devtools.recorder
• devtools.performance

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 kullanarak 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:

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() işlevini 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:

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. inspectedWindow.eval() kullanarak Geliştirici Araçları sayfasındaki yöntemi çağırın useContentScriptContext: 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> ekleme 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.