chrome.devtools.panels

refresh date: 2026-09-25 robots: noindex

Opis

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

Plik manifestu

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

"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 deweloperskich mają dostęp do wszystkich modułów w interfejsie chrome.devtools API, a także do interfejsu chrome.extension API. Inne interfejsy API rozszerzeń nie są dostępne na stronach w oknie Narzędzi deweloperskich, ale możesz je wywoływać, wysyłając żądanie do strony tła 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żytkownika dotyczące otwarcia zasobu (zwykle kliknięcie linku do zasobu w oknie Narzędzi deweloperskich). Wywoływany jest co najwyżej jeden z zainstalowanych modułów obsługi. Użytkownicy mogą określić (w oknie dialogowym Ustawienia narzędzi deweloperskich) domyślne działanie lub rozszerzenie do obsługi żądań otwarcia zasobu. Jeśli rozszerzenie wywoła setOpenResourceHandler() kilka razy, zachowany zostanie tylko ostatni moduł obsługi.

Przykłady

Ten kod dodaje panel zawarty w Panel.html, reprezentowany przez FontPicker.png na pasku narzędzi Narzędzi dla programistów i oznaczony jako Selektor czcionek:

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

Ten kod dodaje do panelu Elementy panel boczny zawarty w Sidebar.html i zatytułowany Font Properties, 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 deweloperskich:

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

    pusty

    Aktualizuje atrybuty przycisku. Jeśli niektóre argumenty zostaną pominięte lub będą miały wartość 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 myszy na przycisk.

    • wyłączono

      wartość logiczna opcjonalna

      Czy przycisk jest wyłączony.

ElementsPanel

Reprezentuje panel Elementy.

Właściwości

  • onSelectionChanged

    Event<functionvoidvoid>

    Uruchamiane, gdy w panelu zostanie wybrany obiekt.

    Funkcja onSelectionChanged.addListener wygląda tak:

    (callback: function) => {...}

    • callback

      funkcja

      Parametr callback wygląda tak:

      () => void

  • createSidebarPane

    pusty

    Obietnica

    Tworzy panel na pasku bocznym panelu.

    Funkcja createSidebarPane wygląda tak:

    (title: string, callback?: function) => {...}

    • tytuł

      tekst

      Tekst wyświetlany w podpisie paska bocznego.

    • callback

      funkcja opcjonalna

      Parametr callback wygląda tak:

      (result: ExtensionSidebarPane) => void

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152 lub nowsza

      Wywołanie zwrotne wywoływane po utworzeniu paska bocznego.

      Obietnice są obsługiwane tylko w przypadku platformy Manifest V3 i nowszych. Inne platformy muszą używać wywołań zwrotnych.

ExtensionPanel

Reprezentuje panel utworzony przez rozszerzenie.

Właściwości

  • onHidden

    Event<functionvoidvoid>

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

    Funkcja onHidden.addListener wygląda tak:

    (callback: function) => {...}

    • callback

      funkcja

      Parametr callback wygląda tak:

      () => void

  • onSearch

    Event<functionvoidvoid>

    Wywoływane po działaniu związanym z wyszukiwaniem (rozpoczęciu nowego wyszukiwania, nawigacji po wynikach wyszukiwania lub anulowaniu 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>

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

    Funkcja onShown.addListener wygląda tak:

    (callback: function) => {...}

    • callback

      funkcja

      Parametr callback wygląda tak:

      (window: Window) => void

      • okno

        Okno

  • createStatusBarButton

    pusty

    Dołącza 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 rozmiarze 64 x 24 piksele składający się z 2 ikon o rozmiarze 32 x 24 piksele. Lewa ikona jest używana, gdy przycisk jest nieaktywny, a prawa – gdy 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.

  • pokaż

    pusty

    Chrome 140+

    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 boczny zostanie ukryty w wyniku przełączenia się użytkownika z panelu, w którym jest on hostowany.

    Funkcja onHidden.addListener wygląda tak:

    (callback: function) => {...}

    • callback

      funkcja

      Parametr callback wygląda tak:

      () => void

  • onShown

    Event<functionvoidvoid>

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

    Funkcja onShown.addListener wygląda tak:

    (callback: function) => {...}

    • callback

      funkcja

      Parametr callback wygląda tak:

      (window: Window) => void

      • okno

        Okno

  • setExpression

    pusty

    Obietnica

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

    Funkcja setExpression wygląda tak:

    (expression: string, rootTitle?: string, callback?: function) => {...}

    • wyrażenie

      tekst

      Wyrażenie do oceny w kontekście sprawdzanej strony. Obiekty JavaScript i węzły DOM są wyświetlane w rozwijanym drzewie podobnym do konsoli lub okna obserwacji.

    • rootTitle

      ciąg znaków opcjonalny

      Opcjonalny tytuł korzenia drzewa wyrażeń.

    • callback

      funkcja opcjonalna

      Parametr callback wygląda tak:

      () => void

    • returns

      Promise<void>

      Chrome 152 lub nowsza

      Wywołanie zwrotne wywoływane po zaktualizowaniu panelu bocznego o wyniki oceny wyrażenia.

      Obietnice są obsługiwane tylko w przypadku platformy Manifest V3 i nowszych. Inne platformy muszą używać wywołań zwrotnych.

  • setHeight

    pusty

    Ustawia wysokość paska bocznego.

    Funkcja setHeight wygląda tak:

    (height: string) => {...}

    • wysokość

      tekst

      Specyfikacja rozmiaru w stylu CSS, np. '100px' lub '12ex'.

  • setObject

    pusty

    Obietnica

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

    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. Ocena w kontekście wywołującego (klienta interfejsu API).

    • rootTitle

      ciąg znaków opcjonalny

      Opcjonalny tytuł korzenia drzewa wyrażeń.

    • callback

      funkcja opcjonalna

      Parametr callback wygląda tak:

      () => void

    • returns

      Promise<void>

      Chrome 152 lub nowsza

      Wywołanie zwrotne wywoływane po zaktualizowaniu paska bocznego o obiekt.

      Obietnice są obsługiwane tylko w przypadku platformy Manifest V3 i nowszych. Inne platformy muszą używać wywołań zwrotnych.

  • setPage

    pusty

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

    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, gdy w panelu zostanie wybrany obiekt.

    Funkcja onSelectionChanged.addListener wygląda tak:

    (callback: function) => {...}

    • callback

      funkcja

      Parametr callback wygląda tak:

      () => void

  • createSidebarPane

    pusty

    Obietnica

    Tworzy panel na pasku bocznym panelu.

    Funkcja createSidebarPane wygląda tak:

    (title: string, callback?: function) => {...}

    • tytuł

      tekst

      Tekst wyświetlany w podpisie paska bocznego.

    • callback

      funkcja opcjonalna

      Parametr callback wygląda tak:

      (result: ExtensionSidebarPane) => void

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152 lub nowsza

      Wywołanie zwrotne wywoływane po utworzeniu paska bocznego.

      Obietnice są obsługiwane tylko w przypadku platformy Manifest V3 i nowszych. Inne platformy muszą używać wywołań zwrotnych.

Theme

Chrome 99 lub nowsza

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ódła,

Typ

SourcesPanel

themeName

Chrome 59 lub nowsza

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

  • iconPath

    tekst

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

  • pagePath

    tekst

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

  • callback

    funkcja opcjonalna

    Parametr callback wygląda tak:

    (panel: ExtensionPanel) => void

    • Obiekt ExtensionPanel reprezentujący utworzony panel.

Zwroty

  • Promise<ExtensionPanel>

    Chrome 152 lub nowsza

    Funkcja wywoływana podczas tworzenia panelu.

    Obietnice są obsługiwane tylko w przypadku platformy Manifest V3 i nowszych. Inne platformy muszą 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ędzi deweloperskich.

Parametry

  • URL

    tekst

    Adres URL zasobu do otwarcia.

  • lineNumber

    liczba

    Określa numer wiersza, do którego należy przewinąć po załadowaniu zasobu.

  • columnNumber

    number opcjonalny

    Chrome 114 lub nowsza

    Określa numer kolumny, do której należy przewinąć po załadowaniu zasobu.

  • callback

    funkcja opcjonalna

    Parametr callback wygląda tak:

    () => void

Zwroty

  • Promise<void>

    Chrome 152 lub nowsza

    Funkcja wywoływana po pomyślnym wczytaniu zasobu.

    Obietnice są obsługiwane tylko w przypadku platformy Manifest V3 i nowszych. Inne platformy muszą używać wywołań zwrotnych.

setOpenResourceHandler()

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

Określa funkcję, która ma być wywoływana, gdy użytkownik kliknie link do zasobu w oknie Narzędzi deweloperskich. Aby cofnąć ustawienie procedury obsługi, wywołaj metodę bez parametrów lub przekaż wartość null jako parametr.

Parametry

  • callback

    funkcja opcjonalna

    Parametr callback wygląda tak:

    (resource: Resource, lineNumber: number) => void

setThemeChangeHandler()

Chrome 99 lub nowsza 
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 cofnąć ustawienie procedury obsługi, wywołaj metodę bez parametrów lub przekaż parametr null.

Parametry

  • callback

    funkcja opcjonalna

    Parametr callback wygląda tak:

    (theme: Theme) => void

    • motyw

      Motyw

      Obecny motyw w Narzędziach deweloperskich.