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`を作る
```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`を作る
```js
window.onload = function () {
  const targetButton = document.querySelector(".access_btn");

  if(targetButton){
        targetButton.click();
}
};
```
対象としたいbtnのcssセレクタ―を指定しましょう．
ここではアクセス確認画面の通知同意ボタンを指定しています．

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

## `darkMode.css`を作る
本丸のダークモード作成です．
筆者のデザインセンスは壊滅しているので，おとなしく[GitHub](https://github.com/)からスタイルを拝借しました．(主に4色で構成されていてセンスを感じるね...)
はい，使う色はこれらです.
- `#0d1117` 主に背景色
- `#151b23` 
- `#212830`
- `#3d444d` 主にborder
- `#238636` 主にボタン
- `#ffffff` 主に文字色

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

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

## `icon.png`を作る
先に述べたように筆者は美的センスがないので，[Gemini](https://gemini.google/)君に描いてもらいました．

### 傑作
![傑作すぎる作品](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842710/0ed5b79e-07eb-44aa-8482-0318715f31b1.png)


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

# 使い方
Chromiumベースなら大体同じです．(FireFox,Safari?知らない子ですね...)
拡張機能の管理画面(Edge:extension)にアクセスし，ディベロッパーモードを有効化します．
展開して読み込む等から作成した`manifest.json`があるディレクトリを選択すると取り込むことができます．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842710/bc5175b8-35da-4621-83f9-56624860e0ff.png)

# 注意事項
当記事・拡張機能は，以下の団体様・製品と一切の関係を持ちません．
- 株式会社NTTデータ九州の製品である[LiveCampusU](https://www.nttdata-kyushu.co.jp/solution/education/001.html)
- [国立大学法人静岡大学](https://www.shizuoka.ac.jp/)