Ta strona została przetłumaczona przez Cloud Translation API.

chrome.devtools.panels

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.

Plik manifestu

Aby używać tego interfejsu API, należy zadeklarować te klucze w pliku manifestu.

"devtools_page"

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.

Omówienie

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 modułów interfejsu API chrome.devtools oraz do Interfejs API chrome.extension. Interfejsy API innych rozszerzeń nie są dostępne na stronach dewelopera Narzędzia, ale można je wywołać, wysyłając żądanie na stronę rozszerzenia w tle podobnie jak w skryptach treści.

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.

Przykłady

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 powyższych przykładów na okno Narzędzia dla programistów:

Panel z ikoną rozszerzenia na pasku narzędzi Narzędzi deweloperskich

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
    
    ExtensionSidebarPane
    
    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
  Button

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
    
    ExtensionSidebarPane
    
    Obiekt ExtensionSidebarPane dla utworzonego panelu paska bocznego.

Właściwości

elements

Elementy.

Typ

ElementsPanel

sources

Panel Źródła.

Typ

SourcesPanel

themeName

Chrome w wersji 59 lub nowszej .

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
  
  ExtensionPanel
  
  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 nowszej .

Okreś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
  
  Zasób
  
  Obiekt devtools.inspectedWindow.Resource klikniętego zasobu.