Google Chromeのディベロッパーツールをカスタマイズする方法のメモ

Google ChromeでWindowsのディベロッパーツールに独自のタブ（パネル）を追加できると最近知ったので備忘のために書いておく。

Google Chrome拡張機能として作成する。

最低限のmanifest.jsonファイルは以下のとおり。permissionは、この拡張機能を実行させたいWebサイトのURLを指定する。

{
	"manifest_version": 2,
	"name": "Hoge Hoge",
	"version": "1.0",
	"devtools_page": "devtools.html",
	"permissions": [
		"https://hogehoge.com/*"
	],
	"icons" : {
		"128": "icon.png"
	}
}

ポイントはdevtools_pageにHTMLファイルを指定すること。このHTMLファイルはmanifest.json他のファイルを同じフォルダに、テキストエディタでいいので新規作成する。ファイル名は何でもいい。ここでは分かりやすくdevtools.htmlという名前にした。

そしてそのdevtools.htmlの中身は以下のとおり。

<!doctype html>
<html>
  <head>
    <script src="./devtools.js"></script>
  </head>
  <body>
  </body>
</html>

何もしていない。ただ同じフォルダにあるdevtools.jsというJavaScriptを呼び出しているだけ。名前はdevtools.jsでなくてもいいが分かりやすいようにこうしておく。

そのdevtools.jsの中身で、パネルを作成することになる。

chrome.devtools.panels.create(  
	"HogeHogePanel",
	"", // icon画像を指定できる
	"./panel.html",
	(panel) => {} // callback
);

このJavaScriptはGoogleディベロッパーツールのElements、Console、Sources、Network等々のタブ（パネル）に、自分の好きなパネルを追加している。

chrome.devtoolsというのはGoogleが提供しているGoogleディベロッパーツールAPIで、Google拡張機能からはすでに存在するオブジェクトとしていつでも呼び出せる。

ここではchrome.devtools.panelsのcreateメソッドを呼び出して、Elements、Console、Sources、Network等々のパネルに、もう1枚パネルを新規作成している。

1つ目の引数がパネルのタイトル。ElementsパネルならElements、ConsoleパネルならConsoleにあたる名前。好きな名前をつければいい。ここではHogeHogePanelという名前にした。
2つ目はアイコンを指定できるが、なくていい。
3つ目がポイント。この拡張機能のフォルダ内に、テキストエディタでも何でも良いのでpanel.htmlというHTMLファイルを作成して指定すればいい。ファイル名はpanel.htmlでなくても何でもいい。
4つ目はコールバック関数の指定だが、筆者は何に使うのか分からなかった。指定なしでもここから書くことは実現できる。

ではそのpanel.htmlには何を書けばいいか。

<!DOCTYPE html>  
<html>  
  <body>
    <div id="container"></div>
    <script src="./panel.js"></script>
  </body>
</html>

このHTMLも基本的にpanel.jsというJavaScriptを呼び出しているだけ。中身は用途によっていろいろだが、ここではpanel.jsの実行結果をこのHTMLに動的に表示させたいので、そのためのコンテナとしてdivタグでcontainerというidの容れ物を作っておくことにする。

ここまでで準備ができた。Googleディベロッパーツールに独自に追加したHogeHogePanelというパネルに、このpanel.htmlが表示され、panel.jsの実行結果をcontainerにJavaScriptで動的に書き込めば、panel.jsの実行結果を動的に確認できるパネルが出来上がる。

あとはpanel.jsにやりたいことをひたすらコーディングしていく。

たとえばブラウザで読み込んだページが、WebサーバにGETメソッドで要求しているデータのURLをすべて列挙する、ネットワークアナライザ的なことがやりたけれは、chrome.devtools.networkというオブジェクトのonRequestFinishedメッソドを使って以下のように書けばいいらしい。

chrome.devtools.network.onRequestFinished.addListener(
	function(request) {
		var geturl = request.request.url;
	}
);

処理はWebページを読み込みつつ非同期で実行されるので、Webサイトへのデータ要求が終わるたびに関数が呼び出されるように、addListenerでリスナーを追加、そのリスナーの中にonRequestFinished、つまりデータ要求が終わるごとに呼び出される関数を書く。

その関数にはデータ要求の結果、戻ってきたデータがrequestオブジェクトとして渡されるので、それを引数にして、無名関数として記述する。 function(request)の部分がそれにあたる。

あとはこのrequestオブジェクトにたくさんある属性の中から、取り出したいデータを取れば良い。

ここでは戻ってきたデータの中に含まれるURLリンクアドレスを取り出したいので、request.request.urlとし、アドレスの文字列をgetrulという変数に代入している。（geturlという変数名は適当に付けただけなので、何でもいい）

Google ChromeがWebサーバに要求しているURLを列挙して何がうれしいのかというと、Google ChromeでWebページを表示させた時に表面上見えているデータ以外に、裏側でそのWebページがWebサーバに要求しているデータのURLアドレスを取り出せるから。

WebページはWebサーバからもどってきたデータをそのまま表示せずに、いったんJavaScript等で加工してからWebページを組み立てて表示させていることがほとんどだが、裏側で要求しているデータを生のままつかまえたい場合は、この方法が役立つ。

panel.jsの中身を地道にコーディングして、処理結果をpanel.htmlに表示するようにできれば、あとは目的のWebページを開いて、かつGoogleディベロッパーツールの画面を、WindowsならCtrl+Shift+Iで表示させればいいだけ。

そうするといちばん右側に、自分の作った「HogeHogePanel」というタブでパネルが追加されている。そのパネルはpanel.htmlなので、そこに自分の欲しいデータが書き出される。

ただ、じゃあpanel.jsがうまく動いているかどうかは、どうやってデバッグすればいいの？という話になるが、それもGoogleディベロッパーツールを使えばいい。

自分が新規作成したHogeHogePanelの動作を確かめるために、そのパネルを表示させた状態で、再びCtrl+Shift+Iを押すと、もう一つGoogleディベロッパーツールが開く。

この2つ目のGoogleディベロッパーツールは、最初に開いたWebページではなく、自分が作ったHogeHogePanelに対するGoogleディベロッパーツールなので、panel.jsに何かエラーがあれば、こちらの2つ目のGoogleディベロッパーツールのConsoleタブにエラー表示される。

なので二重に開いた2つ目のGoogleディベロッパーツールのConsoleタブを見ながら、panel.jsをデバッグできる。

…といったことができるのを、つい最近知った。

Related posts: