作成した経緯

Slerで様々な企業に出向する中で、企業によっては Edgeのパスワード保存機能や自動入力機能が使えないケースがあります。しかし、複数のツールのログイン画面で長いIDとパスワードを毎回入力するのは非常に手間です。

そこで、今回は Edgeの拡張機能 を利用して、IDとパスワードを自動入力するツールを作成しました。

Qiita と公式リファレンスを参考にしながら作成し、実際に動作確認が取れたので、共有します。

注意点

ソースコードや data.csv は他人に見られると パスワードが漏洩 する可能性があります。
ローカル環境の他人に見られないフォルダ に保存して使うことをおすすめします。

実際に作ったもの

以下は作成した拡張機能の内容です。コードはGitHubにもそのままアップロードしています。

ファイル構成

extension/
├── manifest.json
├── script.js

manifest.json

{
    "manifest_version": 3,
    "name": "Auto Login",
    "version": "1.0.0",
    "description": "自動でIDとPWを入力",
    "content_scripts": [
      {
        "matches": ["https://qiita.com/login*"],
        "js": ["script.js"]
      }
    ]
}

script.js

const id = "AAA";
const pw = "BBB";

// ID入力
const identityField = document.querySelector('input[name="identity"]');
if (identityField) {
    identityField.value = id;
}

// PW入力
const passwordField = document.querySelector('input[name="password"]');
if (passwordField) {
    passwordField.value = pw;
}

// 入力完了の通知
alert('入力されました');

`data.csv` を利用するバージョン

IDとパスワードを data.csv に分けたバージョンも作成しました。
こちらの方が便利なので、現在はこちらを利用しています。

manifest.json

{
    "manifest_version": 3,
    "name": "Auto Login",
    "version": "1.0.0",
    "description": "自動でIDとPWを入力",
    "content_scripts": [
      {
        "matches": ["https://qiita.com/login*"],
        "js": ["script.js"]
      }
    ],
    "web_accessible_resources": [
      {
        "resources": ["data.csv"],
        "matches": ["https://qiita.com/*"]
      }
    ]
}

script.js

fetch(chrome.runtime.getURL('data.csv'))
    .then(response => response.text())
    .then(csvText => {
        const id = csvText.split(',')[0];
        const pw = csvText.split(',')[1];

        // ID入力
        const identityField = document.querySelector('input[name="identity"]');
        if (identityField) {
            identityField.value = id;
        }

        // PW入力
        const passwordField = document.querySelector('input[name="password"]');
        if (passwordField) {
            passwordField.value = pw;
        }

        // 入力完了の通知
        alert('入力されました');
    });

GitHub