Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
13
Help us understand the problem. What is going on with this article?
@osd

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

More than 5 years have passed since last update.
  • chrome 拡張で、通信をハックできたので、やりかたを紹介する。
  • chrome 拡張の詳細は説明しない。

背景

そうか!改造すれば良いじゃん :laughing:

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 が発火しなかった。
そこで ajaxCompleteajaxStop を使おうとしたのだが、
この2つはどちらも発火しなかったので、手も足もでなかった。

とはいえ、これが期待どおりに動いていたら、webRequest には出会わなかったので、
結果的に発火しなくて良かったと思う。

chrome 拡張、凄いな。


  1. 代わりに README 機能が付いた。 

13
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
osd

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
13
Help us understand the problem. What is going on with this article?