Zenn
📌

Chrome拡張機能のChrome.debugger APIについてまとめてみた

2023/02/15に公開
JavaScript
tech

初投稿になるのでいろいろ拙い部分もあると思いますがご了承ください。
こうした方がいいなどあれば今後の参考にさせていただきます。

chrome.debugger APIに関しての日本語の文書がなかったため自分なりにまとめてみました。

公式ドキュメントはこちら

はじめに:chrome.debugger APIとは
Chromeの拡張機能のAPIの一つで、Chrome Devtools Protocolを拡張機能上で動作させるものです。かみ砕いていえば、拡張機能からその内容に対してアクセスできるようになるものです。
セキュリティの観点から一部の機能に関しては干渉することができませんが、開発者ツールを開くことなく開発者ツールの内容にアクセスすることができます。

使用の前提条件
拡張機能ではよくある話ですが、manifest.jsonにおいてdebuggerの許可を明示する必要があります。

{
	~~~~~
	"permissions":[
		"debugger"
	]
	~~~~~
}

接続
chrome.debugger.attachを用いることによってデバッグ対象と拡張機能を接続します。

chrome.debugger.attach(
	target: Debuggee,
	requiredVersion: string,
	callback?: function,
)
  • Debuggee:デバッグ対象の拡張機能ID、tabIdを指定します。
  • requiredVersion:デバッグプロトコルのバージョンを指定します。現在は0.1から0.1刻みで1.3まで指定できますが、基本的には1.2か1.3を指定すればいいと思われます。詳しくはこちらを参照。
  • callback:callback先を指定します。

操作
開発者ツールへの接続ができたので、その操作を行います。そこで使うのがchrome.debugger.sendCommandです。

chrome.debugger.sendCommand(
  target: Debuggee,
  method: string,
  commandParams?: object,
  callback?: function,
)
  • Debuggee:Attachしたものと同様のものを指定します。
  • method:開発者ツールの何に対して監視を行うのか指定します。セキュリティの問題から使用できるものは限られており、以下のものに限定されています。
    • Audits
    • DOM
    • Emulation
    • Fetch
    • IO
    • Input
    • Inspector
    • Log
    • Network
    • Overlay
    • Page
    • Storage
    • Target
    • Tracing
    • WebAuthn

それぞれの詳細はこちら（Chrome DevTools Protocol公式ドキュメント）から確認できます。

  • commandParams:methodに対応した引数を入力します。
  • callback:callback先を指定します。
    　
    今回はれすデータの取得を行うためNetworkを用います。

また、Eventに関してはChrome.debugger.onEventで取得します。

chrome.debugger.onEvent.addListener(
	callback?:function(
		//eventから受け取る引数
		source: Debuggee,
		method: string,
		params?: object
	)
)

この部分の戻り値はメソッドによって異なるため、実際に出力してみたほうが手っ取り早いと思います。

切断する
chrome.debugger.detachで切断し、終了することができます。

chrome.debugger.detach(
	target: Debuggee,
	callback?: function,
)
  • Debuggee:切断対象の拡張機能ID、tabIdを指定します。
  • callback:callback先を指定します。

また、chrome.debugger.onDetachを用いることで切断の理由を確認できます。

chrome.debugger.onDetach.addListener(
	callback: function(
		//eventから受け取る引数
		source: Debuggee,
		reason: DetachReason
	)
)
  • Debuggee:切断対象の拡張機能ID、tabIdを指定します。
  • DetachReason:切断理由

何度か試しましたが、chrome.debugger.onDetachではchrome.debugger.detachによる切断によるイベントを検知できませんでした。

用例
簡単な用例を以下リンクにおいておくので興味があればご覧ください。

https://github.com/siyeling/NetworkResponse_get_extension

まとめ
以上がChrome.debugger APIのメソッドです。
例示以外にも様々な用途で用いられるので試してみてください。

DevTools Protocolに対しての勉強不足感は否めなかったので今後も触っていく予定です。

Discussion