chrome.devtools.panels

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ć 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 jest wyświetlany 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 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 otwierania zasobu (zwykle kliknięcie linku do zasobu w oknie Narzędzi dla programistów). Wywoływany jest co najwyżej jeden z zainstalowanych programó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() wiele 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ędzia dla programistów i oznaczony jako Selektor czcionek:

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

    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ł

      ciąg znaków

      Tekst wyświetlany w podpisie paska bocznego.

    • callback

      function opcjonalny

      Parametr callback wygląda tak:

      (result: ExtensionSidebarPane) => void

    • returns

      Promise<ExtensionSidebarPane>

      Oczekuje

      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>

    Uruchamiane, 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 wykonaniu działania związanego z wyszukiwaniem (rozpoczęciu nowego wyszukiwania, przejściu do wyniku 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

        ciąg znaków

      • queryString

        ciąg znaków opcjonalny

  • onShown

    Event<functionvoidvoid>

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

    Dodaje przycisk do paska stanu panelu.

    Funkcja createStatusBarButton wygląda tak:

    (iconPath: string, tooltipText: string, disabled: boolean) => {...}

    • iconPath

      ciąg znaków

      Ś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

      ciąg znaków

      Tekst wyświetlany jako etykietka, gdy użytkownik najedzie kursorem na przycisk.

    • wyłączono

      Wartość logiczna

      Określa, czy przycisk jest wyłączony.

  • pokaż

    pusty

    Chrome 140 lub nowsza

    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>

    Uruchamiane, 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 obliczane na sprawdzanej stronie. Wynik zostanie wyświetlony w panelu bocznym.

    Funkcja setExpression wygląda tak:

    (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 podobnym do konsoli lub okna obserwacji.

    • rootTitle

      ciąg znaków opcjonalny

      Opcjonalny tytuł korzenia drzewa wyrażeń.

    • callback

      function opcjonalny

      Parametr callback wygląda tak:

      () => void

    • returns

      Promise<void>

      Oczekuje

      Funkcja wywołania zwrotnego wywoływana 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ść

      ciąg znaków

      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

      ciąg znaków

      Obiekt do wyświetlenia 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

      function opcjonalny

      Parametr callback wygląda tak:

      () => void

    • returns

      Promise<void>

      Oczekuje

      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

      ciąg znaków

      Ś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ł

      ciąg znaków

      Tekst wyświetlany w podpisie paska bocznego.

    • callback

      function opcjonalny

      Parametr callback wygląda tak:

      (result: ExtensionSidebarPane) => void

    • returns

      Promise<ExtensionSidebarPane>

      Oczekuje

      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

ciąg znaków

Metody

create()

Obietnica 
chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): Promise<ExtensionPanel>

Tworzy panel rozszerzenia.

Parametry

  • tytuł

    ciąg znaków

    Tytuł wyświetlany obok ikony rozszerzenia na pasku narzędzi Narzędzi deweloperskich.

  • iconPath

    ciąg znaków

    Ścieżka 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 wygląda tak:

    (panel: ExtensionPanel) => void

    • Obiekt ExtensionPanel reprezentujący utworzony panel.

Zwroty

  • Promise<ExtensionPanel>

    Oczekuje

    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

    ciąg znaków

    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 wczytaniu zasobu.

  • callback

    function opcjonalny

    Parametr callback wygląda tak:

    () => void

Zwroty

  • Promise<void>

    Oczekuje

    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ędzia dla deweloperów. Aby cofnąć ustawienie procedury obsługi, wywołaj metodę bez parametrów lub przekaż wartość null jako parametr.

Parametry

  • callback

    function opcjonalny

    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

    function opcjonalny

    Parametr callback wygląda tak:

    (theme: Theme) => void

    • motyw

      Motyw

      Bieżący motyw w Narzędziach deweloperskich.