chrome.devtools.panels

Opis

Interfejs API chrome.devtools.panels pozwala zintegrować rozszerzenie z interfejsem okna Narzędzia dla programistów i tworzyć własne panele, uzyskiwać dostęp do dotychczasowych paneli i dodawać paski boczne.

Plik manifestu

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

"devtools_page"

Zapoznaj się z podsumowaniem interfejsów API Narzędzi deweloperskich, aby uzyskać ogólne wprowadzenie do korzystania z interfejsów API narzędzi dla programistów.

Omówienie

Każdy panel rozszerzenia i pasek boczny są wyświetlane jako osobna strona HTML. Wyświetlono wszystkie strony rozszerzeń w oknie Narzędzia dla programistów mają dostęp do wszystkich modułów interfejsu API chrome.devtools oraz do Interfejs API chrome.extension. Interfejsy API innych rozszerzeń nie są dostępne na stronach dewelopera Narzędzia, ale można je wywołać, wysyłając żądanie na stronę rozszerzenia w tle podobnie jak w skryptach treści.

Aby zainstalować funkcję wywołania zwrotnego, możesz użyć metody devtools.panels.setOpenResourceHandler który obsługuje żądania otwarcia zasobu (zwykle kliknięcie linku do zasobu w w oknie Narzędzia dla deweloperów). Wywoływane jest co najwyżej jeden z zainstalowanych modułów obsługi. mogą określić użytkownicy (przy użyciu okno ustawień Narzędzi dla programistów) to domyślne zachowanie lub rozszerzenie do obsługi zasobu. otwartych żądań. Jeśli rozszerzenie wywołuje setOpenResourceHandler() wiele razy, tylko ostatnie zachowywany.

Przykłady

Ten kod dodaje panel znajdujący się w elemencie Panel.html, który jest reprezentowany przez FontPicker.png na Pasek narzędzi narzędzi dla programistów z etykietą Selektor czcionek:

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

Ten kod dodaje panel paska bocznego zawarty w Sidebar.html i zatytułowany Właściwości czcionki do panelu Elementy, 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 pokazuje wpływ powyższych przykładów na okno Narzędzia dla programistów:

Panel z ikoną rozszerzenia na pasku narzędzi Narzędzi deweloperskich

Aby wypróbować ten interfejs API, zainstaluj przykładowy interfejs API devtools panels ze strony chrome-extension-samples. z repozytorium.

Typy

Button

Przycisk utworzony przez rozszerzenie.

Właściwości

  • onClicked

    Zdarzenie<functionvoid>

    Uruchamiane po kliknięciu przycisku.

    Funkcja onClicked.addListener wygląda tak:

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

    • wywołanie zwrotne

      funkcja

      Parametr callback wygląda tak:

      () => void

  • update

    nieważne

    Aktualizuje atrybuty przycisku. Jeśli niektóre argumenty zostaną pominięte lub 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łączone

      Wartość logiczna opcjonalna

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

ElementsPanel

Reprezentuje panel Elementy.

Właściwości

  • onSelectionChanged

    Zdarzenie<functionvoid>

    Uruchamiane po wybraniu obiektu w panelu.

    Funkcja onSelectionChanged.addListener wygląda tak:

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

    • wywołanie zwrotne

      funkcja

      Parametr callback wygląda tak:

      () => void

  • createSidebarPane

    nieważne

    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 na pasku bocznym.

    • wywołanie zwrotne

      funkcja optional

      Parametr callback wygląda tak:

      (result: ExtensionSidebarPane) => void

ExtensionPanel

Reprezentuje panel utworzony przez rozszerzenie.

Właściwości

  • onHidden

    Zdarzenie<functionvoid>

    Uruchamiane, gdy użytkownik opuści panel.

    Funkcja onHidden.addListener wygląda tak:

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

    • wywołanie zwrotne

      funkcja

      Parametr callback wygląda tak:

      () => void

  • onSearch

    Zdarzenie<functionvoid>

    wywołane po działaniu związanym z wyszukiwaniem (rozpoczęciem nowego wyszukiwania, nawigacją w wynikach wyszukiwania lub anulowaniem wyszukiwania);

    Funkcja onSearch.addListener wygląda tak:

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

    • wywołanie zwrotne

      funkcja

      Parametr callback wygląda tak:

      (action: string, queryString?: string) => void

      • działanie

        ciąg znaków

      • queryString

        ciąg znaków opcjonalny

  • onShown

    Zdarzenie<functionvoid>

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

    Funkcja onShown.addListener wygląda tak:

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

    • wywołanie zwrotne

      funkcja

      Parametr callback wygląda tak:

      (window: Window) => void

      • okno

        Okno

  • createStatusBarButton

    nieważne

    Dodaje przycisk do paska stanu panelu.

    Funkcja createStatusBarButton wygląda tak:

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

    • iconPath

      ciąg znaków

      Ścieżka ikony przycisku. Plik powinien zawierać obraz o wymiarach 64 x 24 piksele, składający się z dwóch ikon o wymiarach 32 x 24. Ikona po lewej stronie jest wyświetlana, gdy przycisk jest nieaktywny. po naciśnięciu przycisku wyświetla się ikona z prawej strony.

    • tooltipText

      ciąg znaków

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

    • wyłączone

      wartość logiczna

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

ExtensionSidebarPane

Pasek boczny utworzony przez rozszerzenie.

Właściwości

  • onHidden

    Zdarzenie<functionvoid>

    Uruchamiane, gdy panel paska bocznego staje się ukryty w wyniku przełączenia się przez użytkownika z panelu, który go obsługuje.

    Funkcja onHidden.addListener wygląda tak:

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

    • wywołanie zwrotne

      funkcja

      Parametr callback wygląda tak:

      () => void

  • onShown

    Zdarzenie<functionvoid>

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

    Funkcja onShown.addListener wygląda tak:

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

    • wywołanie zwrotne

      funkcja

      Parametr callback wygląda tak:

      (window: Window) => void

      • okno

        Okno

  • setExpression

    nieważne

    Ustawia wyrażenie 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

      ciąg znaków

      Wyrażenie do oceny w kontekście badanej strony. Obiekty JavaScript i węzły DOM są wyświetlane w rozwijanym drzewie podobnym do konsoli/zegarka.

    • rootTitle

      ciąg znaków opcjonalny

      Opcjonalny tytuł rdzenia drzewa wyrażeń.

    • wywołanie zwrotne

      funkcja optional

      Parametr callback wygląda tak:

      () => void

  • setHeight

    nieważne

    Ustawia wysokość paska bocznego.

    Funkcja setHeight wygląda tak:

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

    • wysokość

      ciąg znaków

      Specyfikacja rozmiaru przypominająca kod CSS, np. '100px' lub '12ex'.

  • setObject

    nieważne

    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

      ciąg znaków

      Obiekt do wyświetlenia w kontekście sprawdzanej strony. Oceniana w kontekście elementu wywołującego (klienta interfejsu API).

    • rootTitle

      ciąg znaków opcjonalny

      Opcjonalny tytuł rdzenia drzewa wyrażeń.

    • wywołanie zwrotne

      funkcja optional

      Parametr callback wygląda tak:

      () => void

  • setPage

    nieważne

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

    Funkcja setPage wygląda tak:

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

    • ścieżka

      ciąg znaków

      Względna ścieżka strony rozszerzenia wyświetlana na pasku bocznym.

SourcesPanel

Reprezentuje panel Źródła.

Właściwości

  • onSelectionChanged

    Zdarzenie<functionvoid>

    Uruchamiane po wybraniu obiektu w panelu.

    Funkcja onSelectionChanged.addListener wygląda tak:

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

    • wywołanie zwrotne

      funkcja

      Parametr callback wygląda tak:

      () => void

  • createSidebarPane

    nieważne

    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 na pasku bocznym.

    • wywołanie zwrotne

      funkcja optional

      Parametr callback wygląda tak:

      (result: ExtensionSidebarPane) => void

Właściwości

elements

Elementy.

sources

Panel Źródła.

themeName

Chrome w wersji 59 lub nowszej .

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

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

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 strony HTML panelu względem katalogu rozszerzenia.

  • wywołanie zwrotne

    funkcja optional

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

Pyta Narzędzia deweloperskie o otwarcie adresu URL w panelu Narzędzi dla programistów.

Parametry

  • URL

    ciąg znaków

    Adres URL zasobu do otworzenia.

  • lineNumber

    liczba

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

  • columnNumber

    liczba opcjonalnie

    Chrome w wersji 114 lub nowszej .

    Określa numer kolumny, do której można przewinąć stronę po wczytaniu zasobu.

  • wywołanie zwrotne

    funkcja optional

    Parametr callback wygląda tak:

    () => void

setOpenResourceHandler()

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

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

Parametry