chrome.devtools.panels

説明

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

マニフェスト

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

"devtools_page"

デベロッパー ツール API の使用方法の概要については、DevTools API の概要をご覧ください。

概要

拡張機能パネルとサイドバーはそれぞれ個別の HTML ページとして表示されます。すべての拡張機能ページを表示しています デベロッパー ツール ウィンドウを開くと、chrome.devtools API のすべてのモジュールと chrome.extension API。Developer 内のページでは他の拡張機能 API を使用できない 拡張機能のバックグラウンド ページにリクエストを送信して起動できます。 コンテンツ スクリプトと同様の処理を行います。

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

例

次のコードは、FontPicker.png で表される Panel.html に含まれるパネルを [Font Picker] というラベルが付いたデベロッパー ツールのツールバー:

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

次のコードは、Sidebar.html に含まれ、「Font Properties」というタイトルのサイドバー ペインを 次に、その高さを 8ex に設定します。

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

上のスクリーンショットは、デベロッパー ツールのウィンドウに上記の例がどのように影響するかを示しています。

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

この API を試すには、chrome-extension-samples から devtools パネルの 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

      関数（省略可）

      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 つの 32×24 のアイコンで構成される 64×24 ピクセルの画像を含めます。左のアイコンは、ボタンがアクティブでないときに使用します。ボタンを押すと右のアイコンが表示されます。

    • 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

      関数（省略可）

      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

      関数（省略可）

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

      () => void

  • setPage

    void

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

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

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

    • パス

      文字列

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

SourcesPanel

[Sources] パネルを表します。

プロパティ

  • onSelectionChanged

    Event<functionvoidvoid>

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

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

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

    • callback

      関数

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

      () => void

  • createSidebarPane

    void

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

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

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

    • title

      文字列

      サイドバーの説明に表示されるテキスト。

    • callback

      関数（省略可）

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

      (result: ExtensionSidebarPane) => void

      • 件の結果

        ExtensionSidebarPane

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

プロパティ

elements

[Elements] パネル。

タイプ

ElementsPanel

sources

[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

    関数（省略可）

    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

    数値（省略可）

    Chrome 114 以降

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

  • callback

    関数（省略可）

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

    () => void

setOpenResourceHandler()

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

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

パラメータ