運用作業を安全にするChrome拡張のススメ

はじめに

マイクロアドでサーバサイドエンジニア兼システム開発部の副部長をしている奈良橋です。
今回は社内運用が(わずかにですが)安全になるようなChrome拡張機能を作成しました。
この経験を通じて（差し出がましく恐縮ですが）わずかな手間でもChrome拡張機能が作成できるといった知見や、様々なWebUIを安全に運用するためのきっかけを提供させて頂きます。 ※ 本ブログの内容はDigdagのWebUIを例に書かれていますが、WebUIが存在するものは全般応用できるものになっております。

話のきっかけ

軽く前提にも触れますと、マイクロアドではバッチ処理のワークフローやジョブスケジューラーとしてDigdagを利用しています。

※マイクロアドでのバッチ開発を詳しく知りたい方はこちら developers.microad.co.jp

プロダクション環境での利用はもちろんですが、検証環境用としても動作確認やテスト用途でDigdagが用意されています。

上記を前提に、
様々な運用でプロダクション環境のDigdag(WebUI)をブラウザで開くことがあります。
必要な作業が終わればプロダクション環境でのDigdag(WebUI)は閉じるが最適解です。
が、その徹底はなかなか難しく
開きっぱなしのままで、改修作業中のバッチをテストするために検証環境用のDigdag(WebUI)を開く といったことは日常のなかで行ってしまいがちです。
それにより今表示しているのはプロダクション環境なのか、検証環境なのかが一瞬わからなくなり"ドキっ！"っとしたことがあるのは1人や2人ではありませんでした。

幸いにも致命的な事態に陥ったことはないのですが、ヒヤリハットとも捉え方によってインシデントとも思えるこの状況を打開したい！
もう！ドキっとする状況から卒業したい！
と思い対策を練りました。

なぜChrome拡張機能なのか

方法は沢山あったはずですが、今回は「手軽に行きたい」だったのと「Chrome拡張機能の可能性を知りたい」といった欲求によりこちらの手段をとりました。
また、たまたま知る限りの運用者が全員Chromeを利用していたこともあります。

具体的にどんな拡張機能なのか

ここまでの話の中でなんとなく推測がつく方もいるはずですが、
プロダクション環境なのか検証環境なのかが一目で判別がつくようにするようなChrome拡張機能となります。

※以下参考画像

実装のサンプル

簡単な実装なので、少し情報をマスキングして実装にも触れていきます。

アプリのディレクトリ構成はこのようになっています。

sample_extension/
├── manifest.json
└── src
    ├── content.css
    └── content.js

まずはmanifest.jsonファイルから触れます。詳しくはこちら公式サイトを見ていただくとして今回はContent scriptsとして作りました（他にもいろんな手法があるので、興味のある方は公式サイトで）

manifest.json

{
  "name": "sample extension",
  "version": "1.0.0",
  "manifest_version": 3,
  "description": "社内のdigdagを安全に運用するための拡張機能",
  "content_scripts": [{
    // matchesに記載したURLのパターンでのみ発火する。ここではドメイン以外はワイルドカード指定。
    "matches": [
      "*://{プロダクション環境のドメイン}/*", 
      "*://{検証環境のドメイン}/*"
    ],
    // 発火時に実行されるJS
    "js": [
      "src/content.js"
    ],
    // 発火時に読み込まれるCSS
    "css": [
      "src/content.css"
    ],
    "all_frames": true
  }]
}

JavaScriptではLoadイベントの際にbody要素の最下層に環境名を含めたdiv要素を追加するような実装にしています。

src/content.js

window.addEventListener("load", () => {
    const labelDiv = document.createElement("div");
    const [idName, labelName] = (() => {
        switch (window.location.host) {
            case '{検証環境ドメイン}':
                return ['_devel_label', '検証環境'];
            case '{プロダクション環境ドメイン}':
                return ['_production_label', 'プロダクション環境'];
            default:
                return ['_undefine_label', '環境不明'];
        }
    })();
    labelDiv.setAttribute('id', idName);
    labelDiv.innerHTML = labelName;
    document.body.appendChild(labelDiv);
}, false);

CSSでは追加されたdiv要素を画面のきまった位置に固定するように記載。

src/content.css

/* 特定のDIVを画面の左上に固定 */
div#_production_label{
    position: fixed;
    top: 0;
    left: 0;
    color: #ff7d6e;
    border-top: solid 10px #ff7d6e;
    background: #ffebe9;
    padding: 0.5em 1em;
}

/* div#_production_label, div#_undefine_label ~省略~  */