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

chrome.devtools.panels
bookmark_border Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

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 deweloperó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) domyślne działanie lub rozszerzenie do obsługi żądań otwierania zasobów. Jeśli rozszerzenie wywołuje funkcję setOpenResourceHandler() kilka razy, zachowany zostanie tylko ostatni przetwarzacz.

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) { ... });

Ten kod dodaje panel boczny zawarty w Sidebar.html i o nazwie Właściwości czcionki do panelu Elementy, 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ędzia deweloperskich — Panel ikon rozszerzeń 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) => {...}
```
- callback
  
  funkcja
  
  Parametr callback ma postać:
```
() => void
```
update

void

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
  
  string opcjonalny
  
  Ścieżka do nowej ikony przycisku.
- tooltipText
  
  string opcjonalny
  
  Tekst wyświetlany jako etykieta, gdy użytkownik najedzie kursorem na przycisk.
- wyłączono
  
  wartość logiczna opcjonalna
  
  Określa, czy przycisk jest wyłączony.

ElementsPanel

Reprezentuje panel Elementy.

Właściwości

onSelectionChanged

Event<functionvoidvoid>

Wywoływane po wybraniu obiektu w panelu.

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

void

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.
- callback
  
  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

Event<functionvoidvoid>

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

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

Event<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) => {...}
```
- callback
  
  funkcja
  
  Parametr callback ma postać:
```
(action: string, queryString?: string) => void
```
  - działanie
    
    ciąg znaków
  - queryString
    
    string opcjonalny
onShown

Event<functionvoidvoid>

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

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

void

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, a ikona po prawej stronie wyświetla się, gdy jest wciśnięty.
- tooltipText
  
  ciąg znaków
  
  Tekst wyświetlany jako etykieta, gdy użytkownik najedzie kursorem na przycisk.
- wyłączono
  
  wartość logiczna
  
  Określa, czy przycisk jest wyłączony.
- returns
  Button

ExtensionSidebarPane

Pasek boczny utworzony przez rozszerzenie.

Właściwości

onHidden

Event<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) => {...}
```
- callback
  
  funkcja
  
  Parametr callback ma postać:
```
() => void
```
onShown

Event<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) => {...}
```
- callback
  
  funkcja
  
  Parametr callback ma postać:
```
(window: Window) => void
```
  - okno
    
    Okno
setExpression

void

Ustawia wyrażenie, które jest oceniane na stronie, która jest sprawdzana. 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 skanowanej strony. Obiekty JavaScript i węzły DOM są wyświetlane w rozwijanym drzewie, podobnie jak w konsoli lub w obserwacji.
- rootTitle
  
  string opcjonalny
  
  Opcjonalny tytuł elementu noszącego nazwę rów.
- callback
  
  function opcjonalny
  
  Parametr callback ma postać:
```
() => void
```
setHeight

void

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

void

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
  
  string opcjonalny
  
  Opcjonalny tytuł elementu noszącego nazwę rów.
- callback
  
  function opcjonalny
  
  Parametr callback ma postać:
```
() => void
```
setPage

void

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

Event<functionvoidvoid>

Wywoływane po wybraniu obiektu w panelu.

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

void

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.
- callback
  
  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 rozszerzenia.
pagePath

ciąg znaków

Ścieżka do strony HTML panelu względem katalogu rozszerzenia.
callback

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,
)

Przekazuje do Narzędzi deweloperskich prośbę o otwarcie adresu URL w panelu Narzędzia deweloperskie.

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

numer opcjonalny

Chrome 114 lub nowszy

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

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

callback

function opcjonalny

Parametr callback ma postać:
```
(resource: Resource, lineNumber: number) => void
```
- zasób
  
  Zasób
  
  Obiekt devtools.inspectedWindow.Resource dla zasobu, który został kliknięty.
- lineNumber
  
  liczba
  
  Oczekuje
  
  Określa numer wiersza w zasobie, który został kliknięty.

chrome.devtools.panels bookmark_borderbookmark Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Opis

Plik manifestu

Przykład

Typy

Button

Właściwości

ElementsPanel

Właściwości

ExtensionPanel

Właściwości

ExtensionSidebarPane

Właściwości

SourcesPanel

Właściwości

Właściwości

elements

Typ

sources

Typ

themeName

Typ

Metody

create()

Parametry

openResource()

Parametry

setOpenResourceHandler()

Parametry

chrome.devtools.panels
bookmark_border Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.