chrome.devtools.panels

説明

chrome.devtools.panels API を使用して、拡張機能をデベロッパー ツール ウィンドウの UI に統合します。独自のパネルを作成したり、既存のパネルにアクセスしたり、サイドバーを追加したりできます。

各拡張機能パネルとサイドバーは、個別の HTML ページとして表示されます。デベロッパー ツール ウィンドウに表示されるすべての拡張機能ページは、chrome.devtools API のすべての部分と、他のすべての拡張機能 API にアクセスできます。

devtools.panels.setOpenResourceHandler メソッドを使用すると、リソースを開くユーザー リクエスト（通常は、デベロッパー ツール ウィンドウでリソースリンクをクリックする）を処理するコールバック関数をインストールできます。インストールされているハンドラは最大で 1 つ呼び出されます。ユーザーは、デベロッパー ツールの設定ダイアログを使用して、リソースのオープン リクエストを処理するデフォルトの動作または拡張機能を指定できます。拡張機能が setOpenResourceHandler() を複数回呼び出すと、最後のハンドラのみが保持されます。

デベロッパー ツール API の使用に関する一般的な概要については、DevTools API の概要をご覧ください。

マニフェスト

この API を使用するには、次のキーをマニフェストで宣言する必要があります。

"devtools_page"

例

次のコードは、Panel.html に含まれるパネルを追加します。このパネルは、デベロッパー ツールのツールバーで FontPicker.png で表され、フォント選択ツールというラベルが付けられます。

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

次のコードは、Sidebar.html に含まれる [フォント プロパティ] というタイトルのサイドバー ペインを要素パネルに追加し、その高さを 8ex に設定します。

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

次のスクリーンショットは、この例がデベロッパー ツール ウィンドウに与える影響を示しています。

DevTools ツールバーの拡張機能アイコンパネル
DevTools ツールバーの拡張機能アイコンパネル。

この API を試すには、chrome-extension-samples リポジトリから devtools panels API の例をインストールします。

型

Button

拡張機能によって作成されたボタン。

プロパティ

  • onClicked

    Event<functionvoidvoid>

    ボタンがクリックされたときに呼び出されます。

    onClicked.addListener 関数は次のようになります。 

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

    • callback

      関数

      callback パラメータは次のようになります。 

      () => void

  • update

    void

    ボタンの属性を更新します。引数の一部が省略されているか null の場合、対応する属性は更新されません。

    update 関数は次のようになります。 

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

    • iconPath

      文字列（省略可）

      ボタンの新しいアイコンのパス。

    • tooltipText

      文字列（省略可）

      ユーザーがボタンにカーソルを合わせたときにツールチップとして表示されるテキスト。

    • 無効

      ブール値（省略可）

      ボタンが無効かどうか。

ElementsPanel

要素パネルを表します。

プロパティ

  • onSelectionChanged

    Event<functionvoidvoid>

    パネルでオブジェクトが選択されたときに発生します。

    onSelectionChanged.addListener 関数は次のようになります。 

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

    • callback

      関数

      callback パラメータは次のようになります。 

      () => void

  • createSidebarPane

    void

    パネルのサイドバー内にペインを作成します。

    createSidebarPane 関数は次のようになります。 

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

    • title

      文字列

      サイドバーのキャプションに表示されるテキスト。

    • callback

      function 省略可

      callback パラメータは次のようになります。 

      (result: ExtensionSidebarPane) => void

      • 件の結果

        ExtensionSidebarPane

        作成されたサイドバーペイン用の ExtensionSidebarPane オブジェクト。

ExtensionPanel

拡張機能によって作成されたパネルを表します。

プロパティ

  • onHidden

    Event<functionvoidvoid>

    ユーザーがパネルから離れると発行されます。

    onHidden.addListener 関数は次のようになります。 

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

    • callback

      関数

      callback パラメータは次のようになります。 

      () => void

  • onSearch

    Event<functionvoidvoid>

    検索アクション（新しい検索の開始、検索結果のナビゲーション、検索のキャンセル）が発生したときにトリガーされます。

    onSearch.addListener 関数は次のようになります。 

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

    • callback

      関数

      callback パラメータは次のようになります。 

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

      • アクション

        文字列

      • queryString

        文字列（省略可）

  • onShown

    Event<functionvoidvoid>

    ユーザーがパネルに切り替えると発行されます。

    onShown.addListener 関数は次のようになります。 

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

    • callback

      関数

      callback パラメータは次のようになります。 

      (window: Window) => void

      • 窓

        ウィンドウ

  • createStatusBarButton

    void

    パネルのステータスバーにボタンを追加します。

    createStatusBarButton 関数は次のようになります。 

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

    • iconPath

      文字列

      ボタンのアイコンのパス。ファイルには、2 つの 32x24 アイコンで構成された 64x24 ピクセルの画像が含まれている必要があります。左側のアイコンはボタンが非アクティブなときに使用され、右側のアイコンはボタンが押されたときに表示されます。

    • tooltipText

      文字列

      ユーザーがボタンにカーソルを合わせたときにツールチップとして表示されるテキスト。

    • 無効

      ブール値

      ボタンが無効かどうか。

ExtensionSidebarPane

拡張機能によって作成されたサイドバー。

プロパティ

  • onHidden

    Event<functionvoidvoid>

    ユーザーがサイドバー ペインをホストするパネルから切り替えた結果、サイドバー ペインが非表示になったときに呼び出されます。

    onHidden.addListener 関数は次のようになります。 

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

    • callback

      関数

      callback パラメータは次のようになります。 

      () => void

  • onShown

    Event<functionvoidvoid>

    ユーザーがサイドバーをホストするパネルに切り替えた結果、サイドバーペインが表示されたときに発生します。

    onShown.addListener 関数は次のようになります。 

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

    • callback

      関数

      callback パラメータは次のようになります。 

      (window: Window) => void

      • 窓

        ウィンドウ

  • setExpression

    void

    検査対象のページ内で評価される式を設定します。結果がサイドバー ペインに表示されます。

    setExpression 関数は次のようになります。 

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

    • 式

      文字列

      検査対象のページのコンテキストで評価される式。JavaScript オブジェクトと DOM ノードは、コンソールやウォッチと同様に、展開可能なツリーに表示されます。

    • rootTitle

      文字列（省略可）

      式ツリーのルートのタイトル（省略可）。

    • callback

      function 省略可

      callback パラメータは次のようになります。 

      () => void

  • setHeight

    void

    サイドバーの高さを設定します。

    setHeight 関数は次のようになります。 

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

    • height

      文字列

      CSS のようなサイズ仕様（'100px' や '12ex' など）。

  • setObject

    void

    サイドバー ペインに表示される JSON 準拠のオブジェクトを設定します。

    setObject 関数は次のようになります。 

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

    • jsonObject

      文字列

      検査対象のページのコンテキストで表示されるオブジェクト。呼び出し元（API クライアント）のコンテキストで評価されます。

    • rootTitle

      文字列（省略可）

      式ツリーのルートのタイトル（省略可）。

    • callback

      function 省略可

      callback パラメータは次のようになります。 

      () => void

  • setPage

    void

    サイドバー ペインに表示する HTML ページを設定します。

    setPage 関数は次のようになります。 

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

    • パス

      文字列

      サイドバー内に表示する拡張機能ページの相対パス。

SourcesPanel

[ソース] パネルを表します。

プロパティ

  • onSelectionChanged

    Event<functionvoidvoid>

    パネルでオブジェクトが選択されたときに発生します。

    onSelectionChanged.addListener 関数は次のようになります。 

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

    • callback

      関数

      callback パラメータは次のようになります。 

      () => void

  • createSidebarPane

    void

    パネルのサイドバー内にペインを作成します。

    createSidebarPane 関数は次のようになります。 

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

    • title

      文字列

      サイドバーのキャプションに表示されるテキスト。

    • callback

      function 省略可

      callback パラメータは次のようになります。 

      (result: ExtensionSidebarPane) => void

      • 件の結果

        ExtensionSidebarPane

        作成されたサイドバーペイン用の ExtensionSidebarPane オブジェクト。

プロパティ

elements

[要素] パネル。

タイプ

ElementsPanel

sources

[ソース] パネル。

タイプ

SourcesPanel

themeName

Chrome 59 以降

ユーザーの DevTools 設定で設定されたカラーテーマの名前。有効な値は、default（デフォルト）と dark です。

タイプ

文字列

メソッド

create()

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

拡張機能パネルを作成します。

パラメータ

  • title

    文字列

    デベロッパー ツール ツールバーの拡張機能アイコンの横に表示されるタイトル。

  • iconPath

    文字列

    拡張機能ディレクトリを基準とするパネルのアイコンのパス。

  • pagePath

    文字列

    拡張機能ディレクトリを基準とするパネルの HTML ページのパス。

  • callback

    function 省略可

    callback パラメータは次のようになります。 

    (panel: ExtensionPanel) => void

    • パネル

      ExtensionPanel

      作成されたパネルを表す ExtensionPanel オブジェクト。

openResource()

chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
)

デベロッパー ツール パネルで URL を開くようデベロッパー ツールにリクエストします。

パラメータ

  • URL

    文字列

    開くリソースの URL。

  • lineNumber

    数値

    リソースの読み込み時にスクロールする行番号を指定します。

  • columnNumber

    number（省略可）

    Chrome 114 以降

    リソースの読み込み時にスクロールする列番号を指定します。

  • callback

    function 省略可

    callback パラメータは次のようになります。 

    () => void

setOpenResourceHandler()

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

ユーザーがデベロッパー ツール ウィンドウでリソースリンクをクリックしたときに呼び出される関数を指定します。ハンドラを設定解除するには、パラメータなしでメソッドを呼び出すか、パラメータとして null を渡します。

パラメータ