UTASとITC-LMSのログイン画面にショートカットキーを導入する拡張機能

最近拡張機能をいじる機会があったので、概要を掴むために簡単なものを自分でもつくってみることにしました。

拡張機能とは

Chromeとかのwebブラウザに組み込んで使うプラグインのようなアドインのような、そんな便利グッズです。

f:id:h0gee:20211013202334p:plain

右上のコレ。Google翻訳とかが有名かも。

通所はChrome ウェブストアからインストールするんですが、自分で作ることもできます。

何をつくるか

東大にはITC-LMSという、恐らくどこの大学にもあるであろう授業管理システムがあります。

昔は気にならなかったんですが、授業がオンラインになってから課題提出などの利用機会が増え、ストレスを感じるようになったのが最初のこの画面。

f:id:h0gee:20211013182205p:plain

「ログイン」をわざわざクリックしなければなりません。

最近RealForceを購入して、さらにマウスに手を伸ばすエネルギー障壁が大きくった身としては、キー入力だけで済ませたいです。

というわけで、Enterキーを押すとログインボタンを押してくれる拡張機能を作成してみましょう。

作り方

材料

実行するjavascriptファイルと、拡張機能を読み込むためのmanifest.jsonが必要です。

適当なディレクトリに2ファイルを作成します。

  • main.js
  • manifets.json

コード

main.js

当然ですがスクリプトはかなり簡単です。

document.addEventListener("keydown", function(event){
if(event.keyCode === 13){

 document.getElementById('com_auth').querySelector('.square_button > a').click();
}
});
 

addEventListenerメソッドでキーが押されるのを検知し、Enterキー(キーコード:13)が押されたら指定した要素をクリックするという処理になっています。

指定する要素はF12を押して頑張って探しましょう。

 

f:id:h0gee:20211013210144p:plain

manifest.json

名前や説明は適当でOKです。matchesに動作させたいサイトのURL、jsに実行するjsファイルを指定します。

{
"manifest_version" : 2 ,
"name" : "Enter UTokyo" ,
"version" : "1.0" ,
"description" : "ITC-LMSのログインボタンにショートカットキー(Enter)を割り当てます" ,
"content_scripts" : [{
"matches" : [ "https://itc-lms.ecc.u-tokyo.ac.jp/login" ],
"js" : [ "main.js" ]
  }]
}

以上2ファイルを格納したフォルダを拡張機能として読み込ませましょう。

拡張機能」ページ(Chromeなら設定から見れます)で右上の「デベロッパーモード」を有効にすると、「パッケージ化されていない拡張機能を読み込む」が選択できるようになります。

ここから↑のフォルダを選択すると作動します。

UTASにも

これUTASのログイン画面も同じだな。と思ったのでついでに実装しました。

こちらはITC-LMSほど使いませんが一応。

ほとんど同じなので、日本語で説明すると、

  • main.js:location.hrefURL判定して処理(といってもcssセレクタだけ)を変える。
  • manifest.json:matchesの配列にUTASのURLを加える。

だけです。

まとめ

少しだけ快適になりました。
一部の学生にしか需要なさそうですが、同じことはどこのwebサイトでもできるので、キーボード一つで押したいボタンがあればやってみてください。

以上です。

 

参考