browser.debugger

説明

chrome.debugger API は、Chrome のリモート デバッグ プロトコルの代替トランスポートとして機能します。chrome.debugger を使用して 1 つ以上のタブにアタッチし、ネットワーク インタラクションの計測、JavaScript のデバッグ、DOM と CSS の変更などを行います。Debuggee プロパティ tabId を使用して、sendCommand でタブをターゲットに設定し、onEvent コールバックから tabId でイベントをルーティングします。

権限

debugger

この API を使用するには、拡張機能のマニフェストで "debugger" 権限を宣言する必要があります。

{
  "name": "My extension",
  ...
  "permissions": [
    "debugger",
  ],
  ...
}

エンタープライズ ポリシーの制限

企業向けデバイスでは、一部のポリシーにより、拡張機能がアタッチ時にオール オア ナッシング モデルを使用してデバッガをアタッチすることを制限できます（browser.debugger.attach()）。

  • ホストの制限: エンタープライズ ポリシー ExtensionSettings で拡張機能に対してブロックされたホスト（runtime_blocked_hosts）が構成されている場合、browser.debugger.attach() はすべてのターゲットでブロックされ、エラー "Host access is restricted by policy." が発生します（個々のオリジンが runtime_allowed_hosts にある場合でも同様です）。
  • スクリーンショットと DLP ポリシー: エンタープライズ ポリシー DisableScreenshots でスクリーンショットのキャプチャが無効になっている場合、またはデータ損失防止（DLP）ルールがターゲットに適用されている場合、browser.debugger.attach() はエラー "Screenshot capture is restricted by policy." で失敗します。

コンセプトと使用方法

アタッチすると、browser.debugger API を使用して、指定されたターゲットに Chrome DevTools Protocol（CDP）コマンドを送信できます。CDP の詳細については、このドキュメントでは説明しません。CDP の詳細については、公式の CDP ドキュメントをご覧ください。

ターゲット

ターゲットは、デバッグ対象を表します。これには、タブ、iframe、ワーカーなどが含まれます。各ターゲットは UUID で識別され、関連付けられたタイプ（iframe、shared_worker など）があります。

1 つのターゲット内に複数の実行コンテキストが存在する場合があります。たとえば、同じプロセスの iframe は一意のターゲットを取得せず、代わりに 1 つのターゲットからアクセスできる異なるコンテキストとして表されます。

制限付きドメイン

セキュリティ上の理由から、browser.debugger API はすべての Chrome DevTools プロトコル ドメインへのアクセスを提供していません。使用可能なドメインは、Accessibility、Audits、CacheStorage、Console、CSS、Database、Debugger、DOM、DOMDebugger、DOMSnapshot、Emulation、Fetch、IO、Input、Inspector、Log、Network、Overlay、Page、Performance、Runtime、Storage、Target、Tracing、WebAudio、WebAuthn です。

フレームを操作する

フレームとターゲットは 1 対 1 でマッピングされていません。1 つのタブ内で、複数の同じプロセス フレームが同じターゲットを共有しながら、異なる実行コンテキストを使用することがあります。一方、プロセス外の iframe に新しいターゲットが作成されることもあります。

すべてのフレームにアタッチするには、フレームの種類ごとに個別に処理する必要があります。

  • Runtime.executionContextCreated イベントをリッスンして、同じプロセス フレームに関連付けられた新しい実行コンテキストを特定します。

  • 手順に沿って関連するターゲットにアタッチし、プロセス外フレームを特定します。

ターゲットに接続した後、プロセス外の子フレームや関連するワーカーなど、関連するターゲットに接続することがあります。

Chrome 125 以降、browser.debugger API はフラット セッションをサポートしています。これにより、メインのデバッガ セッションに子として追加のターゲットを追加し、browser.debugger.attach を再度呼び出すことなくメッセージを送信できます。代わりに、browser.debugger.sendCommand を呼び出すときに sessionId プロパティを追加して、コマンドを送信する子ターゲットを識別できます。

プロセス外の子フレームに自動的にアタッチするには、まず Target.attachedToTarget イベントのリスナーを追加します。

browser.debugger.onEvent.addListener((source, method, params) => {
  if (method === "Target.attachedToTarget") {
    // `source` identifies the parent session, but we need to construct a new
    // identifier for the child session
    const session = { ...source, sessionId: params.sessionId };

    // Call any needed CDP commands for the child session
    await browser.debugger.sendCommand(session, "Runtime.enable");
  }
});

次に、flatten オプションを true に設定した Target.setAutoAttach コマンドを送信して、自動アタッチを有効にします。

await browser.debugger.sendCommand({ tabId }, "Target.setAutoAttach", {
  autoAttach: true,
  waitForDebuggerOnStart: false,
  flatten: true,
  filter: [{ type: "iframe", exclude: false }]
});

自動アタッチは、ターゲットが認識しているフレームにのみアタッチされます。これは、ターゲットに関連付けられているフレームの直接の子であるフレームに限定されます。たとえば、フレーム階層 A -> B -> C（すべてクロスオリジン）の場合、A に関連付けられたターゲットに対して Target.setAutoAttach を呼び出すと、セッションも B にアタッチされます。ただし、これは再帰的ではないため、B がセッションを C にアタッチするには、Target.setAutoAttach も呼び出す必要があります。

例

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

型

Debuggee

デバッグ対象の識別子。tabId、extensionId、targetId のいずれかを指定する必要があります

プロパティ

  • extensionId

    文字列 省略可

    デバッグする拡張機能の ID。拡張機能のバックグラウンド ページにアタッチできるのは、--silent-debugger-extension-api コマンドライン スイッチを使用する場合のみです。

  • tabId

    number 省略可

    デバッグするタブの ID。

  • targetId

    文字列 省略可

    デバッグ ターゲットの不透明な ID。

DebuggerSession

Chrome 125 以降 Chrome 148 以降の browser.*

デバッガ セッション ID。tabId、extensionId、targetId のいずれかを指定する必要があります。また、オプションで sessionId を指定することもできます。onEvent から送信された引数に sessionId が指定されている場合、イベントはルート デバッグ対象セッション内の子プロトコル セッションから送信されています。sendCommand に渡されるときに sessionId が指定されている場合、ルート デバッグ対象セッション内の子プロトコル セッションをターゲットにします。

プロパティ

  • extensionId

    文字列 省略可

    デバッグする拡張機能の ID。拡張機能のバックグラウンド ページにアタッチできるのは、--silent-debugger-extension-api コマンドライン スイッチを使用する場合のみです。

  • sessionId

    文字列 省略可

    Chrome DevTools Protocol セッションの不透明な ID。tabId、extensionId、または targetId で識別されるルート セッション内の子セッションを識別します。

  • tabId

    number 省略可

    デバッグするタブの ID。

  • targetId

    文字列 省略可

    デバッグ ターゲットの不透明な ID。

DetachReason

Chrome 44 以降 Chrome 148 以降の browser.*

接続終了の理由。

列挙型

"target_closed"

"canceled_by_user"

TargetInfo

デバッグ ターゲット情報

プロパティ

  • attached

    ブール値

    デバッガがすでにアタッチされている場合は true。

  • extensionId

    文字列 省略可

    拡張機能 ID。type = 'background_page' の場合に定義されます。

  • faviconUrl

    文字列 省略可

    ターゲットのファビコン URL。

  • id

    文字列

    ターゲット ID。

  • tabId

    number 省略可

    タブ ID。type == 'page' の場合に定義されます。

  • title

    文字列

    ターゲット ページのタイトル。

  • ターゲット タイプ。

  • URL

    文字列

    ターゲット URL。

TargetInfoType

Chrome 44 以降 Chrome 148 以降の browser.*

ターゲット タイプ。

列挙型

"page"

"background_page"

"worker"

"other"

メソッド

attach()

browser.debugger.attach(
  target: Debuggee,
  requiredVersion: string,
): Promise<void>

指定されたターゲットにデバッガをアタッチします。

パラメータ

  • ターゲット

    デバッグ対象

    アタッチするデバッグ ターゲット。

  • requiredVersion

    文字列

    必須のデバッグ プロトコル バージョン（「0.1」）。メジャー バージョンが一致し、マイナー バージョンが同じかそれ以降のデバッグ対象にのみアタッチできます。プロトコル バージョンのリストはこちらで確認できます。

戻り値

  • Promise<void>

    Chrome 96 以降 Chrome 148 以降の browser.*

    アタッチ オペレーションが成功または失敗すると解決されます。Promise は値なしで解決されます。アタッチが失敗した場合、Promise は拒否されます。

detach()

browser.debugger.detach(
  target: Debuggee,
): Promise<void>

指定されたターゲットからデバッガをデタッチします。

パラメータ

戻り値

  • Promise<void>

    Chrome 96 以降 Chrome 148 以降の browser.*

    切断オペレーションが成功または失敗すると解決されます。Promise は値なしで解決されます。デタッチが失敗すると、Promise は拒否されます。

getTargets()

browser.debugger.getTargets(): Promise<TargetInfo[]>

使用可能なデバッグ ターゲットのリストを返します。

戻り値

  • Promise<TargetInfo[]>

    Chrome 96 以降 Chrome 148 以降の browser.*

sendCommand()

browser.debugger.sendCommand(
  target: DebuggerSession,
  method: string,
  commandParams?: object,
): Promise<object | undefined>

指定されたコマンドをデバッグ ターゲットに送信します。

パラメータ

  • ターゲット

    DebuggerSession

    コマンドの送信先となるデバッグ ターゲット。

  • method

    文字列

    メソッド名。リモート デバッグ プロトコルで定義されているメソッドのいずれかである必要があります。

  • commandParams

    オブジェクト（省略可）

    リクエスト パラメータを含む JSON オブジェクト。このオブジェクトは、指定されたメソッドのリモート デバッグ パラメータ スキームに準拠している必要があります。

戻り値

  • Promise<object | undefined>

    Chrome 96 以降 Chrome 148 以降の browser.*

    レスポンス本文。メッセージの投稿中にエラーが発生すると、Promise は拒否されます。

イベント

onDetach

browser.debugger.onDetach.addListener(
  callback: function,
)

ブラウザがタブのデバッグ セッションを終了したときに呼び出されます。これは、タブが閉じられるか、接続されたタブに対して Chrome DevTools が呼び出されたときに発生します。

パラメータ

onEvent

browser.debugger.onEvent.addListener(
  callback: function,
)

デバッグ ターゲットがインストルメンテーション イベントを発行するたびに呼び出されます。

パラメータ

  • callback

    関数

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

    (source: DebuggerSession, method: string, params?: object) => void

    • ソース

      DebuggerSession

    • method

      文字列

    • params

      オブジェクト（省略可）