chrome.devtools.panels

説明

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

各拡張機能パネルとサイドバーは、個別の HTML ページとして表示されます。デベロッパー ツール ウィンドウに表示されるすべての拡張機能ページから、chrome.devtools API のすべてのモジュールと chrome.extension API にアクセスできます。その他の拡張機能 API はデベロッパー ツール ウィンドウのページでは使用できませんが、コンテンツ スクリプトで行うのと同様に、拡張機能のバックグラウンド ページにリクエストを送信することで呼び出すことができます。

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

Developer Tools API の一般的な概要については、DevTools API の概要をご覧ください。

マニフェスト

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

"devtools_page"

例

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

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

次のコードは、Sidebar.html に含まれている「Font Properties」というタイトルのサイドバー ペインを [Elements] パネルに追加し、高さを 8ex に設定します。

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

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

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

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

型

Button

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

プロパティ

• onClicked

  イベント<functionvoidvoid>

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

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

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

  • callback

    機能

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

    ()=>void

• update

  void

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

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

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

  • iconPath

    string（省略可）

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

  • tooltipText

    string（省略可）

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

  • 無効

    ブール値（省略可）

    ボタンを無効にするかどうか。

ElementsPanel

[要素] パネルを表します。

プロパティ

• onSelectionChanged

  イベント<functionvoidvoid>

  パネルでオブジェクトが選択されたときに呼び出されます。

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

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

  • callback

    機能

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

    ()=>void

• createSidebarPane

  void

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

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

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

  • title

    文字列

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

  • callback

    関数（省略可）

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

    (result: ExtensionSidebarPane)=>void

    • 件の結果

      ExtensionSidebarPane

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

ExtensionPanel

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

プロパティ

• onHidden

  イベント<functionvoidvoid>

  ユーザーがパネルから離れたときに呼び出されます。

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

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

  • callback

    機能

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

    ()=>void

• onSearch

  イベント<functionvoidvoid>

  検索アクション（新しい検索の開始、検索結果のナビゲーション、または検索のキャンセル）に対して呼び出されます。

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

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

  • callback

    機能

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

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

    • action

      文字列

    • queryString

      string（省略可）

• onShown

  イベント<functionvoidvoid>

  ユーザーがパネルに切り替えたときに呼び出されます。

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

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

  • callback

    機能

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

    (window: Window)=>void

    • クリックします。

      ウィンドウ

• createStatusBarButton

  void

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

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

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

  • iconPath

    文字列

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

  • tooltipText

    文字列

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

  • 無効

    boolean

    ボタンを無効にするかどうか。

  • 戻り値

    ボタン

ExtensionSidebarPane

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

プロパティ

• onHidden

  イベント<functionvoidvoid>

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

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

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

  • callback

    機能

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

    ()=>void

• onShown

  イベント<functionvoidvoid>

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

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

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

  • callback

    機能

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

    (window: Window)=>void

    • クリックします。

      ウィンドウ

• setExpression

  void

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

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

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

  • 式

    文字列

    検査対象のページのコンテキストで評価される式。JavaScript オブジェクトと DOM ノードは、console/watch のような展開可能なツリーで表示されます。

  • rootTitle

    string（省略可）

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

  • callback

    関数（省略可）

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

    ()=>void

• setHeight

  void

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

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

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

  • 身長

    文字列

    CSS のようなサイズ指定（'100px'、'12ex' など）。

• setObject

  void

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

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

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

  • jsonObject

    文字列

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

  • rootTitle

    string（省略可）

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

  • callback

    関数（省略可）

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

    ()=>void

• setPage

  void

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

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

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

  • パス

    文字列

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

SourcesPanel

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

プロパティ

• onSelectionChanged

  イベント<functionvoidvoid>

  パネルでオブジェクトが選択されたときに呼び出されます。

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

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

  • callback

    機能

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

    ()=>void

• createSidebarPane

  void

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

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

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

  • title

    文字列

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

  • callback

    関数（省略可）

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

    (result: ExtensionSidebarPane)=>void

    • 件の結果

      ExtensionSidebarPane

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

プロパティ

elements

[要素] パネル。

タイプ

ElementsPanel

sources

ソースパネル。

タイプ

SourcesPanel

themeName

Chrome 59 以降

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

タイプ

文字列

Methods

create()

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

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

パラメータ

• title

  文字列

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

• iconPath

  文字列

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

• pagePath

  文字列

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

• callback

  関数（省略可）

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

  (panel: ExtensionPanel)=>void

  • パネル

    ExtensionPanel

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

openResource()

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

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

パラメータ

• URL

  文字列

  開くリソースの URL。

• lineNumber

  数値

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

• columnNumber

  number（省略可）

  Chrome 114 以降

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

• callback

  関数（省略可）

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

  ()=>void

setOpenResourceHandler()

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

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

パラメータ

• callback

  関数（省略可）

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

  (resource: Resource)=>void

  • resource

    リソース

    クリックされたリソースの devtools.inspectedWindow.Resource オブジェクト。