背景
外部ソフト導入禁止・・・パスワードをブラウザに保存禁止・・・のようなセキュリティが厳しい環境でもブラウザ操作を楽にしたい！と思い、
JavaScriptなら全ブラウザで動くことに気づき、Excelマクロのように一部自動化してみたため、方法をご紹介します。
ID/パスワードをブラウザ上に平文で保存するため、セキュリティ的には推奨しにくいです。
あくまで1つのアイデアとしてご参照ください。
自動化の例
例１：ID/パスワードの入力自動化
確認
例えば、このようなウェブサイトに、メールアドレス・パスワードを自動入力するケースを考えます。
まず、ブラウザの開発者モードを開きます。大体はF12で開くかなと思います。
自動で入力したいフォームの部分を選択し、右クリックのメニューから「検証」を開きます
入力フォームは以下のようなHTMLで構成されていることがわかります。
（HTMLの知識が若干必要ですが、、、）
<input type="text" name="identity" id="identity" placeholder="ユーザー名 または メールアドレス" class="st-Form_text-round" required="required" oninvalid="this.setCustomValidity('ユーザー名またはメールアドレスを入力してください')" oninput="this.setCustomValidity('')">
<input type="password" name="password" id="password" placeholder="パスワード" class="st-Form_text-round" required="required" oninvalid="this.setCustomValidity('パスワードを入力してください')" oninput="this.setCustomValidity('')">
コード生成
このHTMLはメアド入力欄が「identity」というIDで、パスワード入力欄が「password」というIDになっていることがわかります。
ここでJavaScriptの出番です。生成AIに、自動入力する方法を聞きます。生成AIには、メアド/パスワードはダミーのものを入力します。
Javascriptでidentityというidのフォーム要素に「hoge@hoge.com」、passwordというidのフォームに「p@ssw0rd」と入力するような、ブラウザのブックマークを生成してください。
すると、以下のようなコードを返してきます。
簡単に解説すると、「identity」の要素を取得→指定の文字を入力、という操作が書かれています。
javascript:(function(){var i=document.getElementById('identity');if(i){i.focus();i.value='hoge@hoge.com';i.dispatchEvent(new Event('input',{bubbles:true}));}var p=document.getElementById('password');if(p){p.value='p@ssw0rd';p.dispatchEvent(new Event('input',{bubbles:true}));} })();
Chromeのブックマークバーで「ページの追加」などを押してブックマーク追加の画面を開きます。
URL欄に先程のJavaScriptを入力します。これで登録完了です。
動作確認
実際に、ID/パスワードの入力画面で
ブックマークボタンを押して自動入力されれば動作確認OKです。
例２：クリックの自動化
ここまで行くと、「Qiitaにログイン」のボタンも自動で押したくなります。
同様に、開発者モードで、「Qiitaにログイン」の要素を確認すると、HTMLは以下だとわかります。
<input type="submit" name="commit" value="Qiita にログイン" class="sessions_button--wide" data-disable-with="ログイン">
生成AIにやり方を聞きます。
それらを入力したあとに「input type="submit" name="commit" value="Qiita にログイン" class="sessions_button--wide" data-disable-with="ログイン"」のボタンを押したいです。
すると、以下のようなコードを返してきます。
簡単に解説すると、ID/PWに指定の文字を入力したあとに、「Qiitaにログイン」というボタンを探して、要素をクリックしています。
javascript:(function(){var i=document.getElementById('identity');if(i){i.focus();i.value='hoge@hoge.com';i.dispatchEvent(new Event('input',{bubbles:true}));}var p=document.getElementById('password');if(p){p.value='p@ssw0rd';p.dispatchEvent(new Event('input',{bubbles:true}));}var btn=document.querySelector('input[type="submit"][name="commit"][value="Qiita にログイン"]');if(btn){btn.click();}})();
実際にブックマークに登録しボタンを押すと、ログインに失敗しており、想定動作しているように見えます。
おわりに
セキュリティ的に厳しい環境に置かれる人がどれくらいいるか分かりませんが、参考になれば幸いです。
私は、パスワード平文保存は流石にマズイと思い、IDだけ入力するような便利ツールとして使っています。
どちらかというと「JavaScriptって全ブラウザに標準で搭載されてて便利だ」っていう内容だったかもしれません。