5分で本番環境かどうかを見分ける拡張機能を作る

2025年5月23日

私たちWebプログラマーは開発環境と間違えて本番環境でDBなどを弄る動作テストとかしちゃわないかっておびえながらWeb開発をしているわけだけど、流石に仕組みでどうにかしたいところ。

本番環境にアクセスしてるときは分かりやすく見た目を変えてくれる拡張機能を入れようかと思ったんだけど、むやみやたらに拡張機能入れるのもそれはそれで怖い。

そういうことで早速作ろう。

PCの適当なところにフォルダを作る

一応コマンドのっけるけど、普通にGUI操作でおｋ。

適当なところに拡張機能用フォルダを作る。

mkdir MyExtension

中身を作る

manifest.jsonとstyles.cssを作る。

cd MyExtension
touch manifest.json
touch styles.css

中身は以下

manifest.json
example.comを警告出したいURLにする。

{
  "name": "MyExtension",
  "description": "特定のURLでCSSを追加するだけの拡張機能",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [],
  "content_scripts": [
    {
      "matches": ["*://example.com/*"],
      "css": ["styles.css"]
    }
  ]
}

styles.css

body::before {
  content: "本番環境";
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: crimson;
  color: white;
  text-align: center;
  font-weight: bold;
  padding: 5px;
  z-index: 9999;
  font-size: 14px;
}

完成

適用する

Google拡張機能のページに行く。
chrome://extensions/で行ける。

「パッケージ化されていない拡張機能を読み込む」からさっき作ったフォルダを選択する。

確認する

追加した拡張機能をオンにして対象のサイトにアクセスすると…

みたいに下に警告が出るようになる。

これくらい楽なら変に拡張機能に依存しなくていいし、jsファイル書いたりCSSファイルを自分なりに書き直したりでカスタマイズできるし良いね。

もっと弄りたい人はGoogleの公式ドキュメントとかを見ると良いかも。

以上です。