Opis
Interfejs API chrome.devtools.panels
pozwala zintegrować rozszerzenie z interfejsem okna Narzędzia dla programistów i tworzyć własne panele, uzyskiwać dostęp do dotychczasowych paneli i dodawać paski boczne.
Każdy panel rozszerzenia i pasek boczny są wyświetlane jako osobna strona HTML. Wyświetlono wszystkie strony rozszerzeń
w oknie Narzędzia dla programistów mają dostęp do wszystkich części interfejsu API chrome.devtools
oraz do wszystkich
interfejsów API innych rozszerzeń.
Aby zainstalować funkcję wywołania zwrotnego, możesz użyć metody devtools.panels.setOpenResourceHandler
który obsługuje żądania otwarcia zasobu (zwykle kliknięcie linku do zasobu w
w oknie Narzędzia dla deweloperów). Wywoływane jest co najwyżej jeden z zainstalowanych modułów obsługi. mogą określić użytkownicy (przy użyciu
okno ustawień Narzędzi dla programistów) to domyślne zachowanie lub rozszerzenie do obsługi zasobu.
otwartych żądań. Jeśli rozszerzenie wywołuje setOpenResourceHandler()
wiele razy, tylko ostatnie
zachowywany.
Zapoznaj się z podsumowaniem interfejsów API Narzędzi deweloperskich, aby uzyskać ogólne wprowadzenie do korzystania z interfejsów API narzędzi dla programistów.
Plik manifestu
Przykład
Ten kod dodaje panel znajdujący się w elemencie Panel.html
, który jest reprezentowany przez FontPicker.png
na
Pasek narzędzi narzędzi dla programistów z etykietą Selektor czcionek:
chrome.devtools.panels.create("Font Picker",
"FontPicker.png",
"Panel.html",
function(panel) { ... });
Ten kod dodaje panel paska bocznego zawarty w Sidebar.html
i zatytułowany Właściwości czcionki do
panelu Elementy, 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 pokazuje wpływ tego przykładu na okno Narzędzia dla programistów:
![Panel z ikoną rozszerzenia na pasku narzędzi Narzędzi deweloperskich](https://developer.chrome.google.cn/static/docs/extensions/reference/api/devtools/panels/images/devtools-panels.png?authuser=6&hl=pl)
Aby wypróbować ten interfejs API, zainstaluj przykładowy interfejs API devtools panels ze strony chrome-extension-samples. z repozytorium.
Typy
Button
Przycisk utworzony przez rozszerzenie.
Właściwości
-
onClicked
Zdarzenie<functionvoid>
Uruchamiane po kliknięciu przycisku.
Funkcja
onClicked.addListener
wygląda tak:(callback: function) => {...}
.-
wywołanie zwrotne
funkcja
Parametr
callback
wygląda tak:() => void
.
-
-
update
nieważne
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łączone
Wartość logiczna opcjonalna
Określa, czy przycisk jest wyłączony.
-
ElementsPanel
Reprezentuje panel Elementy.
Właściwości
-
onSelectionChanged
Zdarzenie<functionvoid>
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
nieważne
Tworzy panel na pasku bocznym panelu.
Funkcja
createSidebarPane
wygląda tak:(title: string, callback?: function) => {...}
.-
tytuł
ciąg znaków
Tekst wyświetlany w podpisie na pasku bocznym.
-
wywołanie zwrotne
funkcja optional
Parametr
callback
wygląda tak:(result: ExtensionSidebarPane) => void
.-
wynik
Obiekt ExtensionSidebarPane dla utworzonego panelu paska bocznego.
-
-
ExtensionPanel
Reprezentuje panel utworzony przez rozszerzenie.
Właściwości
-
onHidden
Zdarzenie<functionvoid>
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<functionvoid>
wywołane po działaniu związanym z wyszukiwaniem (rozpoczęciem nowego wyszukiwania, nawigacją w 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
ciąg znaków
-
queryString
ciąg znaków opcjonalny
-
-
-
onShown
Zdarzenie<functionvoid>
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
nieważne
Dodaje przycisk do paska stanu panelu.
Funkcja
createStatusBarButton
wygląda tak:(iconPath: string, tooltipText: string, disabled: boolean) => {...}
.-
iconPath
ciąg znaków
Ścieżka ikony przycisku. Plik powinien zawierać obraz o wymiarach 64 x 24 piksele, składający się z dwóch ikon o wymiarach 32 x 24. Ikona po lewej stronie jest wyświetlana, gdy przycisk jest nieaktywny. po naciśnięciu przycisku wyświetla się ikona z prawej strony.
-
tooltipText
ciąg znaków
Tekst wyświetlany jako etykietka, gdy użytkownik najedzie kursorem na przycisk.
-
wyłączone
wartość logiczna
Określa, czy przycisk jest wyłączony.
-
returns
-
ExtensionSidebarPane
Pasek boczny utworzony przez rozszerzenie.
Właściwości
-
onHidden
Zdarzenie<functionvoid>
Uruchamiane, gdy panel paska bocznego staje się ukryty w wyniku przełączenia się przez użytkownika z panelu, który go obsługuje.
Funkcja
onHidden.addListener
wygląda tak:(callback: function) => {...}
.-
wywołanie zwrotne
funkcja
Parametr
callback
wygląda tak:() => void
.
-
-
onShown
Zdarzenie<functionvoid>
Uruchamiane, gdy panel paska bocznego staje się widoczny w wyniku przełączenia użytkownika 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
nieważne
Ustawia wyrażenie 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
ciąg znaków
Wyrażenie do oceny w kontekście badanej 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 optional
Parametr
callback
wygląda tak:() => void
.
-
-
setHeight
nieważne
Ustawia wysokość paska bocznego.
Funkcja
setHeight
wygląda tak:(height: string) => {...}
.-
wysokość
ciąg znaków
Specyfikacja rozmiaru przypominająca kod CSS, np.
'100px'
lub'12ex'
.
-
-
setObject
nieważne
Ustawia obiekt zgodny z JSON, który ma być wyświetlany w panelu paska bocznego.
Funkcja
setObject
wygląda tak:(jsonObject: string, rootTitle?: string, callback?: function) => {...}
.-
jsonObject
ciąg znaków
Obiekt do wyświetlenia w kontekście sprawdzanej strony. Oceniana w kontekście elementu wywołującego (klienta interfejsu API).
-
rootTitle
ciąg znaków opcjonalny
Opcjonalny tytuł rdzenia drzewa wyrażeń.
-
wywołanie zwrotne
funkcja optional
Parametr
callback
wygląda tak:() => void
.
-
-
setPage
nieważne
Ustawia stronę HTML, która ma być wyświetlana w panelu paska bocznego.
Funkcja
setPage
wygląda tak:(path: string) => {...}
.-
ścieżka
ciąg znaków
Względna ścieżka strony rozszerzenia wyświetlana na pasku bocznym.
-
SourcesPanel
Reprezentuje panel Źródła.
Właściwości
-
onSelectionChanged
Zdarzenie<functionvoid>
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
nieważne
Tworzy panel na pasku bocznym panelu.
Funkcja
createSidebarPane
wygląda tak:(title: string, callback?: function) => {...}
.-
tytuł
ciąg znaków
Tekst wyświetlany w podpisie na pasku bocznym.
-
wywołanie zwrotne
funkcja optional
Parametr
callback
wygląda tak:(result: ExtensionSidebarPane) => void
.-
wynik
Obiekt ExtensionSidebarPane dla utworzonego panelu paska bocznego.
-
-
Właściwości
elements
Elementy.
Typ
sources
Panel Źródła.
Typ
themeName
Nazwa motywu kolorystycznego ustawionego w ustawieniach Narzędzi deweloperskich użytkownika. Możliwe wartości: default
(domyślna) i dark
.
Typ
ciąg znaków
Metody
create()
chrome.devtools.panels.create(
title: string,
iconPath: string,
pagePath: string,
callback?: function,
)
Tworzy panel rozszerzenia.
Parametry
-
tytuł
ciąg znaków
Tytuł wyświetlany obok ikony rozszerzenia na pasku narzędzi Narzędzi dla programistów.
-
iconPath
ciąg znaków
Ścieżka ikony panelu względem katalogu rozszerzenia.
-
pagePath
ciąg znaków
Ścieżka strony HTML panelu względem katalogu rozszerzenia.
-
wywołanie zwrotne
funkcja optional
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,
)
Pyta Narzędzia deweloperskie o otwarcie adresu URL w panelu Narzędzi dla programistów.
Parametry
-
URL
ciąg znaków
Adres URL zasobu do otworzenia.
-
lineNumber
liczba
Określa numer wiersza, do którego należy przewinąć zasób po wczytaniu zasobu.
-
columnNumber
liczba opcjonalnie
Chrome w wersji 114 lub nowszejOkreśla numer kolumny, do której można przewinąć stronę po wczytaniu zasobu.
-
wywołanie zwrotne
funkcja optional
Parametr
callback
wygląda tak:() => void
.
setOpenResourceHandler()
chrome.devtools.panels.setOpenResourceHandler(
callback?: function,
)
Określa funkcję, która ma być wywoływana, gdy użytkownik kliknie link do zasobu w oknie Narzędzia dla programistów. Aby cofnąć ustawienie modułu obsługi, wywołaj metodę bez parametrów lub przekaż jako parametr wartość null.
Parametry
-
wywołanie zwrotne
funkcja optional
Parametr
callback
wygląda tak:(resource: Resource) => void
.-
zasób
Obiekt
devtools.inspectedWindow.Resource
klikniętego zasobu.
-