chrome.devtools.panels

説明

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

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

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

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

マニフェスト

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

"devtools_page"

例

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

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 ツールバーの拡張機能アイコンパネル
DevTools ツールバーの拡張機能アイコンパネル。

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

型

Button

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

プロパティ

  • onClicked

    イベント<functionvoidvoid>

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

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

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

    • callback

      関数

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

      () => void

  • update

    void

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

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

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

    • iconPath

      文字列 省略可

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

    • tooltipText

      文字列 省略可

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

    • 無効

      boolean 省略可

      ボタンが無効かどうか。

ElementsPanel

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

プロパティ

  • onSelectionChanged

    イベント<functionvoidvoid>

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

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

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

    • callback

      関数

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

      () => void

  • createSidebarPane

    void

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

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

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

    • title

      文字列

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

    • 戻り値

      Promise<ExtensionSidebarPane>

      Chrome 152 以降

      サイドバーの作成時に呼び出されるコールバック。

ExtensionPanel

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

プロパティ

  • onHidden

    イベント<functionvoidvoid>

    ユーザーがパネルから切り替えたときに発生します。

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

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

    • callback

      関数

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

      () => void

  • onSearch

    イベント<functionvoidvoid>

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

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

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

    • callback

      関数

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

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

      • アクション

        文字列

      • queryString

        文字列 省略可

  • 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

      文字列

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

    • 無効

      ブール値

      ボタンが無効かどうか。

  • 表示する

    void

    Chrome 140 以降 Chrome 152 以降の browser.*

    対応するタブを有効にしてパネルを表示します。

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

    () => {...}

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) => {...}

    • 式

      文字列

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

    • rootTitle

      文字列 省略可

      式ツリーのルートのオプションのタイトル。

    • 戻り値

      Promise<void>

      Chrome 152 以降

      式の評価結果でサイドバー ペインが更新された後に呼び出されるコールバック。

  • setHeight

    void

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

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

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

    • height

      文字列

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

  • setObject

    void

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

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

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

    • jsonObject

      文字列

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

    • rootTitle

      文字列 省略可

      式ツリーのルートのオプションのタイトル。

    • 戻り値

      Promise<void>

      Chrome 152 以降

      オブジェクトでサイドバーが更新された後に呼び出されるコールバック。

  • setPage

    void

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

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

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

    • パス

      文字列

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

SourcesPanel

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

プロパティ

  • onSelectionChanged

    イベント<functionvoidvoid>

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

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

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

    • callback

      関数

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

      () => void

  • createSidebarPane

    void

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

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

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

    • title

      文字列

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

    • 戻り値

      Promise<ExtensionSidebarPane>

      Chrome 152 以降

      サイドバーの作成時に呼び出されるコールバック。

Theme

Chrome 99 以降 browser.*（Chrome 152 以降）

DevTools で使用されるテーマ。

列挙型

"default"
デフォルトの DevTools テーマ。これは常にライトモードです。

"dark"
ダークモード。

プロパティ

elements

[要素] パネル。

タイプ

ElementsPanel

sources

[ソース] パネル。

タイプ

SourcesPanel

themeName

Chrome 59 以降 Chrome 152 以降の browser.*

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

タイプ

文字列

メソッド

create()

browser.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
): Promise<ExtensionPanel>

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

パラメータ

  • title

    文字列

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

  • iconPath

    文字列

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

  • pagePath

    文字列

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

戻り値

  • Promise<ExtensionPanel>

    Chrome 152 以降

    パネルの作成時に呼び出される関数。

openResource()

browser.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
): Promise<void>

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

パラメータ

  • URL

    文字列

    開くリソースの URL。

  • lineNumber

    数値

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

  • columnNumber

    number 省略可

    Chrome 114 以降 Chrome 152 以降の browser.*

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

戻り値

  • Promise<void>

    Chrome 152 以降

    リソースが正常に読み込まれたときに呼び出される関数。

setOpenResourceHandler()

browser.devtools.panels.setOpenResourceHandler(
  callback?: function,
): void

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

パラメータ

  • callback

    function 省略可

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

    (resource: Resource, lineNumber: number) => void

setThemeChangeHandler()

Chrome 99 以降 browser.*（Chrome 152 以降） 
browser.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

DevTools で現在のテーマが変更されたときに呼び出される関数を指定します。ハンドラの設定を解除するには、パラメータを指定せずにメソッドを呼び出すか、パラメータとして null を渡します。

パラメータ

  • callback

    function 省略可

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

    (theme: Theme) => void

    • テーマ

      テーマ

      DevTools の現在のテーマ。