説明
chrome.devtools.inspectedWindow API を使用して、検査対象のウィンドウを操作します。検査対象のページのタブ ID を取得したり、検査対象のウィンドウのコンテキストでコードを評価したり、ページを再読み込みしたり、ページ内のリソースのリストを取得したりできます。
デベロッパー ツール API の使用に関する一般的な概要については、DevTools API の概要をご覧ください。
tabId プロパティは、chrome.tabs.* API 呼び出しで使用できるタブ識別子を提供します。ただし、セキュリティ上の理由から、chrome.tabs.* API はデベロッパー ツール拡張機能ページには公開されていません。タブ ID をバックグラウンド ページに渡し、そこから chrome.tabs.* API 関数を呼び出す必要があります。
reload メソッドを使用して、検査対象のページを再読み込みできます。また、呼び出し元は、ユーザー エージェント文字列のオーバーライド、ページ読み込み時に早期に挿入されるスクリプト、キャッシュに保存されたリソースの強制再読み込みのオプションを指定できます。
getResources 呼び出しと onResourceContent イベントを使用して、検査対象のページ内のリソース（ドキュメント、スタイルシート、スクリプト、画像など）のリストを取得します。Resource クラスの getContent メソッドと setContent メソッド、および onResourceContentCommitted イベントは、リソース コンテンツの変更（外部エディタによる変更など）をサポートするために使用できます。
マニフェスト
検査ウィンドウでコードを実行する
eval メソッドを使用すると、拡張機能は検査対象のページのコンテキストで JavaScript コードを実行できます。このメソッドは、適切なコンテキストで使用すると強力ですが、不適切に使用すると危険です。eval メソッドが提供する特定の機能が必要な場合を除き、tabs.executeScript メソッドを使用します。
eval メソッドと tabs.executeScript メソッドの主な違いは次のとおりです。
evalメソッドは、評価されるコードに分離されたワールドを使用しないため、検査対象のウィンドウの JavaScript 状態にコードからアクセスできます。検査対象ページの JavaScript 状態へのアクセスが必要な場合は、このメソッドを使用します。- 評価されるコードの実行コンテキストには、デベロッパー ツールのコンソール API が含まれます。たとえば、コードで
inspectと$0を使用できます。 - 評価されたコードは、拡張機能のコールバックに渡される値を返すことがあります。戻り値は有効な JSON オブジェクトである必要があります（プリミティブな JavaScript 型と、他の JSON オブジェクトへの非循環参照のみを含めることができます）。検査対象のページから受け取ったデータを処理する際は、特に注意してください。実行コンテキストは基本的に検査対象のページによって制御されます。悪意のあるページは、拡張機能に返されるデータに影響を与える可能性があります。
1 つのページに複数の異なる JavaScript 実行コンテキストを含めることができます。各フレームには独自のコンテキストがあり、そのフレームでコンテンツ スクリプトを実行している拡張機能ごとにコンテキストが追加されます。
デフォルトでは、eval メソッドは検査対象ページのメインフレームのコンテキストで実行されます。
eval メソッドは、コードが評価されるコンテキストを指定するために使用できるオプションの 2 番目の引数を取ります。この options オブジェクトには、次のキーを 1 つ以上含めることができます。
frameURL- 検査対象ページのメインフレーム以外のフレームを指定するために使用します。
contextSecurityOrigin- 指定されたフレーム内のコンテキストを、そのウェブにおけるオリジンに基づいて選択するために使用します。
useContentScriptContext- true の場合、拡張機能のコンテンツ スクリプトと同じコンテキストでスクリプトを実行します。（拡張機能独自のウェブにおけるオリジンをコンテキスト セキュリティ オリジンとして指定するのと同等です）。これは、コンテンツ スクリプトとのデータ交換に使用できます。
例
次のコードは、検査対象のページで使用されている jQuery のバージョンを確認します。
chrome.devtools.inspectedWindow.eval(
"jQuery.fn.jquery",
function(result, isException) {
if (isException) {
console.log("the page is not using jQuery");
} else {
console.log("The page is using jQuery v" + result);
}
}
);
この API を試すには、chrome-extension-samples リポジトリから devtools API のサンプルをインストールします。
型
Resource
検査対象のページ内のリソース（ドキュメント、スクリプト、画像など）。
プロパティ
-
URL
文字列
リソースの URL。
-
getContent
void
リソースのコンテンツを取得します。
getContent関数は次のようになります。(callback: function) => {...}
-
callback
関数
callbackパラメータは次のようになります。(content: string, encoding: string) => void
-
コンテンツ
文字列
リソースの内容（エンコードされている可能性あり）。
-
encoding
文字列
コンテンツがエンコードされていない場合は空、それ以外の場合はエンコード名。現時点では base64 のみがサポートされています。
-
-
-
setContent
void
リソースのコンテンツを設定します。
setContent関数は次のようになります。(content: string, commit: boolean, callback?: function) => {...}
-
コンテンツ
文字列
リソースの新しいコンテンツ。現在サポートされているのは、テキスト タイプのリソースのみです。
-
commit
ブール値
ユーザーがリソースの編集を完了し、リソースの新しいコンテンツを永続化する必要がある場合は true。ユーザーがリソースの編集中に送信された軽微な変更の場合は false。
-
callback
関数 省略可
callbackパラメータは次のようになります。(error?: object) => void
-
エラー
オブジェクト 省略可
リソース コンテンツが正常に設定された場合は未定義に設定します。それ以外の場合はエラーを説明します。
-
-
プロパティ
tabId
検査対象のタブの ID。この ID は chrome.tabs.* で使用できます。ウェブベースのツールです
タイプ
数値
メソッド
eval()
chrome.devtools.inspectedWindow.eval(
expression: string,
options?: object,
callback?: function,
): void
検査対象ページのメインフレームのコンテキストで JavaScript 式を評価します。式は JSON 準拠のオブジェクトとして評価される必要があります。そうでない場合は例外がスローされます。eval 関数は、DevTools 側のエラーまたは評価中に発生した JavaScript 例外を報告できます。どちらの場合も、コールバックの result パラメータは undefined です。DevTools 側のエラーの場合、isException パラメータは null ではなく、isError が true に設定され、code がエラーコードに設定されます。JavaScript エラーの場合、isException は true に設定され、value はスローされたオブジェクトの文字列値に設定されます。
パラメータ
-
式
文字列
評価する式。
-
オプション
オブジェクト 省略可
options パラメータには 1 つ以上のオプションを指定できます。
-
frameURL
文字列 省略可
指定した場合、式は、指定された URL と一致する URL を持つ iframe で評価されます。デフォルトでは、式は検査対象ページの最上位フレームで評価されます。
-
scriptExecutionContext
文字列 省略可
Chrome 107 以降指定されたオリジンに一致する拡張機能のコンテンツ スクリプトのコンテキストで式を評価します。指定された場合、scriptExecutionContext は useContentScriptContext の「true」設定をオーバーライドします。
-
useContentScriptContext
boolean 省略可
コンテンツ スクリプトがすでに検査対象のページに挿入されている場合、呼び出し元の拡張機能のコンテンツ スクリプトのコンテキストで式を評価します。そうでない場合、式は評価されず、コールバックは例外パラメータが、
isErrorフィールドが true に設定され、codeフィールドがE_NOTFOUNDに設定されたオブジェクトに設定されて呼び出されます。
-
-
callback
関数 省略可
callbackパラメータは次のようになります。(result: object, exceptionInfo: object) => void
-
件の結果
オブジェクト
評価の結果。
-
exceptionInfo
オブジェクト
式の評価中に例外が発生した場合に詳細を提供するオブジェクト。
-
コード
文字列
式が評価される前に DevTools 側でエラーが発生したかどうかを設定します。
-
説明
文字列
式が評価される前に DevTools 側でエラーが発生したかどうかを設定します。
-
詳細
any[]
式が評価される前に DevTools 側でエラーが発生した場合に設定されます。エラーの原因に関する詳細情報を提供するために、説明文字列に代入される可能性のある値の配列が含まれます。
-
isError
ブール値
式が評価される前に DevTools 側でエラーが発生したかどうかを設定します。
-
isException
ブール値
評価されたコードで未処理の例外が発生するかどうかを設定します。
-
値
文字列
評価されたコードで未処理の例外が発生するかどうかを設定します。
-
-
getResources()
chrome.devtools.inspectedWindow.getResources(
callback: function,
): void
検査したページからリソースのリストを取得します。
reload()
chrome.devtools.inspectedWindow.reload(
reloadOptions?: object,
): void
検査対象のページを再読み込みします。
パラメータ
-
reloadOptions
オブジェクト 省略可
-
ignoreCache
boolean 省略可
true の場合、ローダーは
loadイベントが発火する前に読み込まれたすべての検査対象ページ リソースのキャッシュをバイパスします。この効果は、検査対象のウィンドウまたはデベロッパー ツール ウィンドウ内で Ctrl+Shift+R キーを押す場合と同様です。 -
injectedScript
文字列 省略可
指定した場合、スクリプトは検査対象ページのすべてのフレームに、フレームのスクリプトの前に読み込み直後に挿入されます。その後、ユーザーが Ctrl+R キーを押すなどしてページを再読み込みしても、スクリプトは挿入されません。
-
userAgent
文字列 省略可
指定すると、検査対象ページの読み込み時に送信される
User-AgentHTTP ヘッダーの値が文字列でオーバーライドされます。この文字列は、検査対象のページ内で実行されているスクリプトに返されるnavigator.userAgentプロパティの値もオーバーライドします。
-
イベント
onResourceAdded
chrome.devtools.inspectedWindow.onResourceAdded.addListener(
callback: function,
)
検査対象のページに新しいリソースが追加されたときに発生します。
onResourceContentCommitted
chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(
callback: function,
)
リソースの新しいリビジョンがコミットされたときに発生します（例: ユーザーがデベロッパー ツールでリソースの編集バージョンを保存した場合）。