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.

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 części interfejsu API chrome.devtools oraz do wszystkich interfejsów API innych rozszerzeń.

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.

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.

Plik manifestu

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

"devtools_page"

Przykład

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 tego przykładu 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

    .
    • wynik

      ExtensionSidebarPane

      Obiekt ExtensionSidebarPane dla utworzonego panelu paska bocznego.

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.

  • returns

    Button

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

    .
    • wynik

      ExtensionSidebarPane

      Obiekt ExtensionSidebarPane dla utworzonego panelu paska bocznego.

Właściwości

elements

Elementy.

Typ

ElementsPanel

sources

Panel Źródła.

Typ

SourcesPanel

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

  .
  • panel

    ExtensionPanel

    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

• wywołanie zwrotne

  funkcja optional

  Parametr callback wygląda tak:

  (resource: Resource) => void

  .
  • zasób

    Zasób

    Obiekt devtools.inspectedWindow.Resource klikniętego zasobu.