Opis
Za pomocą interfejsu chrome.devtools.panels
API zintegruj rozszerzenie z interfejsem okna Narzędzi dla programistów. Możesz tworzyć własne panele, uzyskiwać dostęp do dotychczasowych paneli i dodawać paski boczne.
Plik manifestu
Aby można było używać tego interfejsu API, następujące klucze muszą być zadeklarowane w pliku manifestu.
"devtools_page"
Zobacz podsumowanie interfejsów API DevTools, aby uzyskać ogólne informacje o korzystaniu z interfejsów API Narzędzi dla programistów.
Przegląd
Każdy panel rozszerzenia i każdy pasek boczny są wyświetlane jako oddzielna strona HTML. Wszystkie strony rozszerzeń wyświetlane w oknie narzędzi dla deweloperów mają dostęp do wszystkich modułów w interfejsie chrome.devtools
API oraz do interfejsu chrome.extension. Inne interfejsy API rozszerzeń nie są dostępne dla stron w oknie Narzędzi dla programistów, ale można je wywoływać, wysyłając żądanie do strony w tle rozszerzenia, podobnie jak w przypadku skryptów treści.
Metoda devtools.panels.setOpenResourceHandler
pozwala zainstalować funkcję wywołania zwrotnego, która obsługuje żądania użytkowników dotyczące otwarcia zasobu (zwykle jest to kliknięcie linku do zasobu w oknie Narzędzi dla programistów). Wywoływany jest maksymalnie jeden z zainstalowanych modułów obsługi. Użytkownicy mogą w oknie ustawień Narzędzi dla programistów określić działanie domyślne lub rozszerzenie do obsługi żądań otwarcia zasobów. Jeśli rozszerzenie wywołuje metodę setOpenResourceHandler()
wielokrotnie, zachowywany jest tylko ostatni moduł obsługi.
Przykłady
Poniższy kod dodaje panel zawarty w pliku Panel.html
, reprezentowany przez tag FontPicker.png
na pasku narzędzi Narzędzi dla programistów i oznaczony jako Selektor czcionek:
chrome.devtools.panels.create("Font Picker",
"FontPicker.png",
"Panel.html",
function(panel) { ... });
Ten kod dodaje do panelu Elements panel paska bocznego zatytułowany Sidebar.html
i zatytułowany Właściwości czcionki, a następnie ustawia jego wysokość na 8ex
:
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
}
);
Zrzut ekranu przedstawia wpływ powyższych przykładów na okno Narzędzi dla deweloperów:
Aby wypróbować ten interfejs API, zainstaluj przykładowy interfejs devtools Panels API z repozytorium chrome-extension-samples.
Typy
Button
Przycisk utworzony przez rozszerzenie.
Właściwości
-
onClicked
Zdarzenie<functionvoidvoid>
Uruchamiane po kliknięciu przycisku.
Funkcja
onClicked.addListener
wygląda tak:(callback: function) => {...}
-
wywołanie zwrotne
funkcja
Parametr
callback
wygląda tak:() => void
-
-
aktualizować
void
Aktualizuje atrybuty przycisku. Jeśli niektóre argumenty zostaną pominięte lub
null
, odpowiednie atrybuty nie zostaną zaktualizowane.Funkcja
update
wygląda tak:(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
-
iconPath
ciąg znaków opcjonalny
Ścieżka do nowej ikony przycisku.
-
tooltipText
ciąg znaków opcjonalny
Tekst wyświetlany jako etykietka, gdy użytkownik najedzie kursorem na przycisk.
-
wyłączona
wartość logiczna opcjonalna
Określa, czy przycisk jest wyłączony.
-
ElementsPanel
Reprezentuje panel Elementy.
Właściwości
-
onSelectionChanged
Zdarzenie<functionvoidvoid>
Uruchamiane po wybraniu obiektu w panelu.
Funkcja
onSelectionChanged.addListener
wygląda tak:(callback: function) => {...}
-
wywołanie zwrotne
funkcja
Parametr
callback
wygląda tak:() => void
-
-
createSidebarPane
void
Tworzy panel na pasku bocznym panelu.
Funkcja
createSidebarPane
wygląda tak:(title: string, callback?: function) => {...}
-
title
string,
Tekst wyświetlany w podpisie na pasku bocznym.
-
wywołanie zwrotne
funkcja opcjonalnie
Parametr
callback
wygląda tak:(result: ExtensionSidebarPane) => void
-
wynik
Obiekt ExtensionSidebarPane dla panelu utworzonego paska bocznego.
-
-
ExtensionPanel
Reprezentuje panel utworzony przez rozszerzenie.
Właściwości
-
onHidden
Zdarzenie<functionvoidvoid>
Uruchamiane, gdy użytkownik opuści panel.
Funkcja
onHidden.addListener
wygląda tak:(callback: function) => {...}
-
wywołanie zwrotne
funkcja
Parametr
callback
wygląda tak:() => void
-
-
onSearch
Zdarzenie<functionvoidvoid>
Wywoływane po działaniu wyszukiwania (rozpoczęciu nowego wyszukiwania, nawigacji po wynikach wyszukiwania lub anulowaniem wyszukiwania).
Funkcja
onSearch.addListener
wygląda tak:(callback: function) => {...}
-
wywołanie zwrotne
funkcja
Parametr
callback
wygląda tak:(action: string, queryString?: string) => void
-
działanie
string,
-
queryString
ciąg znaków opcjonalny
-
-
-
onShown
Zdarzenie<functionvoidvoid>
Uruchamiane, gdy użytkownik przełączy się na panel.
Funkcja
onShown.addListener
wygląda tak:(callback: function) => {...}
-
wywołanie zwrotne
funkcja
Parametr
callback
wygląda tak:(window: Window) => void
-
okno
Okno
-
-
-
createStatusBarButton
void
Dodaje przycisk do paska stanu panelu.
Funkcja
createStatusBarButton
wygląda tak:(iconPath: string, tooltipText: string, disabled: boolean) => {...}
-
iconPath
string,
Ścieżka do ikony przycisku. Plik powinien zawierać obraz o wymiarach 64 x 24 piksele złożony z dwóch ikon o wymiarach 32 x 24. Ikona po lewej stronie jest używana, gdy przycisk jest nieaktywny, a ikona po prawej stronie jest wyświetlana po naciśnięciu przycisku.
-
tooltipText
string,
Tekst wyświetlany jako etykietka, gdy użytkownik najedzie kursorem na przycisk.
-
wyłączona
boolean
Określa, czy przycisk jest wyłączony.
-
returns
-
ExtensionSidebarPane
Pasek boczny utworzony przez rozszerzenie.
Właściwości
-
onHidden
Zdarzenie<functionvoidvoid>
Uruchamiane, gdy panel paska bocznego zostanie ukryty w wyniku opuszczenia przez użytkownika panelu hostującego panel paska bocznego.
Funkcja
onHidden.addListener
wygląda tak:(callback: function) => {...}
-
wywołanie zwrotne
funkcja
Parametr
callback
wygląda tak:() => void
-
-
onShown
Zdarzenie<functionvoidvoid>
Uruchamiane, gdy panel paska bocznego staje się widoczny, gdy użytkownik przełączy się na panel, który go hostuje.
Funkcja
onShown.addListener
wygląda tak:(callback: function) => {...}
-
wywołanie zwrotne
funkcja
Parametr
callback
wygląda tak:(window: Window) => void
-
okno
Okno
-
-
-
setExpression
void
Ustawia wyrażenie, które jest oceniane na sprawdzanej stronie. Wynik zostanie wyświetlony w panelu paska bocznego.
Funkcja
setExpression
wygląda tak:(expression: string, rootTitle?: string, callback?: function) => {...}
-
wyrażenie
string,
Wyrażenie oceniane w kontekście sprawdzanej strony. Obiekty JavaScript i węzły DOM są wyświetlane w rozwijanym drzewie podobnym do konsoli/zegarka.
-
rootTitle
ciąg znaków opcjonalny
Opcjonalny tytuł rdzenia drzewa wyrażeń.
-
wywołanie zwrotne
funkcja opcjonalnie
Parametr
callback
wygląda tak:() => void
-
-
setHeight
void
Ustawia wysokość paska bocznego.
Funkcja
setHeight
wygląda tak:(height: string) => {...}
-
wysokość
string,
Specyfikacja rozmiaru podobna do CSS, np.
'100px'
lub'12ex'
.
-
-
setObject
void
Ustawia obiekt zgodny z formatem JSON do wyświetlania w panelu paska bocznego.
Funkcja
setObject
wygląda tak:(jsonObject: string, rootTitle?: string, callback?: function) => {...}
-
jsonObject
string,
Obiekt do wyświetlenia w kontekście sprawdzanej strony. Oceniane w kontekście elementu wywołującego (klient interfejsu API).
-
rootTitle
ciąg znaków opcjonalny
Opcjonalny tytuł rdzenia drzewa wyrażeń.
-
wywołanie zwrotne
funkcja opcjonalnie
Parametr
callback
wygląda tak:() => void
-
-
setPage
void
Ustawia stronę HTML, która ma być wyświetlana w panelu paska bocznego.
Funkcja
setPage
wygląda tak:(path: string) => {...}
-
ścieżka
string,
Ścieżka względna strony rozszerzenia wyświetlana na pasku bocznym.
-
SourcesPanel
Reprezentuje panel Źródła.
Właściwości
-
onSelectionChanged
Zdarzenie<functionvoidvoid>
Uruchamiane po wybraniu obiektu w panelu.
Funkcja
onSelectionChanged.addListener
wygląda tak:(callback: function) => {...}
-
wywołanie zwrotne
funkcja
Parametr
callback
wygląda tak:() => void
-
-
createSidebarPane
void
Tworzy panel na pasku bocznym panelu.
Funkcja
createSidebarPane
wygląda tak:(title: string, callback?: function) => {...}
-
title
string,
Tekst wyświetlany w podpisie na pasku bocznym.
-
wywołanie zwrotne
funkcja opcjonalnie
Parametr
callback
wygląda tak:(result: ExtensionSidebarPane) => void
-
wynik
Obiekt ExtensionSidebarPane dla panelu utworzonego paska bocznego.
-
-
Właściwości
elements
Panel Elementy.
Typ
sources
Panel Źródła.
Typ
themeName
Nazwa motywu kolorów w ustawieniach Narzędzi deweloperskich. Możliwe wartości: default
(domyślna) i dark
.
Typ
string,
Metody
create()
chrome.devtools.panels.create(
title: string,
iconPath: string,
pagePath: string,
callback?: function,
)
Tworzy panel rozszerzenia.
Parametry
-
title
string,
Tytuł wyświetlany obok ikony rozszerzenia na pasku narzędzi Narzędzi dla deweloperów.
-
iconPath
string,
Ścieżka ikony panelu względem katalogu rozszerzeń.
-
pagePath
string,
Ścieżka strony HTML panelu względem katalogu rozszerzeń.
-
wywołanie zwrotne
funkcja opcjonalnie
Parametr
callback
wygląda tak:(panel: ExtensionPanel) => void
-
panel
Obiekt ExtensionPanel reprezentujący utworzony panel.
-
openResource()
chrome.devtools.panels.openResource(
url: string,
lineNumber: number,
columnNumber?: number,
callback?: function,
)
Prosi Narzędzia deweloperskie o otworzenie adresu URL w panelu Narzędzi dla programistów.
Parametry
-
URL
string,
Adres URL zasobu do otwarcia.
-
lineNumber
Liczba
Określa numer wiersza, do którego chcesz przewinąć zasób po wczytaniu zasobu.
-
columnNumber
Liczba opcjonalnie
Chrome 114 i nowsze wersjeOkreśla numer kolumny, do której ma być przewijany zasób po wczytaniu zasobu.
-
wywołanie zwrotne
funkcja opcjonalnie
Parametr
callback
wygląda tak:() => void
setOpenResourceHandler()
chrome.devtools.panels.setOpenResourceHandler(
callback?: function,
)
Określa funkcję wywoływaną, gdy użytkownik kliknie link do zasobu w oknie Narzędzi dla programistów. Aby cofnąć ustawienie modułu obsługi, wywołaj metodę bez parametrów lub przekaż wartość null jako parametr.
Parametry
-
wywołanie zwrotne
funkcja opcjonalnie
Parametr
callback
wygląda tak:(resource: Resource) => void
-
zasób
Obiekt
devtools.inspectedWindow.Resource
zasobu, który został kliknięty.
-