ブックマークレットとは

ブックマークから任意の JavaScript コードを実行して、表示中のページに対して何らかの処理を行ったりできる仕組み。

任意のサイトで自動ログインする？

任意のサイトでブックマークレットを実行すると、ID・パスワード欄に情報を入力し、自動で「ログイン」ボタンを押すような処理をさせたいと思います。

動き的には Firefox アドオンの Secure Login みたいな感じのものです。

注意

仕組み上、ログイン先のサイトのマークアップが変わると動かなくなります。
パスワード等の情報をブックマークレットに直書きしているので、セキュリティ面での懸念あり。

サンプルコード 1

以下のようなフォームがあるページで実行するブックマークレットを想定する。

<form action="Login" id="loginform">
  <p>ユーザ名  ：<input type="text"     id="username" value=""></p>
  <p>パスワード：<input type="password" id="userpass" value=""></p>
  <p><input type="submit" id="submitbtn" value="ログイン"></p>
</form>

このようなページに対し、以下のようなブックマークレットを作ってやれば、ユーザ名に「NeosID」、パスワードに「NeosPassword」が自動入力され、ログインボタンを押すまでが自動操作できる。

javascript:(function(d,i,v){d[i]("username")[v]="NeosID";d[i]("userpass")[v]="NeosPassword";d[i]("loginform").submit();})(document,"getElementById","value");

軽く整形するとこんな感じ。

javascript:(function(d, i, v) {
  d[i]("username")[v] = "NeosID";
  d[i]("userpass")[v] = "NeosPassword";
  d[i]("loginform").submit();
})(document, "getElementById" ,"value");

コードの解説

結局やっていることは、document.getElementById("id名").value = "テキストボックスに入れたい文字列"; というのを短く書いて、最後にフォームを Submit しているだけである。

document.getElementById().value を短く書くために、無名関数の引数を利用して、変数 d に document、i と v には文字列で "getElementById" と "value" を与えている。

プロパティを文字列で渡したのは、プロパティに配列記法でアクセスするため。
document.getElementById は document["getElementByid"] と書いてもアクセスできる。これを変数化したものが、d[i] になっている、という寸法。
value についても同じなので、最終的に d[i]("id名")[v] = "文字列" といった書き方ができる。

サンプルコード 2

ログインボタンの作りによっては submit() でうまくログインできない場合がある。そんな時は、ボタンのクリックイベントを発火させるよう、最後の部分をちょっと変えてやる。

まず HTML のサンプル。さっきと違うのはログインボタンが type="submit" ではなく type="button" になっているところ。

<form action="Login" id="loginform">
  <p>ユーザ名  ：<input type="text"     id="username" value=""></p>
  <p>パスワード：<input type="password" id="userpass" value=""></p>
  <p><input type="button" id="submitbtn" value="ログイン"></p>
</form>

次に、ブックマークレットはこんな風にする。異なるのは #loginform に対し submit() を叩くのではなく、#submitbtn の click() を呼び出すところ。

javascript:(function(d,i,v){d[i]("username")[v]="NeosID";d[i]("userpass")[v]="NeosPassword";d[i]("submitbtn").click();})(document,"getElementById","value");