chrome.devtools.panels

Opis

Za pomocą interfejsu chrome.devtools.panels API zintegruj rozszerzenie z interfejsem okna Narzędzi dla programistów. Możesz tworzyć własne panele, uzyskiwać dostęp do dotychczasowych paneli i dodawać paski boczne.

Każdy panel rozszerzenia i każdy pasek boczny są wyświetlane jako oddzielna strona HTML. Wszystkie strony rozszerzeń wyświetlane w oknie narzędzi dla deweloperów mają dostęp do wszystkich modułów w interfejsie chrome.devtools API oraz do interfejsu chrome.extension. Inne interfejsy API rozszerzeń nie są dostępne dla stron w oknie Narzędzi dla programistów, ale można je wywoływać, wysyłając żądanie do strony w tle rozszerzenia, podobnie jak w przypadku skryptów treści.

Za pomocą metody devtools.panels.setOpenResourceHandler możesz zainstalować funkcję wywołania zwrotnego, która obsługuje żądania użytkowników dotyczące otwarcia zasobu (zwykle jest to kliknięcie linku do zasobu w oknie Narzędzi dla programistów). Wywoływany jest maksymalnie jeden z zainstalowanych modułów obsługi. Użytkownicy mogą w oknie ustawień Narzędzi dla programistów określić działanie domyślne lub rozszerzenie do obsługi żądań otwarcia zasobów. Jeśli rozszerzenie wywołuje metodę setOpenResourceHandler() wielokrotnie, zachowywany jest tylko ostatni moduł obsługi.

Zobacz podsumowanie interfejsów API DevTools, aby uzyskać ogólne informacje o korzystaniu z interfejsów API Narzędzi dla programistów.

Plik manifestu

Aby można było używać tego interfejsu API, następujące klucze muszą być zadeklarowane w pliku manifestu.

"devtools_page"

Przykład

Poniższy kod dodaje panel zawarty w pliku Panel.html, reprezentowany przez tag 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 Elements panel paska bocznego zatytułowany 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");
  }
);

Zrzut ekranu przedstawia wpływ tego przykładu na okno Narzędzi dla deweloperów:

Panel ikony rozszerzenia na pasku narzędzi DevTools
Panel ikony rozszerzenia na pasku narzędzi Narzędzi deweloperskich.

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

Typy

Button

Przycisk utworzony przez rozszerzenie.

Właściwości

  • onClicked

    Zdarzenie<functionvoidvoid>

    Uruchamiane po kliknięciu przycisku.

    Funkcja onClicked.addListener wygląda tak: 

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

    • wywołanie zwrotne

      funkcja

      Parametr callback wygląda tak: 

      ()=>void

  • aktualizować

    void

    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łączona

      wartość logiczna opcjonalna

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

ElementsPanel

Reprezentuje panel Elementy.

Właściwości

  • onSelectionChanged

    Zdarzenie<functionvoidvoid>

    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

    void

    Tworzy panel na pasku bocznym panelu.

    Funkcja createSidebarPane wygląda tak: 

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

    • title

      string,

      Tekst wyświetlany w podpisie na pasku bocznym.

    • wywołanie zwrotne

      funkcja opcjonalnie

      Parametr callback wygląda tak: 

      (result: ExtensionSidebarPane)=>void

ExtensionPanel

Reprezentuje panel utworzony przez rozszerzenie.

Właściwości

  • onHidden

    Zdarzenie<functionvoidvoid>

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

    Wywoływane po działaniu wyszukiwania (rozpoczęciu nowego wyszukiwania, nawigacji po 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

        string,

      • queryString

        ciąg znaków opcjonalny

  • onShown

    Zdarzenie<functionvoidvoid>

    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

    void

    Dodaje przycisk do paska stanu panelu.

    Funkcja createStatusBarButton wygląda tak: 

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

    • iconPath

      string,

      Ścieżka do ikony przycisku. Plik powinien zawierać obraz o wymiarach 64 x 24 piksele złożony z dwóch ikon o wymiarach 32 x 24. Ikona po lewej stronie jest używana, gdy przycisk jest nieaktywny, a ikona po prawej stronie jest wyświetlana po naciśnięciu przycisku.

    • tooltipText

      string,

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

    • wyłączona

      boolean

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

ExtensionSidebarPane

Pasek boczny utworzony przez rozszerzenie.

Właściwości

  • onHidden

    Zdarzenie<functionvoidvoid>

    Uruchamiane, gdy panel paska bocznego zostanie ukryty w wyniku opuszczenia przez użytkownika panelu hostującego panel paska bocznego.

    Funkcja onHidden.addListener wygląda tak: 

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

    • wywołanie zwrotne

      funkcja

      Parametr callback wygląda tak: 

      ()=>void

  • onShown

    Zdarzenie<functionvoidvoid>

    Uruchamiane, gdy panel paska bocznego staje się widoczny, gdy użytkownik przełączy się 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

    void

    Ustawia wyrażenie, które jest 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

      string,

      Wyrażenie oceniane w kontekście sprawdzanej 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 opcjonalnie

      Parametr callback wygląda tak: 

      ()=>void

  • setHeight

    void

    Ustawia wysokość paska bocznego.

    Funkcja setHeight wygląda tak: 

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

    • wysokość

      string,

      Specyfikacja rozmiaru podobna do CSS, np. '100px' lub '12ex'.

  • setObject

    void

    Ustawia obiekt zgodny z formatem JSON do wyświetlania w panelu paska bocznego.

    Funkcja setObject wygląda tak: 

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

    • jsonObject

      string,

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

    • rootTitle

      ciąg znaków opcjonalny

      Opcjonalny tytuł rdzenia drzewa wyrażeń.

    • wywołanie zwrotne

      funkcja opcjonalnie

      Parametr callback wygląda tak: 

      ()=>void

  • setPage

    void

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

    Funkcja setPage wygląda tak: 

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

    • ścieżka

      string,

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

SourcesPanel

Reprezentuje panel Źródła.

Właściwości

  • onSelectionChanged

    Zdarzenie<functionvoidvoid>

    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

    void

    Tworzy panel na pasku bocznym panelu.

    Funkcja createSidebarPane wygląda tak: 

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

    • title

      string,

      Tekst wyświetlany w podpisie na pasku bocznym.

    • wywołanie zwrotne

      funkcja opcjonalnie

      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 w wersji 59 i nowszych

Nazwa motywu kolorów w ustawieniach Narzędzi deweloperskich. Możliwe wartości: default (domyślna) i dark.

Typ

string,

Metody

create()

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

Tworzy panel rozszerzenia.

Parametry

  • title

    string,

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

  • iconPath

    string,

    Ścieżka ikony panelu względem katalogu rozszerzeń.

  • pagePath

    string,

    Ścieżka strony HTML panelu względem katalogu rozszerzeń.

  • wywołanie zwrotne

    funkcja opcjonalnie

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

Prosi Narzędzia deweloperskie o otworzenie adresu URL w panelu Narzędzi dla programistów.

Parametry

  • URL

    string,

    Adres URL zasobu do otwarcia.

  • lineNumber

    Liczba

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

  • columnNumber

    Liczba opcjonalnie

    Chrome 114 i nowsze wersje

    Określa numer kolumny, do której ma być przewijany zasób po wczytaniu zasobu.

  • wywołanie zwrotne

    funkcja opcjonalnie

    Parametr callback wygląda tak: 

    ()=>void

setOpenResourceHandler()

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

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

Parametry