Chrome obsługuje teraz standardową przestrzeń nazw browser.* (dostępną od Chrome 148). Stopniowo aktualizujemy dokumentację. Więcej informacji znajdziesz w naszym przewodniku dotyczącym przejścia.

Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

chrome.devtools.panels

Opis

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

Każdy panel rozszerzenia i pasek boczny są wyświetlane 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ń.

Możesz użyć metody devtools.panels.setOpenResourceHandler, aby zainstalować funkcję wywołania zwrotnego, która obsługuje żądania użytkowników dotyczące otwarcia zasobu (zwykle kliknięcie linku do zasobu w oknie narzędzi dla programistów). Wywoływany jest maksymalnie 1 zainstalowany moduł obsługi. Użytkownicy mogą określić (za pomocą okna ustawień narzędzi dla programistów) działanie domyślne lub rozszerzenie do obsługi żądań otwarcia zasobów. Jeśli rozszerzenie wywołuje funkcję setOpenResourceHandler() wielokrotnie, zachowywany jest tylko ostatni moduł obsługi.

Ogólne wprowadzenie do korzystania z interfejsów API Narzędzi deweloperskich znajdziesz w podsumowaniu interfejsów API Narzędzi deweloperskich.

Plik manifestu

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

"devtools_page"

Przykład

Ten kod dodaje panel zawarty w pliku Panel.html, który jest reprezentowany przez FontPicker.png na pasku narzędzi Narzędzia dla programistów i ma etykietę Font Picker (Selektor czcionek):

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

Ten kod dodaje do panelu Elementy panel paska bocznego zawarty w 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 ilustruje efekt, jaki ten przykład miałby na okno Narzędzi dla programistów:

Panel ikon rozszerzeń na pasku narzędzi Narzędzi deweloperskich.

Aby wypróbować ten interfejs API, zainstaluj przykład interfejsu API paneli narzędzi deweloperskich z repozytorium chrome-extension-samples.

Typy

Button

Przycisk utworzony przez rozszerzenie.

Właściwości

onClicked

Event<functionvoidvoid>

Uruchamiane po kliknięciu przycisku.

Funkcja onClicked.addListener wygląda tak:
```
(callback: function) => {...}
```
- callback
  
  funkcja
  
  Parametr callback wygląda tak:
```
() => void
```
update

unieważnienie,

Aktualizuje atrybuty przycisku. Jeśli niektóre argumenty zostaną pominięte lub mają wartość null, odpowiadające im 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 myszy na przycisk.
- wyłączono
  
  boolean opcjonalne
  
  Czy przycisk jest wyłączony.

ElementsPanel

Reprezentuje panel Elementy.

Właściwości

onSelectionChanged

Event<functionvoidvoid>

Uruchamiane po wybraniu obiektu w panelu.

Funkcja onSelectionChanged.addListener wygląda tak:
```
(callback: function) => {...}
```
- callback
  
  funkcja
  
  Parametr callback wygląda tak:
```
() => void
```
createSidebarPane

unieważnienie,

Tworzy panel w pasku bocznym panelu.

Funkcja createSidebarPane wygląda tak:
```
(title: string) => {...}
```
- tytuł
  
  tekst
  
  Tekst wyświetlany w podpisie na pasku bocznym.
- returns
  Promise<ExtensionSidebarPane>
  
  Chrome 152 lub nowsza wersja
  
  Wywołanie zwrotne, które jest wywoływane po utworzeniu paska bocznego.

ExtensionPanel

Reprezentuje panel utworzony przez rozszerzenie.

Właściwości

onHidden

Event<functionvoidvoid>

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

Funkcja onHidden.addListener wygląda tak:
```
(callback: function) => {...}
```
- callback
  
  funkcja
  
  Parametr callback wygląda tak:
```
() => void
```
onSearch

Event<functionvoidvoid>

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

Funkcja onSearch.addListener wygląda tak:
```
(callback: function) => {...}
```
- callback
  
  funkcja
  
  Parametr callback wygląda tak:
```
(action: string, queryString?: string) => void
```
  - działanie
    
    tekst
  - queryString
    
    ciąg znaków opcjonalny
onShown

Event<functionvoidvoid>

Uruchamiane, gdy użytkownik przełącza się na panel.

Funkcja onShown.addListener wygląda tak:
```
(callback: function) => {...}
```
- callback
  
  funkcja
  
  Parametr callback wygląda tak:
```
(window: Window) => void
```
  - okno
    
    Okno
createStatusBarButton

unieważnienie,

Dodaje przycisk do paska stanu panelu.

Funkcja createStatusBarButton wygląda tak:
```
(iconPath: string, tooltipText: string, disabled: boolean) => {...}
```
- iconPath
  
  tekst
  
  Ścieżka do ikony przycisku. Plik powinien zawierać obraz o wymiarach 64 x 24 piksele, składający 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 jest wyświetlana, gdy przycisk jest naciśnięty.
- tooltipText
  
  tekst
  
  Tekst wyświetlany jako etykietka, gdy użytkownik najedzie kursorem myszy na przycisk.
- wyłączono
  
  wartość logiczna
  
  Czy przycisk jest wyłączony.
- returns
  Button
pokaż

unieważnienie,

Chrome 140 lub nowsza browser.* od Chrome 152

Wyświetla panel, aktywując odpowiednią kartę.

Funkcja show wygląda tak:
```
() => {...}
```

ExtensionSidebarPane

Pasek boczny utworzony przez rozszerzenie.

Właściwości

onHidden

Event<functionvoidvoid>

Uruchamiane, gdy panel paska bocznego zostanie ukryty w wyniku przełączenia przez użytkownika panelu, który zawiera panel paska bocznego.

Funkcja onHidden.addListener wygląda tak:
```
(callback: function) => {...}
```
- callback
  
  funkcja
  
  Parametr callback wygląda tak:
```
() => void
```
onShown

Event<functionvoidvoid>

Uruchamiane, gdy panel paska bocznego staje się widoczny w wyniku przełączenia przez użytkownika na panel, który go zawiera.

Funkcja onShown.addListener wygląda tak:
```
(callback: function) => {...}
```
- callback
  
  funkcja
  
  Parametr callback wygląda tak:
```
(window: Window) => void
```
  - okno
    
    Okno
setExpression

unieważnienie,

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) => {...}
```
- wyrażenie
  
  tekst
  
  Wyrażenie do oceny w kontekście sprawdzanej strony. Obiekty w JavaScripcie i węzły DOM są wyświetlane w rozwijanym drzewie podobnym do konsoli lub zegarka.
- rootTitle
  
  ciąg znaków opcjonalny
  
  Opcjonalny tytuł korzenia drzewa wyrażeń.
- returns
  thought Promise<void>
  
  Chrome 152 lub nowsza wersja
  
  Wywołanie zwrotne wywoływane po zaktualizowaniu panelu paska bocznego o wyniki oceny wyrażenia.
setHeight

unieważnienie,

Ustawia wysokość paska bocznego.

Funkcja setHeight wygląda tak:
```
(height: string) => {...}
```
- wysokość
  
  tekst
  
  Specyfikacja rozmiaru podobna do CSS, np. '100px' lub '12ex'.
setObject

unieważnienie,

Ustawia obiekt zgodny z JSON, który ma być wyświetlany w panelu paska bocznego.

Funkcja setObject wygląda tak:
```
(jsonObject: string, rootTitle?: string) => {...}
```
- jsonObject
  
  tekst
  
  Obiekt, który ma być wyświetlany w kontekście sprawdzanej strony. Oceniane w kontekście elementu wywołującego (klienta interfejsu API).
- rootTitle
  
  ciąg znaków opcjonalny
  
  Opcjonalny tytuł korzenia drzewa wyrażeń.
- returns
  thought Promise<void>
  
  Chrome 152 lub nowsza wersja
  
  Wywołanie zwrotne wywoływane po zaktualizowaniu paska bocznego za pomocą obiektu.
setPage

unieważnienie,

Ustawia stronę HTML, która ma być wyświetlana w panelu paska bocznego.

Funkcja setPage wygląda tak:
```
(path: string) => {...}
```
- ścieżka
  
  tekst
  
  Ścieżka względna strony rozszerzenia, która ma być wyświetlana na pasku bocznym.

SourcesPanel

Reprezentuje panel Źródła.

Właściwości

onSelectionChanged

Event<functionvoidvoid>

Uruchamiane po wybraniu obiektu w panelu.

Funkcja onSelectionChanged.addListener wygląda tak:
```
(callback: function) => {...}
```
- callback
  
  funkcja
  
  Parametr callback wygląda tak:
```
() => void
```
createSidebarPane

unieważnienie,

Tworzy panel w pasku bocznym panelu.

Funkcja createSidebarPane wygląda tak:
```
(title: string) => {...}
```
- tytuł
  
  tekst
  
  Tekst wyświetlany w podpisie na pasku bocznym.
- returns
  Promise<ExtensionSidebarPane>
  
  Chrome 152 lub nowsza wersja
  
  Wywołanie zwrotne, które jest wywoływane po utworzeniu paska bocznego.

Theme

Chrome 99 lub nowsza wersja browser.* od Chrome 152

Motyw używany przez Narzędzia deweloperskie.

Typ wyliczeniowy

"default"
Domyślny motyw Narzędzi deweloperskich. Zawsze jest to jasny motyw.

"dark"
Ciemny motyw.

Właściwości

elements

Panel Elementy.

Typ

ElementsPanel

sources

Panel źródeł.

Typ

SourcesPanel

themeName

Chrome 59 lub nowsza browser.* od Chrome 152

Nazwa motywu kolorystycznego ustawionego w ustawieniach Narzędzi deweloperskich użytkownika. Możliwe wartości: default (domyślna) i dark.

Typ

tekst

Metody

create()

browser.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
): Promise<ExtensionPanel>

Tworzy panel rozszerzenia.

Parametry

tytuł

tekst

Tytuł wyświetlany obok ikony rozszerzenia na pasku narzędzi Narzędzia dla programistów.
iconPath

tekst

Ścieżka ikony panelu względem katalogu rozszerzenia.
pagePath

tekst

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

Zwroty

Promise<ExtensionPanel>

Chrome 152 lub nowsza wersja

Funkcja wywoływana po utworzeniu panelu.

openResource()

browser.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
): Promise<void>

Wysyła do Narzędzi deweloperskich żądanie otwarcia adresu URL w panelu Narzędzia dla programistów.

Parametry

URL

tekst

Adres URL zasobu do otwarcia.
lineNumber

liczba

Określa numer wiersza, do którego należy przewinąć po wczytaniu zasobu.
columnNumber

number optional

Chrome 114 lub nowsza wersja browser.* od Chrome 152

Określa numer kolumny, do której ma nastąpić przewinięcie po wczytaniu zasobu.

Zwroty

thought Promise<void>

Chrome 152 lub nowsza wersja

Funkcja wywoływana po pomyślnym wczytaniu zasobu.

setOpenResourceHandler()

browser.devtools.panels.setOpenResourceHandler(
  callback?: function,
): void

Określa funkcję, która ma zostać wywołana, gdy użytkownik kliknie link do zasobu w oknie narzędzi dla programistów. Aby usunąć moduł obsługi, wywołaj metodę bez parametrów lub przekaż wartość null jako parametr.

Parametry

callback

function opcjonalne

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

setThemeChangeHandler()

Chrome 99 lub nowsza wersja browser.* od Chrome 152

browser.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

Określa funkcję, która ma być wywoływana, gdy w Narzędziach deweloperskich zmieni się bieżący motyw. Aby usunąć moduł obsługi, wywołaj metodę bez parametrów lub przekaż null jako parametr.

Parametry

callback

function opcjonalne

Parametr callback wygląda tak:
```
(theme: Theme) => void
```
- motyw
  
  Motyw
  
  Obecny motyw w Narzędziach deweloperskich.

chrome.devtools.panels 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

Theme

Typ wyliczeniowy

Właściwości

elements

Typ

sources

Typ

themeName

Typ

Metody

create()

Parametry

Zwroty

openResource()

Parametry

Zwroty

setOpenResourceHandler()

Parametry

setThemeChangeHandler()

Parametry

chrome.devtools.panels