Rozszerzenia w Narzędziach deweloperskich dodają funkcje do Narzędzi deweloperskich w Chrome, korzystając z odpowiednich funkcji przez stronę Narzędzia deweloperskie.
![Schemat architektury przedstawiający stronę narzędzi deweloperskich komunikującą się z
sprawdzone okno i skrypt service worker. Skrypt service worker jest widoczny
komunikacją ze skryptami treści i dostępem do interfejsów API rozszerzeń.
Strona Narzędzi deweloperskich ma dostęp do interfejsów API Narzędzi deweloperskich, na przykład służących do tworzenia paneli.](https://developer.chrome.com/static/docs/extensions/how-to/devtools/extend-devtools/image/architecture-diagram.png?authuser=9&hl=pl)
Interfejsy API rozszerzeń związane z Narzędziami deweloperskimi to między innymi:
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:
![Okno Narzędzi deweloperskich z panelem Elementy i panelem paska bocznego Style.](https://developer.chrome.com/static/docs/extensions/how-to/devtools/extend-devtools/image/devtools-window-showing-e-9051f7f0347cd.png?authuser=9&hl=pl)
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:
Utwórz w skrypcie treści metodę, która jako argument przybiera wybrany element.
function setSelectedElement(el) { // do something with the selected element }
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.