中大生なら一度はイラっと来たことがあるmanabaのタイムアウト画面。
今回はmanabaのタイムアウト画面が出たら自動でログイン画面へ遷移するGoogle Chromeの拡張機能を一緒に作っていきましょう！
【作成の所要時間】
コピペなら3分
手打ちなら20分
【完成品だけ欲しい場合】
完成品はこちらからダウンロード。
画面右上の「ダウンロード」からダウンロードして、ダウンロードされたzipファイルを解凍し、このページの「Chromeで読み込み」の項目に従って読み込んでください。
準備
Windowsの場合
「VSCode」「Emacs」「サクラエディタ」等のエディタアプリを準備しましょう。
もしなければデフォルトで入っている「メモ帳」でも構いません。
Macの場合
「VSCode」「Emacs」「Xcode」等のエディタアプリを準備しましょう。
もしなければデフォルトで入っている「テキストエディット」でも構いません。
テキストエディットの場合は開いてから、上部のメニューにある「メニュー」を押して「標準テキストにする」をクリックしてください。
保存
Windowsの場合は「Ctrl + S」、Macの場合は「⌘ + S」を押して「manifest.json」という名前をつけて、デスクトップに保存しましょう。
中身の記述
エディタアプリに以下を書いてください。コピペもOK！書き終わったら保存してください！
{
"name":"Beyond manaba",
"description":"manabaのタイムアウト時に自動でログインページへ遷移させる拡張機能です。",
"version":"1.0.0",
"manifest_version":3,
"content_scripts":[
{
"matches":["https://gakunin-idp.c.chuo-u.ac.jp/sso/timeout.cgi**"],
"js":["insert.js"]
}
]
}
解説
これはJSONという形式のファイルで、Chrome拡張機能の基本設定を記述するものになります。
- "name":"Beyond manaba",
は拡張機能の名前を「Beyond manaba」に設定したということです。同様に、
- "description":"manabaのタイムアウト時に自動でログインページへ遷移させる拡張機能です。",
は拡張機能の説明を書いています。
- "version":"1.0.0”,
はこの拡張機能のバージョンを表しています。
- "manifest_version":3,
はこの設定ファイルの記述方法がバージョン３であることを示していて、これは変更してはいけません。
- "content_scripts":[
{
"matches":["https://gakunin-idp.c.chuo-u.ac.jp/sso/timeout.cgi**"],
"js":["insert.js"]
}
]
はどのウェブサイトにどのスクリプト(プログラム)を適用するかを設定しています。ここに書いてある「js」はjavascriptというプログラミング言語の種類で、「insert.js」はこの後作るjavascriptファイルになります。
もう一つ作る
今作ったファイルを保存してから、再度エディタアプリで新しいファイルを作ってください。新しいファイルの作り方が分からなければ、一度アプリを閉じて、再度開きましょう。
保存
Windowsの場合は「Ctrl + S」、Macの場合は「⌘ + S」を押して「insert.js」という名前をつけて、デスクトップに保存しましょう。
中身の記述
エディタアプリに以下を書いてください！コピペもOK。書き終わったら保存してください！
window.location.href = 'https://room.chuo-u.ac.jp/ct/home';
解説
これはjacascriptと呼ばれるプログラミング言語で、このプログラムが読み込まれるとmanabaのログイン画面へ遷移させるコードになっています。
一つ前に作ったmanifestファイルでこのプログラムが実行されるウェブページをmanabaのタイムアウト画面に設定しているので、タイムアウト画面に遷移→ログイン画面に遷移というような挙動になります。
フォルダの作成
作ったデータを全て保存したらデスクトップに戻って、「manaba」というフォルダを新規作成します。
今作ったフォルダ「manaba」に先ほど作った「manifest.json」「insert.js」を入れましょう。
Chromeで読み込み
GoogleChromeを開いて「設定」＞「拡張機能」のページ(chrome://extensions/ )を開きます。
画面右上の「デベロッパーモード」をオンにします。
画面左上の「パッケージ化されていない拡張機能を読み込む」をクリックして、さきほどデスクトップに作った「manaba」というフォルダを選択しましょう。
完成！！
これでもうすでにChromeに自作の拡張機能が適用されました。
これでこれからはタイムアウト画面にイライラすることはありません！！
もしHTMLやCSSを理解している方は、CSSファイルも作って下の写真のようにmanabaをオリジナルデザインにする拡張機能を作ることもできるのでぜひチャレンジしてみてください！
