chrome.devtools.panels

説明

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

拡張機能パネルとサイドバーはそれぞれ個別の HTML ページとして表示されます。すべての拡張機能ページを表示しています chrome.devtools API のすべての部分とすべての部分にアクセスできます。 できます。

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

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

マニフェスト

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

"devtools_page"

例

次のコードは、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");
  }
);

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

<ph type="x-smartling-placeholder">
</ph> DevTools ツールバーの拡張機能アイコン パネル 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 を渡します。

パラメータ