Narzędzia dla programistów Extend

Rozszerzenia w Narzędziach deweloperskich dodają funkcje do Narzędzi deweloperskich w Chrome, korzystając z odpowiednich funkcji przez stronę Narzędzia deweloperskie.

Interfejsy API rozszerzeń związane z Narzędziami deweloperskimi to między innymi:

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

Strona Narzędzia deweloperskie

Gdy otworzy się okno Narzędzia deweloperskie, rozszerzenie Narzędzia deweloperskie tworzy wystąpienie strony Narzędzia deweloperskie, istnieje, dopóki okno jest otwarte. Ta strona ma dostęp do interfejsów API Narzędzi deweloperskich oraz interfejsów API rozszerzeń i może wykonywać te czynności:

• Twórz panele i wchodź z nimi w interakcję za pomocą interfejsów API devtools.panels, m.in. dodawaj strony rozszerzeń jako panele lub paski boczne do okna Narzędzi deweloperskich.
• Uzyskaj informacje o kontrolowanym oknie i oceń w nim kod za pomocą interfejsów API devtools.inspectedWindow.
• Uzyskuj informacje o żądaniach sieciowych za pomocą interfejsów API devtools.network.
• Rozszerz panel Dyktafonu za pomocą interfejsów API devtools.recorder.
• Uzyskuj informacje o stanie rejestrowania w panelu Wydajność za pomocą interfejsów API devtools.performance.

Strona Narzędzi deweloperskich ma bezpośredni dostęp do interfejsów API rozszerzeń. Obejmuje to m.in. możliwość do komunikowania się z skryptem service worker za pomocą przekazywanie wiadomości.

Tworzenie rozszerzenia do Narzędzi deweloperskich

Aby utworzyć stronę w Narzędziach deweloperskich dla rozszerzenia, dodaj w rozszerzeniu pole devtools_page plik manifestu:

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

Pole devtools_page musi wskazywać stronę HTML. Narzędzia deweloperskie musi być lokalną, zalecamy określenie jej za pomocą względnego adresu URL.

Użytkownicy interfejsu API chrome.devtools są dostępni tylko dla stron wczytanych w Narzędziach deweloperskich okno przeglądarki, gdy jest ono otwarte. Skrypty treści i strony innych rozszerzeń nie mają dostępu dla tych interfejsów API.

Elementy interfejsu Narzędzi deweloperskich: panele i panele paska bocznego

Oprócz standardowych elementów interfejsu rozszerzeń, takich jak działania przeglądarki, menu kontekstowe i wyskakujące okienka, Elementy interfejsu można dodawać do okna Narzędzi deweloperskich za pomocą rozszerzenia Narzędzia deweloperskie:

• Panel to karta najwyższego poziomu, czyli panele Elementy, Źródła i Sieć.
• Panel paska bocznego zawiera dodatkowy interfejs związany z panelem. Style, style wynikowe Panele detektorów zdarzeń w panelu Elementy to przykłady paneli na pasku bocznym. W zależności od używanej wersji Chrome i zadokowanego okna Narzędzi deweloperskich, panele na pasku bocznym mogą wyglądają jak na tym przykładowym obrazie:

Każdy panel jest osobnym plikiem HTML, który może zawierać inne zasoby (JavaScript, CSS, obrazy itd. wł.). Aby utworzyć panel podstawowy, użyj tego kodu:

chrome.devtools.panels.create("My Panel",
    "MyPanelIcon.png",
    "Panel.html",
    function(panel) {
      // code invoked on panel creation
    }
);

Skrypt JavaScript wykonywany w panelu lub panelu na pasku bocznym daje dostęp do tych samych interfejsów API co strona Narzędzi deweloperskich.

Aby utworzyć podstawowy panel paska bocznego, użyj tego kodu:

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

Istnieje kilka sposobów wyświetlania zawartości w panelu paska bocznego:

• Treść HTML: wywołaj setPage(), aby określić stronę HTML, która ma być wyświetlana w panelu.
• Dane JSON: prześlij obiekt JSON do setObject().
• Wyrażenie JavaScript: przekaż wyrażenie do setExpression(). DevTools ocenia wyrażenie w kontekście badanej strony, a następnie wyświetla wartość zwrotną.

Zarówno w przypadku setObject(), jak i setExpression() panel wyświetla wartość, która jest widoczna w polu Konsola Narzędzi deweloperskich. setExpression() umożliwia jednak wyświetlanie elementów DOM i dowolnego JavaScriptu , a setObject() obsługuje tylko obiekty JSON.

Komunikacja między komponentami rozszerzeń

W sekcjach poniżej opisujemy kilka przydatnych sposobów zezwalania komponentom rozszerzenia Narzędzia deweloperskie na komunikować się ze sobą.

Wstaw skrypt treści

Aby wstawić skrypt treści, użyj narzędzia scripting.executeScript():

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

Identyfikator karty sprawdzanego okna możesz pobrać za pomocą inspectedWindow.tabId.

Jeśli skrypt treści został już wstrzyknięty, możesz użyć interfejsów API do przesyłania wiadomości, aby komunikować się z nim.

Oceń kod JavaScript w sprawdzanym oknie

Możesz użyć metody inspectedWindow.eval() do wykonywania JavaScriptu w kontekście badanej strony. Metodę eval() możesz wywołać ze strony w Narzędziach deweloperskich, lub panelu paska bocznego.

Domyślnie wyrażenie jest sprawdzane w kontekście głównej ramki strony. inspectedWindow.eval() używa tego samego kontekstu wykonywania skryptu i tych samych opcji co kod wpisano w konsoli Narzędzi deweloperskich, co umożliwia dostęp do narzędzi w konsoli narzędzi deweloperskich API podczas korzystania z usługi eval(). Na przykład funkcja SOAK używa go do badania elementu:

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

Możesz również ustawić useContentScriptContext na true podczas wywoływania usługi inspectedWindow.eval() na oceniać wyrażenie w tym samym kontekście co skrypty treści. Aby użyć tej opcji, przed wywołaniem funkcji eval() użyj deklaracji skryptu treści statycznych, wywołując funkcję executeScript() lub określając treść w pliku manifest.json. Po wczytaniu kontekstu skryptu kontekstowego możesz też użyć tej opcji, wstrzyknij dodatkowe skrypty treści.

Przekazywanie wybranego elementu do skryptu treści

Skrypt treści nie ma bezpośredniego dostępu do obecnie wybranego elementu. Jednak każdy kod uruchamianie za pomocą inspectedWindow.eval() ma dostęp do Narzędzi deweloperskich konsoli i interfejsach Console Utilities API. Na przykład w ocenionym kodzie możesz użyć polecenia $0, aby uzyskać dostęp do wybrany element.

Aby przekazać wybrany element do skryptu treści:

1. Utwórz w skrypcie treści metodę, która jako argument przybiera wybrany element.

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

2. Wywołaj metodę ze strony Narzędzia deweloperskie za pomocą inspectedWindow.eval() z opcją useContentScriptContext: true.

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

Opcja useContentScriptContext: true określa, że wyrażenie musi być oceniane w taki sam kontekst jak skrypty treści, więc ma dostęp do metody setSelectedElement.

Pobierz window panelu referencyjnego

Aby wywołać funkcję postMessage() z poziomu panelu narzędzi deweloperskich, musisz mieć odwołanie do jej obiektu window. Zdobądź w oknie iframe panelu z modułu obsługi zdarzeń panel.onShown:

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

Wysyłaj wiadomości z wstrzykniętych skryptów na stronę Narzędzia deweloperskie

Kod wstrzykiwany bezpośrednio na stronie bez skryptu treści, m.in. przez dołączenie parametru <script> tag lub wywołanie inspectedWindow.eval(), nie będzie można wysyłać wiadomości do Strona Narzędzia deweloperskie w narzędziu runtime.sendMessage(). Zamiast tego zalecamy łączący wstawiony skrypt ze skryptem treści, który może pełnić funkcję pośrednika. Użycie metodę window.postMessage(). Ten przykład korzysta ze skryptu działającego w tle z poprzedniej sekcji:

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

Inne alternatywne techniki przekazywania wiadomości znajdziesz na stronie GitHub.

Wykrywanie otwierania i zamykania Narzędzi deweloperskich

Aby sprawdzić, czy okno Narzędzi deweloperskich jest otwarte, dodaj detektor onConnect do skryptu service worker i wywołaj connect() ze strony Narzędzi deweloperskich. Ponieważ każda karta może mieć otwarte własne okno Narzędzi deweloperskich, możesz otrzymać kilka zdarzeń połączenia. Aby sprawdzić, czy otwarte jest dowolne okno Narzędzi deweloperskich, policz zdarzenia łączenia i rozłączania się zgodnie z wyświetlanymi instrukcjami w tym przykładzie:

// 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.");
          }
      });
    }
});

Strona Narzędzia deweloperskie tworzy takie połączenie:

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

Przykłady rozszerzeń do Narzędzi deweloperskich

Przykłady na tej stronie pochodzą z tych stron:

• Rozszerzenie Polymer Devtools – do wysyłania zapytań używa wielu pomocników działających na stronie hosta Stan DOM/JS, który ma zostać odesłany do panelu niestandardowego.
• Rozszerzenie React DevTools – używa modułu podrzędnego mechanizmu renderowania, by ponownie używać interfejsu DevNarzędzia.
• Ember Inspector – udostępniany rdzeń rozszerzenia z adapterami do Chrome i Firefoksa.
• Coquette-inspect – czyste rozszerzenie oparte na React i wstrzykiwany agent debugowania na stronę hostującą.
• Przykładowe rozszerzenia zawierają więcej wartościowych rozszerzeń, które warto zainstalować, wypróbować i poznać. .

Więcej informacji

Informacje na temat standardowych interfejsów API, z których mogą korzystać rozszerzenia, znajdziesz w sekcji chrome*. Interfejsy API i sieć Interfejsy API.

Prześlij nam opinię Twoje uwagi i sugestie pomogą nam ulepszyć interfejsy API.

Przykłady

Przykłady użycia interfejsów API Narzędzi deweloperskich znajdziesz w przykładach.