LiveCampusU向けの拡張機能を作る

はじめに

全国の大学にて導入されているLiveCampusU向けの拡張機能を作るという記事です．
注意事項をよく読んでから作るor使ってください．

きっかけ

大学のポータルサイトがとにかく使いにくい...

• 毎回ログインボタンを押す必要がある
• アクセス通知確認を一日に一度踏まされる
• ダークモード非対応
• etc...

ほな作りますか...(GeminiのPro契約したからできるやろ)

手法

クローンサイトを作成するほど暇じゃないのでブラウザの拡張機能を使うことにする．

Chromiumベースの拡張機能には，manifest.jsonが必要みたい．
あと適用する.cssとか.jsとか...

ディレクトリ構造

.
├── README.md
├── access_allow.js
├── darkMode.css
├── images
│   ├── header.jpg
│   ├── icon128.png
│   ├── icon16.png
│   ├── icon32.png
│   └── icon48.png
├── login.js
└── manifest.json

manifest.jsonを作る

{
  "manifest_version": 3,

  "name": "zenjo",

  "version": "1.0",

  "description": "静岡大学のポータルサイトであるLiveCampusUの利用について，面倒なログインボタンとアクセス確認ボタンを自動で押下する拡張機能です．",

  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  },

  "action": {
    "default_icon": {
      "16": "images/icon16.png",
      "32": "images/icon32.png"
    },
    "default_title": "login_clicker"
  },

  "content_scripts": [
    {
      "matches": [
        "https://fugafuga.ac.jp/アクセス確認画面/"
      ],
      "js": ["access_allow.js"]
    },
    {
      "matches": [
        "https://ログイン画面.ac.jp/hoge/",
        "https://ログイン画面.ac.jp/hoge/?form=*"
      ],
      "js": ["login.js"]
    },
    {
      "matches": ["https://fugafuga/hoge/*"],
      "css": ["darkMode.css"]
    }
  ]
}

manifest.jsonには以下の内容を記述します．

• manifest_version 現在の最新はver.3のようなので3を指定する
• name 拡張機能の名称
• version 拡張機能のバージョン
• discription 拡張機能の説明
• icons 拡張機能のアイコン(サイズ別4種用意したほうがいいらしい...?)
• action
  • default_icon 標準表示するアイコン
  • default_title ホバー表示される名称
• content_scripts
  • matches 対象とするサイトURL
  • js 適用するjsファイルの指定
  • css 適用するcssファイルの指定

access_allow.js,login.jsを作る

window.onload = function () {
  const targetButton = document.querySelector(".access_btn");

  if(targetButton){
        targetButton.click();
}
};

対象としたいbtnのcssセレクタ―を指定しましょう．
ここではアクセス確認画面の通知同意ボタンを指定しています．

login.jsは割愛します．（やってること同じ）

darkMode.cssを作る

本丸のダークモード作成です．
筆者のデザインセンスは壊滅しているので，おとなしくGitHubからスタイルを拝借しました．(主に4色で構成されていてセンスを感じるね...)
はい，使う色はこれらです.

• #0d1117 主に背景色
• #151b23
• #212830
• #3d444d 主にborder
• #238636 主にボタン
• #ffffff 主に文字色

background等の指定の後には!importantを繋げましょう！（忘れたら元のcss指定が先行します）

頑張ってディベロッパーツールを駆使して描きましょうね...

icon.pngを作る

先に述べたように筆者は美的センスがないので，Gemini君に描いてもらいました．

傑作

静大らしく...というプロンプトなのに，なぜか人工言語を使った斬新な作品が出力されました．彼（彼女）の自尊心を傷つけないために，このまま利用します．
なんだか膳という字と杖という字に似ている気がするので，プロダクトをZenjoと名付けることにします．

使い方

Chromiumベースなら大体同じです．(FireFox,Safari?知らない子ですね...)
拡張機能の管理画面(Edge:extension)にアクセスし，ディベロッパーモードを有効化します．
展開して読み込む等から作成したmanifest.jsonがあるディレクトリを選択すると取り込むことができます．

注意事項

当記事・拡張機能は，以下の団体様・製品と一切の関係を持ちません．

• 株式会社NTTデータ九州の製品であるLiveCampusU
• 国立大学法人静岡大学