IDとパスワードを簡単に入力してログインできるブックマークレットを作ってみた

たくさんあるウェブサイトのIDやパスワードが覚えられなくて、「1password」というアプリを使っています。

1password.com

パソコンのChrome ブラウザの環境でも使えるように、Chrome拡張機能を入れて「1pass」を使えるようにしていました。

しかし、最近、有料アカウントを購入しないとブラウザでは使えなくなってしまいました。

なので、いっそのこと自分で、簡単にIDとパスワードを入れられるブックマークレットを作ることにしました。

パソコン版のChromeブラウザでは、外部JSを埋め込めることがわかったので、

そのパソコンに、localhost のウェブサーバーを立てて、そこに Javascript ファイルを置きました。

例：http://localhost/2pass/index.js

function load2pass(){
console.log('2pass start');
var obj1;
var obj;
var list = new Array();
//---
obj = {'url':'www.hatena.ne.jp/login',list:[{'type':'id','name':'login-name','value':'XXXXXX'},{'type':'name','name':'password','value':'XXXXXX'}],'btn':'//*[@id="option"]/input'};
list.push(obj);
obj = {'url':'www.XXX.ne.jp/login',list:[{'type':'id','name':'login-name','value':'XXXXXX'},{'type':'name','name':'password','value':'XXXXXX'}],'btn':'//*[@id="option"]/input'};
list.push(obj);
//---
for(var i=0;i<list.length;i++){
obj1 = list[i];
if(document.URL.indexOf('//' + obj1['url']) > -1){
for(var i2=0;i2<obj1['list'].length;i2++){
var obj2 = obj1['list'][i2];
if(obj2['type'] == 'id'){
document.getElementById(obj2['name']).value = obj2['value'];
}
if(obj2['type'] == 'name'){
document.getElementsByName(obj2['name'])[0].value = obj2['value'];
}
}
setTimeout(submit2pass, 100);
break;
}
}
function submit2pass(){
var target = document.getElementsByXPath(obj1['btn'])[0];
target.click();
}
}
document.getElementsByXPath = function(expression, parentElement) {
var r = [];
var x = document.evaluate(expression, parentElement || document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0, l = x.snapshotLength; i < l; i++) {
r.push(x.snapshotItem(i));
}
return r;
}

document.getElementsByXPath の関数は、オリジナルでXPath を使えるようにしています。

www.dev-dev.net

「送信ボタン」や「ログインボタン」をこのXPathで設定します。

入力する「ID」と「パスワード」は、id もしくは name で設定します。

例えば、はてなブログのログイン画面の場合、

https://www.hatena.ne.jp/login

HTMLソースから、IDとパスワードと送信ボタンの情報を取得する。

そこから作ったJSON形式のデータがこちら。

    obj = {'url':'www.hatena.ne.jp/login',list:[{'type':'id','name':'login-name','value':'XXXXXX'},{'type':'name','name':'password','value':'XXXXXX'}],'btn':'//*[@id="option"]/input'};

これを、index.js に追加します。

そして、こちらのブックマークレットを用意します。

javascript:(function()%7Bvar script=document.createElement('script');script.type='text/javascript';script.src='http://localhost/2pass/index.js';var firstScript=document.getElementsByTagName('script')%5B0%5D;firstScript.parentNode.insertBefore(script,firstScript);script.onload=function()%7Bload2pass()%7D%7D)();

index.js に、複数のサイトを登録しておくと、ブックマークレットをクリックするだけでログインすることができます。

localhost では、セキュリティ面が弱いという場合は、.htaccess ファイルなどで認証をかけるといいかもしれません。

あと、ログインするサイト毎に、文字コードが違うので、全角文字には対応していません。

追記 2019/02/09

PHPでJSファイルを難読化すると、セキュリティレベルはさらにあがるかもしれません。

www.dev-dev.net