Google Chromeの便利な拡張機能を自分で作成する方法を説明。
Chrome拡張機能はとても便利ですが、自分が欲しい機能を搭載したい時もありますよね。
今回のお題は「特定のURLのサイトは自動でログイン」させるChrome拡張機能を作成します。
最初に
社内も認証・PCも指紋認証で、社内のローカルネットで社内システムを開きここでもID・PWが手間…
という方からリクエストを受けて作ってみたものを紹介しますが、あくまで情報提供のみを目的としており
真似して作成してみた結果の直接的・間接的な損害等一切の責任を負いません。ご了承ください。
サンプルログインフォーム
ログインID ※sampleidです。
パスワード ※samplepwです。
こちらのあるあるログインフォームをChrome拡張機能で自動ログインします。
シンプルにログインIDとパスワードを入力してログインボタンをクリックすれば
ログインしてシステムに入れるというタイプです。
作成方法説明
今回のお題は「指定したURLのページの場合、自動でログインIDとPWを入力し
ログインボタンをクリックするChrome拡張機能を作成」してみた。
※好評でしたら色々な拡張機能を作成してみます。
手順を大まかに3つに分けます。
まずマニフェストファイルの作成をします。
マニフェストファイルは設定情報を記述して読み込ませるファイルです。
今回の拡張機能がどのURLで実行されるか、何のファイルが実行されるか
拡張機能の詳細は～等の情報を入力します。
その次にWebブラウザで実行できるJavaScriptで実行するので、JSファイルを作成します。
そしてファイルができたらChrome拡張ファイルとして読み込ませます。
まず拡張ファイルを読み込ませる際に使用するフォルダを作成します。
画面上で新規作成からフォルダを作りましょう。
フォルダ名はSampleとします。
その中にマニフェストファイルを作成していきます。
Visual Studio Code等で作成してもいいですが
あえてメモ帳でいきましょう（準備しなくて良いので）
メニューからメモ帳を開きます。
json形式は下記をコピーして内容を作成していきましょう。
-----------------------------------
{
"name":"拡張機能名",
"description":"拡張機能の詳細",
"version":"ヴァージョン",
"manifest_version":3,
"content_scripts":[
{
"matches":["https://vba.company/?page_id=1951"],
"js":[
"sample.js"
],
"run_at":"document_end"
}
]
}
-----------------------------------
"name"には、拡張機能の名前を指定します。
“description”には拡張機能の説明・詳細を記載します。
“version”は拡張機能のヴァージョンで最初は1.0.0を指定しておきましょう。
拡張機能をヴァージョンアップしていった際に、数値は更新します。
"manifest_version"は、現在の最新バージョンである3を指定
※ブラウザの互換性も有るので、2でも可、下記ページで詳細は確認してください。
manifest_version参考ページ
https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version
contentscriptは、標準の DOM APIを使用して
ページのコンテンツを読み取り、変更することができるので
これを利用してページのコンテンツを読み取って操作してログインさせていきます。
“matches” → jsで指定したscriptが実行されるURL
つまりURLをここで指定しておけば、そのURLの時のみ実行される
マッチパターン参考ページ
https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Match_patterns
“js” → 実行されるjsファイルを指定
“run_at”のdocument_endはページ読み込み後に実行してくれます。
今回使用するJSの内容は下記のみになります。
コピーして内容を作成していきましょう。
-----------------------------------
(function () {
document.getElementById('userid').value = 'sampleid';
document.getElementById('userpass').value = 'samplepw';
document.getElementById('roginbutton').click();
})();
-----------------------------------
内容を簡単に説明するとidが”userid”の要素の値に”sampleid”を設定
idがuserpassの要素の値に”samplepw”を設定
idが”roginbutton”の要素をクリックするという命令です。
要素を見たい場合はGoogleChromeで指定したページを開き
画面上で右クリックし検証ボタンを押下します。
GoogleDeveloperツールが開けば
左上の矢印ボタンを押してページ内の要素を選択して検査を押下します。
調べたい要素をクリックすれば
対象の箇所がマークアップされる為、対応するHtml部分がわかります。
ログインIDのinputの箇所はid=“userid”となっている為
先程のdocument.getElementByIdはuseridで指定できるということです。
ファイルが完成したら名前を付けて保存しましょう。
ファイルから名前を付けて保存を押下します。
マニフェストファイルはjson形式の為、ファイル名をmanifest.jsonにして
jsonファイルとして保存します。
JSファイルはファイル拡張子をjsにして（sample.js)にして保存します。
注意※ファイル名はマニフェストファイルのjs:のファイル名と一致しないと起動しません。
Jsファイルとjsonファイルが完成したら最初に作成したフォルダに移動させます。
Sampleというフォルダの中に先程作成した2つのファイルが入っています。
このフォルダごと拡張機能に読み込ませます。
GoogleChromeを開いて拡張機能のページを開きましょう。
Chromeの右上の設定からその他のルールから拡張機能を開きます。
Chrom拡張機能の画面が開いたらデベロッパーモードをONにします。
画面右上のデベロッパーモードをクリック。
デベロッパーモードがONになったら
パッケージ化されていない拡張機能を読み込むを押下します。
先程作成したファイルが入っているフォルダを選択し
フォルダーの選択ボタンを押下します。
作成した拡張機能が取り込まれました。
拡張機能は詳細ボタンで拡張機能の内容が確認でき
削除ボタンで拡張機能を削除します。
詳細画面にはサイトへのアクセスなど細かい内容も
確認・設定できますので一度開いてみてみましょう。
プログラムの内容や、ファイルを更新した場合は
画面の更新ボタンを押下し、再度ファイルを更新しないと
新しいプログラムに更新されません。
ファイル更新した後は更新しましょう。
今回の対象のURLとした“https://vba.company/?page_id=1951”というページに接続すると
自動でログインされ、ページが遷移しています。
こちらのコードで接続後自動ログインされるサンプルページ →
https://vba.company/?page_id=1951
まずはこちらのページで上手くいくか試してみて応用してはどうでしょうか。
■実際に使用したmanifest.jsonファイルのコード
-----------------------------------------------
{
"name":"拡張機能名",
"description":"拡張機能の詳細",
"version":"1.0.0",
"manifest_version":3,
"content_scripts":[
{
"matches":["https://vba.company/?page_id=1951"],
"js":[
"sample.js"
],
"run_at":"document_end"
}
]
}
■実際に使用したsample.jsファイルのコード
-----------------------------------------------
(function () {
document.getElementById('userid').value = 'sampleid';
document.getElementById('userpass').value = 'samplepw';
document.getElementById('roginbutton').click();
})();
不明点あればTwitterアカウントにリプ頂ければわかる範囲でお応えします。
Chrome拡張機能は自作できれば業務改善系には特に役に立ちます。
よきChrome拡張機能ライフを。Have a nice Chrome life.