2012年06月01日

[ブックマークレット][javascript] ログインフォームを自動入力するブックマークレットこのエントリーをはてなブックマークに追加

ブラウザがログイン情報を覚えてくれないこと多いじゃないですか。
ユーザ名とパスワードを入力＆ログインボタンを押してくれるブックマークレットを作ってみました。

ただ、サイトごとに作り替えないといけないレベルの代物です。

■概要


javascript:(function(){

//ユーザ名を入力

n=document.getElementsByName("username");

n.item(0).value="usernameHERE";



//パスワードを入力

p=document.getElementsByName("password");

p.item(0).value="passwordHERE";



//フォームを実行

f=document.getElementsByTagName('form');

f.item(0).submit();



})();


サイトに合わせて変更が必要な項目は5つ。
フォームのユーザ名欄のname、パスワード欄のname、そしてIDとパスワードをそのまま入れておく。
formタグがページ内に複数ある場合は、出てくる順番で

f.item(0).submit();

この数字0を1とか2にする。（3番目のformタグをsubmitさせたいならf.item(3).submit();になる。

input/formタグにid属性があったらid使った方が楽。（その場合はdocument.getElementById("idname").valueにする）


■Twitterにログインするブックマークレット


19）

あくまで今日現在のTwitterの場合ですが、下のソースのUSERNAMEHEREとPASSWORDHEREを書き換えて、ブックマークに登録する。Twitterで実行すると、ユーザ名とパスワードが入力＆ログインボタンが押されます。

javascript:(function(){document.getElementsByName("session[username_or_email]").item(1).value="USERNAMEHERE";document.getElementsByName("session[password]").item(1).value="PASSWORDHERE";document.getElementsByTagName('form').item(3).submit();})();



■テスト用コード

<!DOCTYPE html> 

<html lang="ja">

<head>

<style type="text/css">

</style>

    <meta charset="utf-8" />

    <title>設置サンプル</title>

</head>

<body>



<form action="submit.php" method="post">

会員ID:

<input name="username" id="username" type="text" size="30" maxlength="200" />

パスワード: 

 <input name="password" id="password" type="password" size="30" maxlength="32" autocomplete="off" />



<input type="submit" class="formSubmit" value="ログイン" />

</form>









<script type="text/javascript"> 

javascript:

n = document.getElementsByName("username");

n.item(0).value = "username here";



p = document.getElementsByName("password");

p.item(0).value = "password here";



  f=document.getElementsByTagName('FORM')

 f.item(0).submit();





</script>


■参考


WDF - Software : ブックマークレット作成スクリプト




これに関連した記事→│ javascript  
at 23:56 │ Comments( 2) │ TrackBack( 0) │
このBlogのトップへ │ 前の記事 │ 次の記事
この記事へのコメント

Hayana emi ┐ ： 2014年06月13日 19:16
はじめまして。
大変勉強になるページを作成していただき
ありがとうございます。
さて、私なりに作成してみたのですが、丸無視です。

申し訳ないのですが、どこが間違っているのか、
またどのようにしてElementByIdもしくはNameを
探されるのかを教えていただけますでしょうか。

伴って、最終的なlog inのボタンは、clickであったり
submitであったりします。
どこを見れば、その違いがわかるのでしょうか？
お忙しいところ、恐れ入りますが、
教えていただけますでしょうか？

サイト上の…
<input type="text" class="inputIdent" placeholder="Employee number" name="Ecom_User_ID">
<input class="inputPassword inputIdent" id="password-clear" type="text" value="Password" autocomplete="off" style="display: inline-block;">
<input class="inputPassword inputIdent" id="password-password" type="password" name="Ecom_Password" value="" autocomplete="off" style="display: none;">
<input id="loginButton" type="submit" value="Log in" onclick="if (checkUser()) document.LoginForm.submit();">
…に対して、

javascript:(function(){var addr='my_number';var pass='my_password';document.getElementByname("Ecom_User_ID").value=addr;document.getElementByname("Ecom_Password").value=pass;document.getElementsByID("loginButton")[0].submit();})();

と、書いてみました。
動きません。
よろしくお願いします。

くじ ┐ ： 2014年06月24日 23:03
Hayana emiさんこんにちは。遅くなりすみませーん。
けっこう難しいですよね、これ。要素の探索はブラウザでF12押すとツールが出るのでそのコンソールを使います。ざっくりですが考えてみました

//ユーザ名
n=document.getElementsByName("Ecom_User_ID");

//パスワード１
p=document.getElementsById("password-clear");

//パスワード２
p2=document.getElementsById("password-password");

//フォームを実行
document.LoginForm.submit();

IDがあるものはIDで、nameがあるものはnameで取ると楽です。

 

この記事へのトラックバックURL

このページの上へ▲