きっかけ

ある日愛用していたChrome拡張機能が利用できなくなっていました。
環境ごとに画面の隅にリボンを表示させることができる拡張機能で、フールプルーフとしてとてもありがたい機能だっただけに、突然利用不可になってしまったのはとても残念でした。

代わりの拡張機能はないかと探してみたのですが見つからなかったため、コーディングの勉強もかねて代わりになる拡張機能を自作してみました。同じファイルを作成すればほぼコピペで利用できるようになっているかと思います。
画像のように画面右下に目印のリボンを表示させます。
※初心者が作成した必要最低限のソースです。

作成するもの

拡張機能用のファイルをまとめるフォルダ（名前は何でもOK。以下のファイルはすべてこのフォルダ内に作成する）
マニフェストファイル（manifest.json）
スクリプトファイル（content.js）
デザイン用ファイル（styles.css）

マニフェストファイル（manifest.json）

作成するChrome拡張機能の設定を決まった形式で記載する必要があります。
マニフェストファイル名は必ず「manifest.json」で作成します。
リボンを表示させたい環境のURLを記載します（例は3つのページでそれぞれリボンを表示させたい場合）。

manifest.json

{
    "manifest_version": 3,
    "name": "環境識別バナー",
    "version": "1.0",
    "description": "開発・検証・本番環境を識別するためのバナーを表示",
    "permissions": ["storage"],
    "host_permissions": [
      "https://XXXXXXXXX.service-now.com/*",
      "https://XXXXXXXXX.service-now.com/*",
      "https://XXXXXXXXX.service-now.com/"
    ],
    "content_scripts": [
      {
        "matches": [
          "https://XXXXXXXXX.service-now.com/*",
          "https://XXXXXXXXX.service-now.com/*",
          "https://XXXXXXXXX.service-now.com/*"
        ],
        "js": ["content.js"],
        "css": ["styles.css"]
      }
    ]
  }

スクリプトファイル（content.js）

動作させたい内容を記載します。
URL、表示させたいテキスト、背景色、文字色を指定します。

content.js

(function () {
    const environments = {
      "XXXXXXXXX.service-now.com": { text: "開発環境", bgColor: "blue", textColor: "white" },
      "XXXXXXXXX.service-now.com": { text: "検証環境", bgColor: "green", textColor: "white" },
      "XXXXXXXXX.service-now.com": { text: "本番環境", bgColor: "red", textColor: "black" }
    };
  
    const hostname = window.location.hostname;
    const env = environments[hostname];
  
    if (env) {
        const ribbon = document.createElement("div");
        ribbon.textContent = env.text;
        ribbon.classList.add("ribbon"); //クラスを適用

        //環境ごとの背景色と文字色を設定
        ribbon.style.backgroundColor = env.bgColor; //背景色
        ribbon.style.color = env.textColor; //文字色
    
        document.body.appendChild(ribbon);
      }
    })();

デザイン用ファイル（styles.css）

リボンの見た目を指定するCSSファイルを作成します。
今回は画面右下に小さく表示させていますが、このファイルで調整して自由にカスタマイズできます。

styles.css

.ribbon {
  position: fixed;
  bottom: 30px;  /* 画面の下から30px */
  right: 50px;   /* 画面の右から50px */
  width: 150px; /* リボンの幅 */
  text-align: center; /* 文字はリボンの中心 */
  padding: 5px 0;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px; /* 角を丸める */
  z-index: 10000; /* 優先的に前に */
}

Chromeへ適用する

必要なファイルを作成したらChromeに適用します。

拡張機能にアクセス
右上の「デベロッパーモード」をON
左上の「パッケージ化されていない拡張機能を読み込む」でフォルダを選択

上記の手順で一度適用してからソースをカスタマイズした場合は、拡張機能の再読み込みをして最新の更新を反映させます。

参考にさせていただいたサイト

余談

パッケージ化して誰でも気軽に使えるようにしたかったのですが、設定画面の作成など自分にはまだハードルが高く、今回は断念しました。今後もっと勉強して挑戦してみたいです。