- chrome 拡張で、通信をハックできたので、やりかたを紹介する。
- chrome 拡張の詳細は説明しない。
- (良い記事を見つけた。Chrome拡張 | アーキテクチャ - Qiita。前提知識が全くないのなら、一読すると良いと思う。)
背景
- DocBase - 社内の人も社外の人も、関係者全員で使える情報共有サービス を使っている。
- 最近、ログイン後のトップページが変更されて、表示件数が減り、情報量が減って残念に思っていた1。
そうか！改造すれば良いじゃん 
webRequest を使って、5件の表示件数を20件に書き換える。
トップページの表示件数を増やすことを考える。
「chrome developer tool」のネットワークタブで、URLを確認すると、トップページは
/api/dashboard_objects?per_page=5&page=1 であることがわかった。
per_page=20にすれば、20件になるだろう。
1 . manifest.json に下記を設定する。
"permissions": [
"https://*.docbase.io/",
"webRequest",
"webRequestBlocking"
],
- chrome.webRequest を使うと、chrome の通信に干渉できるようになる。
- 今回は url を書き換える必要があるので、
webRequestBlockingも使う。これを使うことで同期処理となり、url を書き換えられるようになる。
2 . 通信をキャッチして、URLを書き換える
実際に url を書き換えるコードを書く。
- 通信をキャッチするには、
chrome.webRequest.onBeforeRequest.addListenerを使う。 - これにより、
"*://*.docbase.io/api/*"に対して、xmlhttprequestの通信が発生した時、detailsオブジェクトを受け取ることができる。-
details.urlに、これからアクセスする url が入っている。
-
- このとき、
redirectUrlを返すと、url を書き換えることができる。 - 第3引数に['bloking']が必要。
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
var url = details.url;
if (url.indexOf("per_page=5&page=1") > -1) {
var new_url = url.replace("per_page=5", "per_page=20");
return { redirectUrl: new_url }
}
},
{
urls: ["*://*.docbase.io/api/*"],
types: ["xmlhttprequest"]
},
[
"blocking"
]
);
以上、これだけで、通信路をハックできた。
全部で100行も行かないだろう。
まとめ
- chrome 拡張で webrequest を使えば、通信のURLを書き換えることができる。
chrome 拡張がこんなことまで出来るとは思っていなかったので、感動した。
しかもコードはシンプルなので、何にでも使える。
一方で、通信路を書き換えることができるという、chrome 拡張の恐ろしさを改めて感じる経験だった。
こぼれ話
最初は、content scriptを使って、location.href を書き換えるコードを書いていた。
トップページにある「もっと見る」リンクの先のページが、見たいページだったので、トップページに来たらそのページに移動してしまおう、というアプローチだ。
$(document).on("ready", function(){
if(location.pathname == "/"){
var timer = setInterval(function(){
$link = $('a[href="/recent"]');
if(!!$link[0]){
clearInterval(timer);
$link.click();
}
}, 100)
}
})
このコードは、初回アクセスでは、期待どおりに動作した。
しかし、他のページから遷移してきた時に ready が発火しなかった。
そこで ajaxCompleteもajaxStop を使おうとしたのだが、
この2つはどちらも発火しなかったので、手も足もでなかった。
とはいえ、これが期待どおりに動いていたら、webRequest には出会わなかったので、
結果的に発火しなくて良かったと思う。
chrome 拡張、凄いな。
-
代わりに README 機能が付いた。 ↩