Firebugクックブック #2

前回に引き続き、自分がよくあるブラウザ上での単純作業をFirebugコンソールで片付けている方法の紹介です。前回はブラウザに表示されているデータをこっち側に持ってくる作業をどうやっやるかでした。今回はブラウザの向こう側のデータをFirebugで操作するにはどうするかです。

ボタンをクリックさせる

ウェブのサービスを使っていて、今までに投稿したものを全部消したくなったり(でもアカウントは消したくないとか)することがあります。管理画面で投稿を消すことはできるけど、いちいちクリックしていかないといけなくて面倒.... という時にはFirebugでフェイクのクリックイベントを作って送れば、自動でクリックさせることができます。 Twitterのfavoritesを全部外したい、というのを例としてあげます。TwitterのfavoritesはAPIがあるのでAPIを使う手もありますが、サービスによってはAPIが使えないこともよくありますよね。まずFirebugでHTMLを調べると こういう構造になっています。favoriteを外すためのリンクを持っているaタグは div.status_actions a というCSSセレクタで表すことができるので

$$('div.status_actions a').map ( function (a, i) {
    setTimeout( function () {
      var e = document.createEvent('MouseEvent');
      e.initMouseEvent("click", 1,1, null,null,0,0,0,0,0,0,0,0,0,null);
      a.dispatchEvent(e)
    }, i * 1000);
} );

document.createEventとevent.initMouseEventを使ってaタグにクリックイベントを送信すれば、自分でクリックしないでfavoriteを外すことができます。この方法だとFirefoxに表示されているだけのfavoritesしか外せません。1ページに表示されている量よりも多い量を対象にしたい時はAutoPagerizeを使って、対象にしたい量だけ読み込んでから実行すると、1ページに収まらない量を対象にすることができます。

setTimeoutの中で実行しているのは、一度に大量のリクエストをサーバに送って迷惑をかけたりしないようにするためです。大量にリクエストを送ることになるときには必ず入れましょう。

クリックしたあと確認のダイアログが出るとき

twitterのfavoriteのように、クリックしたら即操作が反映されるものは比較的少数です。削除のように元に戻せない操作のときにはjavascriptで確認が表示されることが多いです。Flickrで写真を削除しようとしたときには確認画面が出てきて、けっきょくまたクリックしないといけなくなったりします。 そういうときにはこの確認画面を出しているconfirm関数を上書きしてしまいましょう。Firebugコンソールで

window.confirm = function () {
  return true;
}

と書いて一度実行しておけば、confirmは出てこなくなって、常にOKを押したことにすることができます。(参考: Googleマップのアラートを消す最悪の方法 - p0t)

HTTPリクエストを送る

クリッイベントを作るだけじゃうまくいかない、クリックしたあと別のページに遷移してしまってスクリプトの実行が中断されてしまう、そういうときはもうXMLHttpRequestを使ってリクエストを作って送ります。

wassr で全 follow するブックマークレット - IT戦記がちょうどそれをやっているので、まねしてFriendFeed - Recommended Friendsでお勧めされているひとをsubscribeするというFriendFeedバージョンを作るのを例にします。

まずLive HTTP Headers :: Firefox Add-onsを使って、送信されているリクエストを確認します。

POST /account/newfriends HTTP/1.1

Host: friendfeed.com

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

X-Requested-With: XMLHttpRequest

Referer: http://friendfeed.com/settings/recommended


id=06c27bf8-2cfd-11dd-be28-003048343a40&at=12419835770643829971_1218795910

subscribeボタンを押すとこういうリクエストがPOSTで送信されています。まずはPOSTのパラメータになっているidとatをページの中から探してきましょう。 ユーザのIDを示しているGUIDみたいなidはtdタグにuseridという属性で示されていました。 atは調べてみたらcookieの中に入っている値でHTMLには入ってないのですがgetCookie('AT')で得ることができました。材料が揃ったところで、あとはコードを書けばいいだけです。

$x('//td[@userid]').map ( function (e, i) {
  setTimeout( function () {
    var body = [
     "id=" + e.getAttribute("userid"),
     "at=" + getCookie("AT")
    ].join("&");
    var r = new XMLHttpRequest();
    r.open("POST", "/account/newfriends", false);
    r.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    r.send(body);
  }, i * 1000);
} )

XMLHttpRequestは同じドメインにしかリクエストを送れないので、同じドメインであるFriendFeed - Recommended Friendsを開いて、Firebugでこのスクリプトを実行すると、おすすめされたひとをみんなsubscribeすることができます。

あとがき

Firebugを使うと、クッキーで認証がかかっていて、ほかのスクリプト言語でコードを書くにはめんどくさい、というときにも、作業そのもののコードを書くだけですませられるので簡単です。最近はJSONやJSONPで結果を返してくれるAPIも増えたので、ますますFirebugは細かい作業をこなすのに使いやすくなっています。