chrome.devtools.inspectedWindow

更新日: 2026-09-25 robots: noindex

説明

chrome.devtools.inspectedWindow API を使用して、検査対象のウィンドウを操作します。検査対象のページのタブ ID を取得する、検査対象のウィンドウのコンテキストでコードを評価する、ページを再読み込みする、ページ内のリソースのリストを取得する、などの操作を行います。

マニフェスト

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

"devtools_page"

chrome.devtools.inspectedWindow を使用して、検査対象のウィンドウを操作します。検査対象のページのタブ ID を取得する、検査対象のウィンドウのコンテキストでコードを評価する、ページを再読み込みする、ページ内のリソースのリストを取得する、などを行います。

デベロッパー ツール API の使用に関する一般的な概要については、デベロッパー ツール 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

    Promise

    リソースのコンテンツを取得します。

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

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

    • callback

      function 省略可

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

      (response: object) => void

      • レスポンス

        オブジェクト

        Chrome 151 以降

        リソースのコンテンツとそのエンコードを含むオブジェクト。

        • コンテンツ

          文字列

          リソースのコンテンツ（エンコードされている可能性があります）。

        • encoding

          文字列

          コンテンツがエンコードされていない場合は空。それ以外の場合はエンコード名。現在、base64 のみがサポートされています。

    • 戻り値

      Promise<object>

      Chrome 151 以降

      リクエストの完了時にリソース コンテンツを受け取る関数。

      Promise は Manifest V3 以降でのみサポートされています。他のプラットフォームではコールバックを使用する必要があります。

  • setContent

    void

    Promise

    リソースのコンテンツを設定します。

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

    (content: string, commit: boolean, callback?: function) => {...}

    • コンテンツ

      文字列

      リソースの新しいコンテンツ。現在、テキストタイプのリソースのみがサポートされています。

    • commit

      ブール値

      ユーザーがリソースの編集を完了し、リソースの新しいコンテンツを永続化する必要がある場合は true。ユーザーがリソースの編集を進行中に送信された軽微な変更の場合は false。

    • callback

      function 省略可

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

      (error?: object) => void

      • エラー

        オブジェクト（省略可）

        リソース コンテンツが正常に設定された場合は undefined に設定されます。それ以外の場合はエラーが記述されます。

    • 戻り値

      Promise<object>

      Chrome 151 以降

      リクエストの完了時に呼び出される関数。

      Promise は Manifest V3 以降でのみサポートされています。他のプラットフォームではコールバックを使用する必要があります。

プロパティ

tabId

検査対象のタブの ID。この ID は、chrome.tabs.* 該当します

タイプ

数値

メソッド

eval()

Promise 
chrome.devtools.inspectedWindow.eval(
  expression: string,
  options?: object,
  callback?: function,
): Promise<object>

検査対象のページのメインフレームのコンテキストで 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

    function 省略可

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

    (response: object) => void

    • レスポンス

      オブジェクト

      Chrome 151 以降

      評価結果と例外情報。

      • exceptionInfo

        オブジェクト

        式の評価中に例外が発生した場合に詳細を提供するオブジェクト。

        • コード

          文字列

          式が評価される前に DevTools 側でエラーが発生したかどうかを設定します。

        • 説明

          文字列

          式が評価される前に DevTools 側でエラーが発生したかどうかを設定します。

        • 詳細

          any[]

          式の評価前に DevTools 側でエラーが発生した場合に設定されます。エラーの原因に関する詳細情報を提供するために、説明文字列に置き換えられる可能性のある値の配列が含まれます。

        • isError

          ブール値

          式が評価される前に DevTools 側でエラーが発生したかどうかを設定します。

        • isException

          ブール値

          評価されたコードが未処理の例外を生成する場合に設定します。

        • 値

          文字列

          評価されたコードが未処理の例外を生成する場合に設定します。

      • 件の結果

        オブジェクト

        評価の結果。

戻り値

  • Promise<object>

    Chrome 151 以降

    評価の完了時に呼び出される関数。

    Promise は Manifest V3 以降でのみサポートされています。他のプラットフォームではコールバックを使用する必要があります。

getResources()

Promise 
chrome.devtools.inspectedWindow.getResources(
  callback?: function,
): Promise<Resource[]>

検査対象のページからリソースのリストを取得します。

パラメータ

  • callback

    function 省略可

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

    (resources: Resource[]) => void

    • リソース

      Resource[]

      ページ内のリソース。

戻り値

  • Promise<Resource[]>

    Chrome 151 以降

    リクエストの完了時にリソースのリストを受け取る関数。

    Promise は Manifest V3 以降でのみサポートされています。他のプラットフォームではコールバックを使用する必要があります。

reload()

chrome.devtools.inspectedWindow.reload(
  reloadOptions?: object,
): void

検査対象のページを再読み込みします。

パラメータ

  • reloadOptions

    オブジェクト（省略可）

    • ignoreCache

      boolean 省略可

      true の場合、ローダーは、load イベントが発生する前に読み込まれたすべての検査対象ページリソースのキャッシュをバイパスします。この効果は、検査対象のウィンドウまたはデベロッパー ツール ウィンドウ内で Ctrl+Shift+R キーを押した場合と同様です。

    • injectedScript

      文字列 省略可

      指定すると、スクリプトは、フレームのスクリプトの前に、読み込み直後に検査対象ページのすべてのフレームに挿入されます。スクリプトは、その後の再読み込み（ユーザーが Ctrl+R キーを押した場合など）の後には挿入されません。

    • userAgent

      文字列 省略可

      指定すると、この文字列は、検査対象のページのリソースの読み込み中に送信される User-Agent HTTP ヘッダーの値をオーバーライドします。この文字列は、検査対象のページ内で実行されているスクリプトに返される navigator.userAgent プロパティの値もオーバーライドします。

イベント

onResourceAdded

chrome.devtools.inspectedWindow.onResourceAdded.addListener(
  callback: function,
)

検査対象のページに新しいリソースが追加されたときに呼び出されます。

パラメータ

  • callback

    関数

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

    (resource: Resource) => void

onResourceContentCommitted

chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(
  callback: function,
)

リソースの新しいリビジョンが commit されたときに発生します（例: ユーザーがデベロッパー ツールでリソースの編集済みバージョンを保存したとき）。

パラメータ

  • callback

    関数

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

    (resource: Resource, content: string) => void