ARCでMiterasを便利に使うBoosts

ブラウザの ARC には、ユーザー側で用意したスクリプトや CSS を適用できる Boosts という機能があります。

勤怠管理システムの Miteras で「こうしたら便利だな」と思う部分があったので、以下のような設定で使っています。

セッションが切れてるときに、自動的にログインページにリダイレクトする

セッションがよく切れるんですが、そのときにエラーページが表示されます。再ログインしたいだけなので、自動でログインページにリダイレクトするようにしました。

リダイレクト先の URL は、各自の環境に合わせて変更してください。

document.addEventListener("DOMContentLoaded", function () {
  let button = document.getElementById("loginButtonId");

  if (button) {
    document.body.innerHTML =
      '<a id="login" href="https://kintai.miteras.jp/XXXXXXX/login">login</a>';
    let login = document.getElementById("login");
    login.click();
  }
});

画面上に表示されているログインボタンがどうしてもクリックできなかったので、A タグを生成しています。

勤怠承認時に、承認状況をハッキリわかりやすくする

勤怠の承認用の画面で、どれが承認待ちでどれが未申請かどうか、見てすぐに頭に入ったほうがありがたいなと思ったので、過激に色付けしました。

tr > td[approval-condition="4"] {
  opacity: 50%;
  background-color: #eee !important;
  border: 1px solid #eee;
}

tr > td.table01__cell--apv:not([approval-condition]),
tr > td.table01__cell--apv02:not([approval-condition]) {
  background-color: #ffff00 !important;
  border: 1px solid #ffff00;
}

tr > td[approval-condition="2"] {
  background-color: #ff0000 !important;
  border: 1px solid #ff0000;
}

Before	After