chrome 拡張で、通信をハックできたので、やりかたを紹介する。
chrome 拡張の詳細は説明しない。
- (良い記事を見つけた。Chrome拡張 | アーキテクチャ - Qiita。前提知識が全くないのなら、一読すると良いと思う。)

背景

DocBase - 社内の人も社外の人も、関係者全員で使える情報共有サービスを使っている。
最近、ログイン後のトップページが変更されて、表示件数が減り、情報量が減って残念に思っていた¹。
そんなとき、wamei/chatwork-plugin: チャットワークになんか色々追加するchrome extension に出会った。

そうか！改造すれば良いじゃん

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 機能が付いた。 ↩

chrome 拡張を使って、ajax 通信の url を書き換える

背景

webRequest を使って、5件の表示件数を20件に書き換える。

まとめ

こぼれ話