11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Chromeのdevtoolsをextensionで監視する

Last updated at Posted at 2017-01-31

基本的な事

httpのアクセスログを取るためにはmitmproxyやFiddlerなどのhttp proxyを使うのが一般的ですが、中にはproxyを検知してアクセスを拒否するものがあります.
そのようなサイトのアクセスログを取るためにはブラウザのデバッグツールを使うのが一番ラクですが、その情報は他に転用出来ません.
Chromeでは拡張機能(extension)でデバッグツールの拡張が可能です.デバッグツールでの拡張はプロクシを通さないので、サイトで弾かれる事は無いです.

メリット

・プロクシを検知して弾かれる事がない

デメリット

・デバッグツールを開く必要がある
・サイトごとの処理が出来ない
・chrome.devtools.とchrome.runtime.しかAPIを使えないので、background.jsにpostMessageをして処理をbackground.js内で処理する必要がある.

ツリー構成

├── devtools.html
├── devtools.js
└── manifest.json

manifest.json
{ "name": "DevtoolTest",
  "manifest_version": 2,
  "version": "1",
  "devtools_page": "devtools.html"
}
devtools.html
<html>
    <head>
        <script src="devtools.js"></script>
    </head>
    <body></body>
</html>
devtools.js
chrome.devtools.network.onRequestFinished.addListener(
  function(request) {
      chrome.devtools.inspectedWindow.eval( 'console.log("' +  request.request.url + '")');

});

ハマる事

・devtools.htmlが必要
・consoleに出力するためにはchrome.devtools.inspectedWindow.evalする必要がある.
・jsを更新した時は拡張機能をリロードし、デバッグウィンドウを閉じ、再び起動しないといけない

http://feiz.hateblo.jp/entry/2013/11/27/203704
http://qiita.com/torini/items/321d1744d77f023e80b5

11
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?