説明
chrome.devtools.panels
API を使用して、デベロッパー ツール ウィンドウの UI に拡張機能を統合できます。独自のパネルの作成、既存のパネルへのアクセス、サイドバーの追加が可能です。
マニフェスト
Developer Tools API の一般的な概要については、DevTools API の概要をご覧ください。
概要
各拡張機能パネルとサイドバーは、個別の HTML ページとして表示されます。デベロッパー ツール ウィンドウに表示されるすべての拡張機能ページから、chrome.devtools
API のすべてのモジュールと chrome.extension API にアクセスできます。その他の拡張機能 API はデベロッパー ツール ウィンドウのページでは使用できませんが、コンテンツ スクリプトで行うのと同様に、拡張機能のバックグラウンド ページにリクエストを送信することで呼び出すことができます。
devtools.panels.setOpenResourceHandler
メソッドを使用して、リソースを開くためのユーザー リクエスト(通常はデベロッパー ツール ウィンドウ内のリソースリンクのクリック)を処理するコールバック関数をインストールできます。インストールされているハンドラのうち最大 1 つが呼び出されます。ユーザーは、デベロッパー ツールの [設定] ダイアログを使用して、リソースのオープン リクエストを処理するためのデフォルトの動作または拡張機能を指定できます。拡張機能が setOpenResourceHandler()
を複数回呼び出した場合、最後のハンドラのみが保持されます。
例
次のコードは、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");
}
);
次のスクリーンショットは、上の例が [Developer Tools] ウィンドウに与える影響を示しています。
この 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 オブジェクト。
-
-
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 オブジェクト。
-
-
プロパティ
elements
[要素] パネル。
タイプ
sources
ソースパネル。
タイプ
themeName
ユーザーの 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 オブジェクト。
-
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
オブジェクト。
-