chrome拡張機能で、自動ログインツールを作成する

日付:

現場で、簡単なchrome拡張機能の自動ログインツールを作成してしばらく使用してみたら、快適に使用できていますので、ご紹介します。

作るもの

  • ログイン対象のWebアプリは、開発環境がたくさんある。
    URLを正規表現で表すと、https://demo\d{2}.test.co.jp/loginとします。
  • ログインIDは、URLの可変の数字から判断できる文字列
  • ログインパスワードはどの環境も同じ
  • 操作手順
    1. ショートカットで、対象環境の数字を入力するテキスト入力欄を表示する
    2. テキストを入力してエンターキー押下で、入力欄を閉じて、対象環境を別タブで開く
    3. ログインID、パスワードが入力された状態で、ログインボタンがフォーカスされている。（異なるログインIDでログインする場合もあるので、クリックは行わない）

実装

任意の場所に作業フォルダを作成して、以下のファイルを作成します。
  • manifest.json
  • popup.html
  • popup.js
  • main.js

manifest.json

マニフェストです。拡張機能に設定項目を記載します。

{
  "name": "auto login",
  "description": "auto login",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [{
		"matches": ["https://*.test.co.jp/login"],
		"js": ["main.js"]
	}],
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html"
  },
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+L",
        "mac": "MacCtrl+Shift+L"
      },
      "description": "Run extension."
    }
  }
}

content_scripts.matchesに、対象環境のURLを指定します。

commands._execution_action.suggested_keyが、拡張機能起動時のショートカットになります。

popup.html, popup.js

拡張機能を起動して表示されるポップアップです。

popup.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .action {
        padding: 4px;
      }
      #env {
        width: 50px;
      }
      </style>
  </head>
  <body>
    <div class="action">
      <input id="env" type="number" autofocus />
    </div>
    <script src="popup.js"></script>
  </body>
</html>

ショートカットで表示される、対象環境を入力するポップアップです。

popup.js

ポップアップで実行される処理です。 

document.getElementById("temp").addEventListener("keypress", inputEndHandler);

async function inputEndHandler(e) {
  // エンターキー以外は return
  if (e.keyCode !== 13) return;
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  // 入力値チェック
  const envNo = document.getElementById("env").value;
  if (!envNo || !/^\d{2}$/.test(envNo)) {
    return;
  }
  // ポップアップを閉じる
  window.close();
  
  // 対象環境の画面を開く
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: move,
    args: [envNo]
  });
}

function move(envNo) {
  location.href = `https://${envNo}.test.co.jp/`;
}

main.js

対象環境画面を開いた際に、未ログイン状態であればログイン画面が表示され、自動でログインID・パスワードが表示され、ログインボタンがフォーカスされます。

(() => {
  const envNo = location.href.replace(/^.+demo(\d+)\.test\.co\.jp\/login/, '$1');

  if (!envNo) {
    return;
  }
  
  const $id = document.getElementsById('login_id');
  const $pass = document.getElementById('password');
  
  $id.value = `demo${id}@test.co.jp`;
  $pass.value = 'password';

  document.querySelector('button[type="submit"]').focus();
})();

毎回同じログインIDを使用するのであれば、focusではなくてclickに変えてください。

拡張機能をインストールする

インストール方法は、拡張機能を開いて、パッケージ化されていない拡張機能を読み込むで開いたダイアログで、拡張機能を実装したフォルダを指定するだけです。

ポップアップがテキストボックスだけでシンプルなのと、ログイン対象のWebアプリをサンプルで用意するのも手間ですので、動作している画像は無しですが、簡単に実装できますので、必要がありましたら試してみてください。