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 znajdziesz w podsumowaniu interfejsów API Narzędzi.

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żytkownika dotyczące otwarcia 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 funkcję 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

      string opcjonalny

      Ścieżka do nowej ikony przycisku.

    • tooltipText

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

    Wywoływane po wybraniu obiektu w panelu.

    Funkcja onSelectionChanged.addListener wygląda tak:

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

    • callback

      funkcja

      Parametr callback wygląda tak:

      () => void

  • createSidebarPane

    pusty,

    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

      funkcja opcjonalna

      Parametr callback wygląda tak:

      (result: ExtensionSidebarPane) => void

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

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

    Dołącza 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+

    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,

    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

      string opcjonalny

      Opcjonalny tytuł korzenia drzewa wyrażeń.

    • callback

      funkcja opcjonalna

      Parametr callback wygląda tak:

      () => void

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

    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

      string opcjonalny

      Opcjonalny tytuł korzenia drzewa wyrażeń.

    • callback

      funkcja opcjonalna

      Parametr callback wygląda tak:

      () => void

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

    Wywoływane po wybraniu obiektu w panelu.

    Funkcja onSelectionChanged.addListener wygląda tak:

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

    • callback

      funkcja

      Parametr callback wygląda tak:

      () => void

  • createSidebarPane

    pusty,

    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

      funkcja opcjonalna

      Parametr callback wygląda tak:

      (result: ExtensionSidebarPane) => void

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 (wartość domyślna) i dark.

Typ

ciąg znaków

Metody

create()

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): void

Tworzy panel rozszerzenia.

Parametry

  • tytuł

    ciąg znaków

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

  • 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

    funkcja opcjonalna

    Parametr callback wygląda tak:

    (panel: ExtensionPanel) => void

    • Obiekt ExtensionPanel reprezentujący utworzony panel.

openResource()

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

    funkcja opcjonalna

    Parametr callback wygląda tak:

    () => void

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

    funkcja opcjonalna

    Parametr callback wygląda tak:

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