31 sierpnia 2026 r. usunęliśmy z Chrome Web Store rozszerzenia Manifest V2. Przenieś rozszerzenie na platformę Manifest V3, aby było znowu dostępne dla użytkowników.

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

refresh date: 2026-09-25 robots: noindex

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.

Plik manifestu

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

"devtools_page"

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

Przegląd

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 modułów w interfejsie API chrome.devtools, a także do interfejsu API chrome.extension. Inne interfejsy API rozszerzeń nie są dostępne dla stron w oknie narzędzi dla programistów, ale możesz je wywołać, wysyłając żądanie do strony działającej w tle rozszerzenia, podobnie jak w przypadku skryptów treści.

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ędzia 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.

Przykłady

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");
  }
);

Ten zrzut ekranu pokazuje, jak powyższe przykłady wpłyną 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,

Obietnica

Tworzy panel w pasku bocznym panelu.

Funkcja createSidebarPane wygląda tak:
```
(title: string, callback?: function) => {...}
```
- tytuł
  
  tekst
  
  Tekst wyświetlany w podpisie na pasku bocznym.
- callback
  
  function opcjonalne
  
  Parametr callback wygląda tak:
```
(result: ExtensionSidebarPane) => void
```
  - wynik
    
    ExtensionSidebarPane
    
    Obiekt ExtensionSidebarPane dla utworzonego panelu paska bocznego.
- returns
  Promise<ExtensionSidebarPane>
  
  Chrome 152 lub nowsza wersja
  
  Wywołanie zwrotne, które jest wywoływane po utworzeniu paska bocznego.
  
  Obiekty Promise są obsługiwane tylko w przypadku platformy Manifest V3 i nowszych. Na innych platformach należy używać wywołań zwrotnych.

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 wersja

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,

Obietnica

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, callback?: function) => {...}
```
- 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ń.
- callback
  
  function opcjonalne
  
  Parametr callback wygląda tak:
```
() => void
```
- returns
  thought Promise<void>
  
  Chrome 152 lub nowsza wersja
  
  Wywołanie zwrotne wywoływane po zaktualizowaniu panelu paska bocznego o wyniki oceny wyrażenia.
  
  Obiekty Promise są obsługiwane tylko w przypadku platformy Manifest V3 i nowszych. Na innych platformach należy używać wywołań zwrotnych.
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,

Obietnica

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
  
  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ń.
- callback
  
  function opcjonalne
  
  Parametr callback wygląda tak:
```
() => void
```
- returns
  thought Promise<void>
  
  Chrome 152 lub nowsza wersja
  
  Wywołanie zwrotne wywoływane po zaktualizowaniu paska bocznego za pomocą obiektu.
  
  Obiekty Promise są obsługiwane tylko w przypadku platformy Manifest V3 i nowszych. Na innych platformach należy używać wywołań zwrotnych.
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,

Obietnica

Tworzy panel w pasku bocznym panelu.

Funkcja createSidebarPane wygląda tak:
```
(title: string, callback?: function) => {...}
```
- tytuł
  
  tekst
  
  Tekst wyświetlany w podpisie na pasku bocznym.
- callback
  
  function opcjonalne
  
  Parametr callback wygląda tak:
```
(result: ExtensionSidebarPane) => void
```
  - wynik
    
    ExtensionSidebarPane
    
    Obiekt ExtensionSidebarPane dla utworzonego panelu paska bocznego.
- returns
  Promise<ExtensionSidebarPane>
  
  Chrome 152 lub nowsza wersja
  
  Wywołanie zwrotne, które jest wywoływane po utworzeniu paska bocznego.
  
  Obiekty Promise są obsługiwane tylko w przypadku platformy Manifest V3 i nowszych. Na innych platformach należy używać wywołań zwrotnych.

Theme

Chrome 99 lub nowsza wersja

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 wersja

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

Typ

tekst

Metody

create()

Obietnica

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): 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.
callback

function opcjonalne

Parametr callback wygląda tak:
```
(panel: ExtensionPanel) => void
```
- panel
  
  ExtensionPanel
  
  Obiekt ExtensionPanel reprezentujący utworzony panel.

Zwroty

Promise<ExtensionPanel>

Chrome 152 lub nowsza wersja

Funkcja wywoływana po utworzeniu panelu.

Obiekty Promise są obsługiwane tylko w przypadku platformy Manifest V3 i nowszych. Na innych platformach należy używać wywołań zwrotnych.

openResource()

Obietnica

chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
): 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

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

function opcjonalne

Parametr callback wygląda tak:
```
() => void
```

Zwroty

thought Promise<void>

Chrome 152 lub nowsza wersja

Funkcja wywoływana po pomyślnym wczytaniu zasobu.

Obiekty Promise są obsługiwane tylko w przypadku platformy Manifest V3 i nowszych. Na innych platformach należy używać wywołań zwrotnych.

setOpenResourceHandler()

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

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

Przegląd

Przykłady

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