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

chrome.devtools.panels

Opis

Aby zintegrować rozszerzenie z interfejsem okna narzędzi dla programistów, użyj interfejsu API chrome.devtools.panels: twórz własne panele, uzyskaj dostęp do istniejących paneli i dodaj paski boczne.

Każdy panel rozszerzenia i pasek boczny jest wyświetlany jako osobna strona HTML. Wszystkie strony rozszerzeń wyświetlane w oknie narzędzi dla programistów mają dostęp do wszystkich części interfejsu API chrome.devtools oraz do wszystkich innych interfejsów API rozszerzeń.

Za pomocą metody devtools.panels.setOpenResourceHandler możesz zainstalować funkcję wywołania zwrotnego, która obsługuje żądania użytkowników dotyczące otwierania zasobu (zazwyczaj kliknięcie linku do zasobu w oknie Narzędzia dla programistów). W najgorszym razie wywoływany jest jeden z zainstalowanych modułów obsługi. Użytkownicy mogą określić (za pomocą okna ustawień narzędzi dla deweloperów) zachowanie domyślne lub rozszerzenie do obsługi żądań otwierania zasobów. Jeśli rozszerzenie wywołuje funkcję setOpenResourceHandler() kilka razy, zachowany zostanie tylko ostatni przekaźnik.

Ogólne informacje o używaniu interfejsów API Narzędzi dla programistów znajdziesz w artykule Podsumowanie interfejsów API Narzędzi dla programistów.

Plik manifestu

Aby korzystać z tego interfejsu API, musisz zadeklarować te klucze w pliku manifestu.

"devtools_page"

Przykład

Podany niżej kod dodaje panel zawarty w Panel.html, reprezentowany przez FontPicker.png na pasku narzędzi Narzędzia dla programistów i oznaczony jako Wybór czcionki:

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

Poniższy kod dodaje do panelu Elementy panel boczny zawarty w Sidebar.html o nazwie Właściwości czcionki, a potem ustawia jego wysokość na 8ex:

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

Zrzut ekranu pokazujący efekt działania tego przykładu w oknie Narzędzia dla deweloperów:

Panel ikony rozszerzenia na pasku narzędzi Narzędzi deweloperskich

Aby wypróbować ten interfejs API, zainstaluj przykład interfejsu 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 ma postać:
```
(callback: function) => {...}
```
- wywołanie zwrotne
  
  funkcja
  
  Parametr callback ma postać:
```
() => void
```
update

nieważne

Zaktualizuje atrybuty przycisku. Jeśli niektóre argumenty zostaną pominięte lub zastąpione wartością null, odpowiednie atrybuty nie zostaną zaktualizowane.

Funkcja update ma postać:
```
(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 etykieta, gdy użytkownik najedzie kursorem na przycisk.
- wyłączone
  
  logiczna opcjonalna
  
  Określa, czy przycisk jest wyłączony.

ElementsPanel

Reprezentuje panel Elementy.

Właściwości

onSelectionChanged

Zdarzenie<functionvoidvoid>

Wywoływane po wybraniu obiektu w panelu.

Funkcja onSelectionChanged.addListener ma postać:
```
(callback: function) => {...}
```
- wywołanie zwrotne
  
  funkcja
  
  Parametr callback ma postać:
```
() => void
```
createSidebarPane

nieważne

Tworzy panel na pasku bocznym panelu.

Funkcja createSidebarPane ma postać:
```
(title: string, callback?: function) => {...}
```
- tytuł
  
  ciąg znaków
  
  Tekst wyświetlany w nagłówku na pasku bocznym.
- wywołanie zwrotne
  
  function opcjonalny
  
  Parametr callback ma postać:
```
(result: ExtensionSidebarPane) => void
```
  - wynik
    
    ExtensionSidebarPane
    
    Obiekt ExtensionSidebarPane dla utworzonego panelu bocznego.

ExtensionPanel

Reprezentuje panel utworzony przez rozszerzenie.

Właściwości

onHidden

Zdarzenie<functionvoidvoid>

Uruchamiane, gdy użytkownik przełączy się z panelu.

Funkcja onHidden.addListener ma postać:
```
(callback: function) => {...}
```
- wywołanie zwrotne
  
  funkcja
  
  Parametr callback ma postać:
```
() => void
```
onSearch

Zdarzenie<functionvoidvoid>

Wyzwalany po wykonaniu działania związanego z wyszukiwaniem (rozpoczęcie nowego wyszukiwania, nawigacja po wynikach wyszukiwania lub anulowanie wyszukiwania).

Funkcja onSearch.addListener ma postać:
```
(callback: function) => {...}
```
- wywołanie zwrotne
  
  funkcja
  
  Parametr callback ma postać:
```
(action: string, queryString?: string) => void
```
  - działanie
    
    ciąg znaków
  - queryString
    
    ciąg znaków opcjonalny
onShown

Zdarzenie<functionvoidvoid>

Wywoływane, gdy użytkownik przełączy się na panel.

Funkcja onShown.addListener ma postać:
```
(callback: function) => {...}
```
- wywołanie zwrotne
  
  funkcja
  
  Parametr callback ma postać:
```
(window: Window) => void
```
  - okno
    
    Okno
createStatusBarButton

nieważne

Dodaje przycisk do paska stanu panelu.

Funkcja createStatusBarButton ma postać:
```
(iconPath: string, tooltipText: string, disabled: boolean) => {...}
```
- iconPath
  
  ciąg znaków
  
  Ścieżka do ikony przycisku. Plik powinien zawierać obraz o wymiarach 64 x 24 piksele, który składa się z 2 ikon o wymiarach 32 x 24 piksele. Ikona po lewej stronie jest używana, gdy przycisk jest nieaktywny. Ikona po prawej stronie wyświetla się, gdy przycisk jest wciśnięty.
- tooltipText
  
  ciąg znaków
  
  Tekst wyświetlany jako etykieta, 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<functionvoidvoid>

Wywoływane, gdy panel boczny staje się ukryty w wyniku przełączenia użytkownika z panelu, który go zawiera.

Funkcja onHidden.addListener ma postać:
```
(callback: function) => {...}
```
- wywołanie zwrotne
  
  funkcja
  
  Parametr callback ma postać:
```
() => void
```
onShown

Zdarzenie<functionvoidvoid>

Wywoływane, gdy panel boczny staje się widoczny w wyniku przełączenia przez użytkownika panelu, w którym się on znajduje.

Funkcja onShown.addListener ma postać:
```
(callback: function) => {...}
```
- wywołanie zwrotne
  
  funkcja
  
  Parametr callback ma postać:
```
(window: Window) => void
```
  - okno
    
    Okno
setExpression

nieważne

Ustawia wyrażenie, które jest oceniane na stronie zweryfikowanej. Wynik zostanie wyświetlony w panelu bocznym.

Funkcja setExpression ma postać:
```
(expression: string, rootTitle?: string, callback?: function) => {...}
```
- wyrażenie
  
  ciąg znaków
  
  Wyrażenie do oceny w kontekście sprawdzanej strony. Obiekty JavaScript i węzły DOM są wyświetlane w rozwijanym drzewie, podobnie jak w konsoli lub w obserwacji.
- rootTitle
  
  ciąg znaków opcjonalny
  
  Opcjonalny tytuł elementu noszącego nazwę „root” (element 0. poziomu) w drzewie wyrażenia.
- wywołanie zwrotne
  
  function opcjonalny
  
  Parametr callback ma postać:
```
() => void
```
setHeight

nieważne

Ustawia wysokość paska bocznego.

Funkcja setHeight ma postać:
```
(height: string) => {...}
```
- wysokość
  
  ciąg znaków
  
  Specyfikacja rozmiaru w stylu CSS, np. '100px' lub '12ex'.
setObject

nieważne

Ustawia obiekt zgodny z formatem JSON, który ma być wyświetlany na pasku bocznym.

Funkcja setObject ma postać:
```
(jsonObject: string, rootTitle?: string, callback?: function) => {...}
```
- jsonObject
  
  ciąg znaków
  
  Obiekt do wyświetlenia w kontekście zbadanej strony. Oceniane w kontekście wywołującego (klienta interfejsu API).
- rootTitle
  
  ciąg znaków opcjonalny
  
  Opcjonalny tytuł elementu noszącego nazwę „root” (element 0. poziomu) w drzewie wyrażenia.
- wywołanie zwrotne
  
  function opcjonalny
  
  Parametr callback ma postać:
```
() => void
```
setPage

nieważne

Określa stronę HTML, która ma być wyświetlana w panelu bocznym.

Funkcja setPage ma postać:
```
(path: string) => {...}
```
- ścieżka
  
  ciąg znaków
  
  Ścieżka względna do strony rozszerzenia, która ma być wyświetlana na pasku bocznym.

SourcesPanel

Reprezentuje panel Źródła.

Właściwości

onSelectionChanged

Zdarzenie<functionvoidvoid>

Wywoływane po wybraniu obiektu w panelu.

Funkcja onSelectionChanged.addListener ma postać:
```
(callback: function) => {...}
```
- wywołanie zwrotne
  
  funkcja
  
  Parametr callback ma postać:
```
() => void
```
createSidebarPane

nieważne

Tworzy panel na pasku bocznym panelu.

Funkcja createSidebarPane ma postać:
```
(title: string, callback?: function) => {...}
```
- tytuł
  
  ciąg znaków
  
  Tekst wyświetlany w nagłówku na pasku bocznym.
- wywołanie zwrotne
  
  function opcjonalny
  
  Parametr callback ma postać:
```
(result: ExtensionSidebarPane) => void
```
  - wynik
    
    ExtensionSidebarPane
    
    Obiekt ExtensionSidebarPane dla utworzonego panelu bocznego.

Właściwości

elements

Panel Elementy.

Typ

ElementsPanel

sources

panel Źródła.

Typ

SourcesPanel

themeName

Chrome 59 lub nowszy

Nazwa motywu kolorów ustawionego w ustawieniach Narzędzi deweloperskich użytkownika. Możliwe wartości: default (wartość 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ędzia dla programistów.
iconPath

ciąg znaków

Ścieżka do ikony panelu względem katalogu rozszerzeń.
pagePath

ciąg znaków

Ścieżka do strony HTML panelu względem katalogu rozszerzenia.
wywołanie zwrotne

function opcjonalny

Parametr callback ma postać:
```
(panel: ExtensionPanel) => void
```
- panel
  
  ExtensionPanel
  
  Obiekt ExtensionPanel reprezentujący utworzony panel.

openResource()

chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
)

Przesyła do DevTools żądanie otwarcia adresu URL w panelu Narzędzia dla programistów.

Parametry

URL

ciąg znaków

Adres URL zasobu do otwarcia.
lineNumber

liczba

Określa numer wiersza, do którego ma się przewinąć po załadowaniu zasobu.
columnNumber

number opcjonalny

Chrome 114 lub nowszy

Określa numer kolumny, do której ma się przewinąć po załadowaniu zasobu.
wywołanie zwrotne

function opcjonalny

Parametr callback ma postać:
```
() => void
```

setOpenResourceHandler()

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
)

Określa funkcję, która zostanie wywołana, gdy użytkownik kliknie link do zasobu w oknie Narzędzia dla deweloperów. Aby zresetować moduł obsługi, wywołaj metodę bez parametrów lub prześlij jako parametr wartość null.

Parametry

wywołanie zwrotne

function opcjonalny

Parametr callback ma postać:
```
(resource: Resource) => void
```
- zasób
  
  Zasób
  
  Obiekt devtools.inspectedWindow.Resource dla zasobu, który został kliknięty.