1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

Digdagの画面上部のヘッダの色を変えるChrome拡張機能(ローカル)

はじめに

Digdagの開発中に誤って本番環境のワークフローをRUNしないよう、
Digdag画面上部のヘッダの色を変えるChrome拡張機能を作ったので、
簡単ですが作り方を紹介します。

今回はローカルでhostsをいじってホスト名を操作した形で環境分離風にして試してます。

/etc/hosts
127.0.0.1 localhost      # ローカル
127.0.0.1 prd-digdag.com # 本番

やりたいこと

この黒っぽい色を環境ごとに変えたい。
本番はそのまま。ローカルは別の色にしたい。
スクリーンショット 2021-03-13 2.06.20.png

実装方法

適当にディレクトリを作り(dig-color)、以下の2ファイルを作るだけ。

dig-color
├── content.js
└── manifest.json
manifest.json
{
    "name": "Dig Color",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "DigDag Color Change For Environment",
    "content_scripts": [{
      "matches": ["http://localhost:65432/*"],
      "js": [
        "content.js"
      ]
    }]
  }

※matchesのところは自分が使うホスト名に合わせて設定します。

content.js
/* ロード時にナビゲーションバーの背景色を変える */
window.onload = function() {
  var nav = document.getElementsByTagName('nav');

  if(location.host == "localhost:65432"){
    nav[0].style.backgroundColor = '#008b8b';
  } 
};

※localhostは他のポートでも使ってたので、hostnameではなくポート番号込みのhostで判定してます。こちらもご自身の環境に合わせてよしなに設定します。

Chrome拡張機能を読み込む

  1. chrome://extensions/を開く。

  2. デベロッパーモードをONにする
    (2021/03/13時点の最新版だと以下のようなトグルボタンが右上の方にあります)
    スクリーンショット 2021-03-13 1.48.42.png

  3. "パッケージ化されていない拡張機能を読み込む"ボタンが出てくるのでクリック
    スクリーンショット

  4. 先ほど作ったファイルを格納したディレクトリ(dig-color)を選択

これで設定完了。

各環境にアクセスすると色が変わっている。

以下のように環境ごとにナビゲーションバーの色を変ることができます。

ローカル環境

スクリーンショット 2021-03-13 1.25.30.png

本番環境

スクリーンショット 2021-03-13 1.25.47.png

はい。出来上がり。

おわりに

今回はローカルで擬似的な環境分離風に試しましたが、
ローカルではなく、実際に利用してる環境に対して動かすと挙動が異なる可能性もありますので、ご了承ください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
1
Help us understand the problem. What are the problem?